Oh shut up. If it wasn’t as bad ass as it is, I wouldn’t write about it. This isn’t really about Compass though. Well…it is, but more about the app that was built for it, so that users don’t have to use the command line. Honestly, if I can figure out how to at least make Compass compile my Sass through the command line, then anyone can. BUT…this makes the whole process of a hell of a lot easier.

Compass made easier

At first, I thought, the command line really isn’t that hard because you only need to know a few commands, why do I need an app to do this? Then I tried Compass.app by Handlino. After trying it out, there is only one reason why I can see someone not wanting to use this product (which only costs $7 by the way), but I’ll talk about that last.

After you have unzipped the file, and opened the app up, all that happens is that a gray version of the Compass logo appears in your task bar. When you click the icon, you get several things you can do, depending on where you are in your project. If you are starting a new one, you have a bunch of different Compass project options you can install. I went with the HTML5 Boilerplate option, since I love using it. The others are: Blueprint, basic Compass Projects, 960gs, or HTML5 Boilerplate. You can see what I’m talking about in the image below.

After you select the type of project you want to create, you are asked where you want to save it, and what you want to call it.

So you created a project…what the hell just happened?

As you can see, there isn’t a whole lot to do, but that is really the beauty of this app. It doesn’t need to do much more. After you create a project, Compass.app opens a window that gives you a report of what it just installed in your project folder, and some links to the stylesheets to copy and paste into your file. I didn’t need them though because they were already linked. Below is what the report looks like:

What actually happened though is the really awesome part. If you open the folder you had the app create, you will see something like this:

Yep! Everything you need to just start coding your website. It installed my .scss file, the HTML5 Boilerplate files, the Compass config file, and the javascript files that the boilerplate uses (Modernizr, jQuery, DD_belatedPNG.fix, blank script file)…basically the works. Just a couple of clicks, and BAM!…ready to go!

Compass.app is watching

If you have the project open, the app is watching for any changes to your Sass file. You make a change to the file, the app then compiles it. Freakin’ awesome. And if you don’t have it open, click the icon in your task bar again, and under ‘History’ you will see a list of your projects. All you have to do is select the one you want Compass.app to watch, and it will. Seriously, it couldn’t really be any easier. I had asked about something like this from Compass’ creator Chris Eppstein, and this came out from someone else soon after. Thank you Handlino!

NOTE: I should also mention there is a ‘Preference’ menu item that allows you to specify your gem path, but I am not that far into my self teaching of Ruby to have any idea what to do with that yet.

Conclusion

For seven bucks, this is a no brainer. Just be sure to avoid the mistake I made when going to their buy form. It is in a different language, but up at the top is a drop down for the English version. I didn’t see that when I went there, and I panicked.

Is there any reason not to use Compass.app though? Maybe…which I say hesitantly. It seems to be using Compass v.10.6., and I will assume that most users of Compass are using it’s beta Version: 0.11.beta.5. The app is also using Sass version 3.0.24, when it is on version 3.0.25. Big deal? Probably not. I’m also not sure if the HTML5 Boilerplate is the most current version, but that was awesome to begin with anyway. I don’t really think the newer versions added anything outstanding in the terms of “need to have”, but that is up for you to judge. In my opinion, for $7, just buy the damn thing.

Let me know what you think if you have already purchased it! And if you know what the hell the gem path option is, please explain (but in idiot terms so we can all understand your dialect of nerd speak).

Coupon Code: webmachine

I’ve been continuing on with my site redesign, which means I continue to use Sass. I’m dead serious with the title of this post, too. Not just Sass, but Compass as well. Sass would be good by itself, but the stuff that Compass puts in, especially it’s CSS3 module. I have used the border-radius and box-shadow includes enough now, that writing them in regular CSS seems an incredible chore.

I only have to write this:

@include border-radius(10px 0px 0px 10px);

To achieve this:

-moz-border-radius:10px 0px 0px 10px;
-webkit-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
-ms-border-radius:10px 0px 0px 10px;
-khtml-border-radius:10px 0px 0px 10px;
border-radius:10px 0px 0px 10px;

You can see why this is awesome. If you can’t, you should stop reading. No, seriously though, how many of you actually write all of those in CSS? I don’t. I write the one for -moz, -webkit, and the last one. Compass is covering ALL of them, so in effect, it is doing more than I originally would have, and I’m writing less. So how did my stupidity grow? Good question.

The answer? I have found myself writing completely stupid crap. Let’s take nesting for example, because I seem to have broken a rule I wasn’t aware of until this discussion. Apparently, nesting anymore than 3 levels down, is complete idiocy. Didn’t know that…which makes me feel even more embarrassed. After asking a question of Compass’s creator, Chris Eppstein, if this seemed reasonable:

aside { ul { li { a {} } } }

The short answer, which was short anyway due to it being asked on twitter, was no. And as I looked at what I wrote, that answer was really all I needed. I’m nested 4 elements deep in the above example, I really only needed three, mostly likely two. Why does this matter? As one commenter put it in the linked discussion above, you have less chance of shooting yourself in the foot the larger your stylesheet becomes. Plus I’m just making it inefficient to begin with. It was totally unnecessary.

Any other issues?

Yes. DUMB ASS VARIABLES! I’m looking at my .scss file right now, and I see two variables that are totally ridiculous. I have assigned ‘left’ to $l, and ‘right’ to $r. Seriously? I can type the words ‘left’ or ‘right’ just as fast as I can calling the variable. This was not saving me anything in writing my CSS. Am I going to remove it though? No. It’s not hurting anything, and it is a reminder to myself now to think more before I type.

Another issue is, there isn’t a great resource for people new to Sass, to see what other developers have written in building an average site. I’m talking about a typical info site. I am basically flying by the seat of my pants. Luckily, a book is coming out – Sass and Compass in Action, and I’m hoping this will help in that regard. I want to see real life examples of what some good mixins are. Right now, the two I have written that I like are for calling image sprites so that all I have to do is pass the left and top position numbers. What I need though is the deeper stuff, if there are any. I think the main problem for me is, there are no real beginners. The people that created it and others using Sass seem to be hardcore Ruby programmers who are used to this type of stuff to begin with.

What does this stuff all mean?

It means I have learned a great deal using Sass for just one site. I can at least see what I have done wrong, where I can improve, and next time won’t be such a head slap to my face when seeing some of the crap I did. So if there are any experienced Sass users out there reading this, I would love to see some good mixin examples. Do you use any for font stuff? I don’t even know, but if you do, please post it in the comment section! Thank you!

Coupon Code: webmachine

I’ve read a couple of posts/articles in the past week that REALLY got me excited again about CSS. A guy over at Google, Tab Atkins, has hinted at it, and then this article by Johan Brook talks about it as well.

What the hell am I talking about you ask? Well by the title of this post you should have figured it out.You know all those articles I’ve posted about my experience with Sass and how much I love it? Or maybe my artilce on LESS.js? There are other articles around the net where people commented their worries and complaints on why they didn’t need or use it. Well guess what…you might want to rethink that and start learning. Variables, mixins and nesting might be coming to CSS itself. If you didn’t read the article I linked to above, Webkit is thinking about it, and it may be here as soon as the end of this year.

What does this mean for web developers?

Adding these things into CSS would be a dream come true, and now that there is some actual discussion going on to make this happen (and from people at Google!), that dream is closer to reality. If Chrome (I assume Safari is included in that) adds this functionality in, I think Firefox will be close behind. That’s cool and all, I know, but what does that mean for us?

Simple answer: A whole lot of awesome! Smaller and tight stylesheets! Possibly quicker development time. Might as well start learning it now, cause its not hard, but you do have to put some effort into it to get it down.

CSS seems to be growing in what it handles and does, and faster than people are learning it. Trust me, I work with people who don’t even have CSS2 down and they’ve been working with it for two years. If adding things like this culls the heard a little, I for one am all for it.

What are these new features anyway?

Here is a real quick example of what I have used so far in my redesign of my website, so you can see what we have to look forward to. This is from my Sass file, and is for the right sidebar of my home page.

Below includes some variables, a couple of mixins, and some nested stuff:

/Variables
$dkgray: #2d2d2d;
$orange: #f15c22;
$wht: #ffffff;
$w: 1020px;
$r: right;
$l: left;
 
@mixin font ($size, $weight, $family: "Arial,Helvetica,sans-serif"){
  font: {
    family: #{$family};
    size: $size;
    weight: #{$weight};
  }
}
@mixin sprite($left, $top) {
    background:  url(../images/iconSprite.png) no-repeat $left $top;
}
 
#calltoAction {
	width: 260px;
	height: 181px;
	background: url(../images/calltoAction.png) no-repeat left top;
	color: $dkgray;
	padding: 25px 0 0;
	h1 {
		@include font(16px, "bold");
		color: $dkgray;
		text-align: center;
		text-shadow: none;
	}
	h2 {
		@include font(42px, "bold", "Bebas, Arial,Helvetica,sans-serif");
		@include sprite(210px, 13px);
		color: $dkgray;
		text-align: center;
		padding: 0 18px 4px 0;
		text-shadow: 2px 2px 3px #999;
		border: none;
		a {
			color: $dkgray;
			&:hover {
			color: $orange;
			}
		}
	}
	h3 {
		@include font(16px, "bold");
		color: $dkgray;
		text-align: right;
		margin: 0 20px 0 0;
	}
}

The tag with an id of #calltoAction has a variable call:

color: $dkgray

Now, $dkgray is set to #2d2d2d, but the best part is, I don’t have to remember the damn hex code for that color. Seems silly at first, but takes less thinking on my part, and really easy to change that color across the board if I have to. No find and replace needed.

You will also see that there is an h1 nested with in that #calltoAction, which only styles the h1 tags within it. This avoids repetition by nesting selectors within one another. Awesome. If you look at the above code you can see I’ve nested some things even deeper, to style the ‘h2 a’ styles.

There is also the mixin calls. If you look at the top of the code above, you see a mixin for the sprite. Anytime I want to use that same sprite (and I do quite often), I type something like this:

@include sprite(210px, 13px);

All that I have to change each time are the pixel numbers for the position. This means less typing and smaller file sizes when all of these things are used. A LOT less repetition goes on throughout as well.

What do you think about this?

Sass and Compass let me do this cool crap now, but if CSS gets this functionality, and compiling happens in browser, there is going to be a lot of happiness. Probably a lot of grumbling and haters as well, but who cares about them? CSS was becoming tedious to write for me without Sass. This will make it fun again for me, and a lot faster to write. I think it needed it, and this is long over due. What do you guys think?

Coupon Code: webmachine

I had a thought the other day and on a whim I asked a couple people if I could get an informal interview. I email them questions, and they give me the answers. I originally planned to ask people that were not in the top tier of popularity…you know, people like…well…me. The ones who write web development blogs because they love what they do, and working in the trenches. People that have something to say that most of us wouldn’t know about otherwise. That plan has somewhat changed when I got a “yes” from someone I didn’t expect to. I plan on doing a bunch of these, but this first one makes me very happy. On to the first of what I call “Informal Interviews.”

Chris Eppstein – Creator of Compass

Chris is the creator of Compass, a stylesheet authoring framework, and is on the core team of Sass — the stylesheet syntax upon which Compass is built. On top of that, he is the Software Architect at Caring.com, a website devoted to caregivers of the sick and elderly. How he has any time left to relax, I’ll never know. On to the Q & A!

How did the creation of Compass come about? Were you already on the core Sass team, or did that come after? And did Nathan Weizenbaum or Hampton Catlin have any input?

When you are working on a release for Sass, do you call N. Weizenbaum and go over things/exchange code, or video conference? How do you all communicate and exchange code, and who handles what?

Do you have any stats you can share on how many people are using Sass? Any growth surges?

Who is Sass intended for in your opinion? Is it mainly for hardcore Ruby developers?

Are there any goals to try and make Sass and Compass more accessible to wider range of people? Was the SCSS syntax part that?

Related to the previous question, did you have any hand in creating Compass.app by Handlino? If not, what do you think of it? I’m also curious on why it costs $7, when Compass itself is free. That seems backwards to me.

Also, if you didn’t have any part to play in that, do you intend to ever create one yourself? Maybe an an app with more of an interface to try and get away from the command line?

I’ve only been using Sass, along with Compass for only a few months or so (and only on personal projects so far), even though I have read about it before that. It seems like a lot has been added recently though, like CSS3Pie and Lemonade. Are there any other things like those two that are in the works for Compass?

Speaking of CSS3Pie, why was that added? Css3Pie really only effects IE, and a very limited amount of CSS3 properties (with some drawbacks I have personally seen already). Was it a trivial amount of work to add it to Compass, making it a no-brainer?

Why is Compass still in Beta mode? Are we ever going to actually see 1.0?

I really like the look of the beta website, but why did you decide to get a more “hip and updated” look now, and why didn’t you design it?

Do the Sass vs. LESS posts and arguments bother you? And do you think LESS is any good?

On Sass’ website, it says that it is a meta-language, or what I call an abstracted language. Do you think this is going to become a popular trend? Where someone takes an existing language and abstracts it, like Sass does to CSS or CoffeeScript does Javascript?

If someone like say…me…who can now use Sass, wanted to start learning Ruby, can you recommend any books, or where and how we should start? Take into account that this someone doesn’t know PHP.

And lastly – .sass or .scss – who wins in a fight?

And that is a wrap!

I hope you enjoyed reading Chris’ answers as much as I did. This was a real treat for me, because I got to ask him things I have been wanting to know for a while. I wanted to ask more, but I didn’t want to bombard him with a million questions and piss him off. Thank you Chris for doing this for me, and I look forward to what you do with Compass this year!

Coupon Code: webmachine

By now, I would think most of you know how to use sprites. They are extremely useful, and keep the number of http requests down to a minimum. You have this png file that you work on in Photoshop, and you keep adding to it, saving it and whatever else. Get’s time consuming right? At least a little, so shut up you nay sayers. Wouldn’t it be great if there was an easier way? Damn straight!

Thirsty? Drink some Lemonade!

Well Compass makes it easy now, and you don’t need to use Photoshop to do it! Compass has merged with Lemonade to make doing this a cinch. With each new iteration of this framework, something awesome gets added, and this is just plain cool. Now you can take a bunch of images you have and make a sprite on the fly with them. Here is how you go about it.

Let’s get Sassy

Let’s say you have four icons in an icon folder, within your images folder (/images/icon/icon1.png), and they are all 32×32 pixels. So you have icon1.png, icon2.png, icon3.png, and icon4.png. Personally I think the best way to accomplish creating the sprite is by using the ‘magic’ icon-sprite mixin, which you would use like this:

@import "icon/*.png";
 
.myClass {
  .icon1    { @include icon-sprite(icon1);    }
  .icon2   { @include icon-sprite(icon2);   }
  .icon3   { @include icon-sprite(icon3);   }
  .icon4 { @include icon-sprite(icon4); }
}

That crap compiles to this CSS:

.icon-sprite,
.myClass .icon1,
.myClass .icon2,
.myClass .icon3,
.myClass .icon4 { background: url('/images/icon-8b38262b80.png') no-repeat; }
 
.myClass .icon1 { background-position: 0 -64px; }
.myClass .icon2 { background-position: 0 -32px; }
.myClass .icon3 { background-position: 0 -96px; }
.myClass .icon4 { background-position: 0 0;}

If you want to create space between each of those icons, put this above your import, where the 20px can be anything you want:

$icon-spacing: 20px.

The real magic!

I did two tests. One with the images at the same size (32×32 pixels), and then I added an icon that was 200px by 72px. The sprite gets its width from the image in the sprite that is the widest, and the CSS output shows the adjustments in the background position. It takes any guesswork or math that you have to do when you create sprites the normal way and write your own styles. This can save a lot of time if you have images that are going to be used as a block of its own (meaning not in something like an li where other images from the sprite can bleed through.

There are a few different methods of using Lemonade, or really the sprite function of Compass now that it is integrated. If you are interested, you can check them out at the Spriting with Compass page. There are also a ton of ways to customize the sprite.

Any issues?

Two, one of which that you just have to be aware of when you are making the site live. If you change the sprite at all, if gives you a new png, so be aware of that and make sure you have the proper one uploaded. The second issue is, while you can customize the sprites you generate, all of those options look like they could get confusing, and I would rather just make the sprite myself. If you generated a bunch of different sprites you could also end up with a ton of CSS. If you just need a basic sprite though, this is the way to go. Thanks to Chris Eppstein for adding Lemonade to Compass.

Coupon Code: webmachine

It is slow going because I am doing a lot of new things. At least for me. I’m using Compass and Sass, the HTML5 boilerplate, HTML5 tags that I am still coming to grips with, and who knows what the hell else. But I wanted to show you my .scss sheet so far, so you can see what is involved. You can learn a lot just by looking at stuff like this, so if you find it helpful, let me know!

What I’ve learned in the process

Holy crap…there is a lot. What has helped me the most is learning a little more of Compass. I was and still am an idiot in that area, but I think I have read most of the site now. There are a few things that evade my grasp, but for the most part, things are coming together.

My Sass writing, SCSS syntax to be exact, has become faster. I don’t have to keep looking up how to write things now, and I feel like my development time will decrease now because of that. If I had to start a project that was already designed, I could probably chop off about a fourth of the time required if I just wrote the plain CSS out. That will only get better as I go.

Ruby. Yes, if you have kept up here, I have started learning Ruby. Won’t be easy, but I am looking forward to what is going to pop into my head. Once I have a basic knowledge of how to program in it, I’ll throw Rails in, and hopefully start using Haml. This might all be gibberish to you, but I’m more typing out future plans.

So to recap, in one project, I have learned the basics of Compass, Sass, and HTML5, and started learning Ruby, which I am actually not using on it. Pretty tall order for one project that started out as a simple redesign.

What are you learning at the moment? Comment and let me know!

My Sass sheet so far

Here are my Sass stylesheets so far. If anyone that has more experience in Sass than I, sees anything I can improve, please let me know – I would be very greatful.

Main:

$dkgray: #2d2d2d;
$orange: #f15c22;
$wht: #ffffff;
$w: 1020px;
$r: right;
$l: left;
 
@mixin font ($size, $weight, $family: "Arial,Helvetica,sans-serif"){
  font: {
    family: #{$family};
    size: $size;
    weight: #{$weight};
  }
}
 
@mixin sprite($left, $top) {
    background:  url(../images/iconSprite.png) no-repeat $left $top;
}
 
body {
	background: url(../images/background.jpg) repeat-x 0 0 $dkgray;
	color: $wht;
	@include font(16px , "normal");
	p {
		line-height: 1.3;
	}
}
 
ul , ol {
	margin: 0;
}
 
a  {
	color: lighten($orange, 20%);
	zoom: 1;
	outline: none;
	&:active, &:visited {
		@extend a;
	}
}
 
a:hover {
	color: $orange;
}
 
h1 {
	@include font(24px, "bold");
	text-shadow: 2px 2px  5px $orange;
}
 
h2 {
	@include font(18px, "bold");
}
 
.clear {
	float: $l;
	clear: both;
}
 
.border {
	border-bottom: 1px $orange dotted;
	padding: 0 0 5px;
	margin: 0 0 10px;
}
 
.marginTop {
	margin-top: 20px;
}
 
#container {
	width: $w;
	margin: 0 auto;
	overflow: hidden;
}
 
header {
	width: $w;
	height:  337px;
	position: relative;
	background: url(../images/jcIndex_01.png) no-repeat left top;
}
 
#contentRepeat {
	width: $w;
	background: url(../images/jcIndex_03.jpg) repeat-y left top;
}
 
#contentTop {
	width: $w;
	background: url(../images/jcIndex_02.jpg) no-repeat left top;
	min-height: 500px;
	height: auto !important;
	height: 500px;
	overflow: hidden;
	padding: 80px 0 0;
}
 
.ie6 #contentTop {overflow: visible;}
 
#contentLeft {
	width: 580px;
	float: $l;
	margin: 0 0 0 70px;
	h1 {
		@include font(32px, "bold", "Bebas, Arial,Helvetica,sans-serif");
	}
	ul {
		margin: 20px 0  20px 30px;
		li {
			margin: 0 0 10px;
		}
	}
}
 
#contentRight {
	width: 260px;
	float: $r;
	margin: 0 38px 0 0;
	padding: 20px 16px 10px 20px;
	@include border-radius(10px 0px 0px 10px);
	background: none $dkgray;
	border: 2px $wht solid;
	border-right: none;
}
 
 
/*
****************Call to Action in the right sidebar *********************/
 
#calltoAction {
	width: 260px;
	height: 181px;
	background: url(../images/calltoAction.png) no-repeat left top;
	color: $dkgray;
	padding: 25px 0 0;
	h1 {
		@include font(16px, "bold");
		color: $dkgray;
		text-align: center;
		text-shadow: none;
	}
	h2 {
		@include font(42px, "bold", "Bebas, Arial,Helvetica,sans-serif");
		@include sprite(210px, 13px);
		color: $dkgray;
		text-align: center;
		padding: 0 18px 4px 0;
		text-shadow: 2px 2px 3px #999;
		border: none;
		a {
			color: $dkgray;
			&:hover {
			color: $orange;
			}
		}
	}
	h3 {
		@include font(16px, "bold");
		color: $dkgray;
		text-align: right;
		margin: 0 20px 0 0;
	}
}
 
/*
****************Social Media in right sidebar***********************/
 
#social {
	margin: 20px 0 30px;
	overflow: hidden;
	ul {
		margin: 0 0 0 20px;
		padding: 0;
		li {
			list-style: none;
			float: left;
		}
		.twitter {
			@include sprite(0px , -58px);
			margin: 0 15px 0 0;
		}
		.linked{
			@include sprite(-70px , -58px);
			margin: 0 15px 0 0;
		}
		.rss {
			@include sprite(-139px , -58px);
		}
		a {
			display: block;
			width: 63px;
			height: 65px;
		}
	}
}
 
/*
****************Recent Posts in right sidebar *********************/
#recent {
	margin: 20px 0;
	h3 {
         background: $orange;
		 @include font(16px, "bold");
		 text-transform: uppercase;
         @include linear-gradient(color-stops($orange, darken($orange, 25%)), left); 
         padding: 10px 20px;
         margin-top: 0;
         position: relative;
        @include box-shadow( darken($dkgray, 10%), 1px, 1px, 3px);
        color: $wht;
        text-shadow: 0 1px 0 $dkgray;
		@include font(24px, "bold", "Bebas, Arial,Helvetica,sans-serif");
	}
	.arrow {
         width: 0; height: 0;
         line-height: 0;
         border-left: 20px solid transparent;
         border-top: 10px solid darken($orange, 20%);
         top: 103%;
         left: 0;
         position: absolute;
	}
	ul {
		margin: 0 0 0 20px;
		list-style: none;
		overflow: hidden;
		padding: 10px;
		background: none darken($dkgray, 10%);
		@include font(14px, "normal");
		li {
			margin: 0 0 15px;
			.date {
				font-weight: bold;
				color: $orange;
			}
			a {
				color: $wht;
				&:hover {
					color: $orange;
				}
			}
		}
	}
 
}

Nav:

nav {
	position: absolute;
	top: 240px;
	left: 67px;
}
 
nav li {
	float: left;
	border-right: 1px $orange dotted;
	margin: 0 12px 0 0;
	padding: 0 12px 0 0;
	line-height: 18px;
	a {
	color: $orange;
	text-decoration: none;
	display: block;
	float: left;
	@include font(18px, "bold");
	.byline {
		@include font(12px, "normal");
		text-transform: uppercase;
	}
	&:hover {
	color: $wht;
	}
}
}
 
nav li:nth-child(6) {
	border: none;
}

Footer:

footer {
	width: $w;
	min-height: 222px;
	height: auto !important;
	height: 222px;
	overflow: hidden;
	background: url(../images/jcIndex_05.jpg) no-repeat left bottom;
	h3 {
		@extend .border;
	}
}
 
.ie6 footer  { overflow: visible;}
 
#footerLeft {
	width: $w - 760;
	float: left;
	margin: 50px 50px 0 70px;
}
 
#footerMiddle {
	@extend #footerLeft;
	margin: 50px 50px 0 0;
}
 
#footerRight {
	@extend #footerLeft;
	margin: 50px 0 0;
}
 
#copyright {
	width: $w;
	clear: both;
	float: $l;
	margin: 30px 0 0;
	text-align: center;
	@include font(12px, "normal");
}

Let me know if you have any questions!

Coupon Code: webmachine

First, if Chris E., creator of Compass, wanders over and reads this, I apologize if I was harassing you with my questions. I’ll post them in the document support section from now on.

Compass does not feel like it is written for non-programmers (which is probably fine for most users and the creator). Why, you ask would that be ok? Because I don’t feel that was their intention. I’ve read that they want to make Sass/SCSS more accessible to people new to it, but if that is true, they is a lot of work. To use them, you need the command line. How many of you are familiar with that? If you are young and don’t remember DOS, it is intimidating. We are used to interfaces, right? I mean, look at the editors we use. The command line has NOTHING to look at. Literally. So besides trying to learn a cool…not sure what to actually call Compass or Sass…technology? You have to dive into using the command line. Forget Dreamweaver for editing your .scss file, won’t work (at least not the version I have CS4)…which doesn’t matter all that much to me since I am using NetBeans and Notepad++. My point is, actually USING these things is great. Getting there sucks.

The install process is a bitch. At least if you go the Ruby way, and I am not sure there is another way, considering it is a gem, but then you have to wrap your brains around that one, too. I know that this sounds discouraging, but I am here to tell you that ALL that crap…is worth it. Just be prepared for some serious learning and a lot of searching.

Its the little things that make me happy

Once you have everything set up and running Compass comes with some seriously awesome stuff. You know how annoying it is to type out all the vendor prefixes to the CSS3 properties we have come to love? Compass has mixins built in for that. You use the @import line at the top of your .scss file like so:

@import "compass/css3";

This includes most of the mixins you will need. If you haven’t kept up with me, a mixin is basically a chunk of written out css that you plug values into so you don’t have to keep repeating your styles. For instance, if you write this:

.myClass {
@include border-radius(10px);
}

The compiled CSS looks like this:

.myClass {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
}

Personally, I don’t write all of those out myself, but Compass makes sure your bases are covered. It also (one I learned that you need version 0.10.6.pre.1 for it to work) makes the @font-face easy to use. Here is what you would write (after the imports at the top of your file):

@include font-face("Miso", font-files("../fonts/miso-bold-webfont.ttf", truetype, "fonts/miso-bold-webfont.otf", opentype));
 
.myClass {
font-family: "Miso";
}

Of course that looks easy, but it took a while for me to get everything working. I couldn’t find it written anywhere that @font-face needs the 0.10.6.pre.1 version to work properly. I couldn’t find it in the document support either, which maybe because I am one of the few non-real coders looking for answers. Now that I have it all in place, this crap is awesome.

I am using Sass, why do I want to use Compass?

Compass does a bunch of things that were not so obvious until I thought about why I was bothering with it. Then it all became clear. Compass isn’t just a compiler. Here is some of what it can do for you:

• Set up a project with all the correct folders and starting files you need
• Can use Blueprint if you are into using a CSS grid system (which I have found that I am not!)
• Yes, it will compile your Sass/SCSS into CSS – in different formats: nested, expanded, compact or compressed (meaning you like all 1 line, block or whatever…it will do it)
• Modules for Mixins that will help with all the CSS3 crap you can imagine
• A dedicated creator who will not call you an asshole and to stop bothering him

Do I have anything really bad to say about it?

No. Well…no. Bear with me while I explain. Web Designers and Front End Developers will struggle with it. If you are a designer with limited knowledge of how to build a site, or just the basics, you will either take a look at Sass and run away screaming mad like you failed at the Southern Oracle, or you will say why bother because CSS is so damn awesome. If you are a front end guy/woman, you might be intimidated by all that is involved just to get things going, much less using it, and talk yourself out of it because…well CSS is so damn awesome.

Sass and Compass are NOT fun to install, like I have said. It requires using the command line. You can get around it, trust me. Once you do a few things with it you will find yourself feeling like a bad ass, even though you aren’t doing anything all that impressive. The real issue is once you have Compass installed. Which of course is where I ran into some serious “WtF!”

The documentation seems to have everything you need, only…it doesn’t. And honestly, I don’t think that is the fault of the creator, because as I said above, I don’t believe this project was made for you…or me. It was written for them. By them I mean Ruby coders. They already know what the hell they are doing, and the documentation/support is probably quite awesome. But what if you are a complete newb to something like this, and you need to know how to upgrade to the next version, when you ALREADY did a gem update to make sure you have everything? It didn’t give you the latest version (guessing because it is not the latest stable release?). Now what? What do you type? Or you figured out that there is crap on github or whatever it’s called, that you can download, but you don’t know where to put it once you extract it. Where exactly do you put the @import lines for partials (think of partials as additional css files that you import into your main one)? I had to put two of mine after the mixins I created myself, otherwise the additional css in them wouldn’t include the partials. That isn’t written anywhere I could find.

I think you get what I am trying to point out. There is a higher learning curve than what I think the creator and Ruby people would say there is. I don’t feel the documentation is written for the person new to Sass and Compass, and the kinds of questions we would ask are not the kind you are going to find answered in the support docs. I believe if there was some discussion with new users and their troubles using it, the support would be improved a hundred fold. It really freakin’ needs a “for idiots” section.

With all of that said, I am telling you to take off your lazy mental cap, stop thinking CSS is the end all be all, and use Compass. Of course if you are using Compass, you are using Sass. But you should. It won’t take web development by storm and have everyone using it simply because it is a different way of thinking about your CSS. What I am saying though, is YOU should. Most of us developers are simply happy to do what we are doing. Stop that crap!

I wrote an article last month for OXP about getting ahead and NOT just keeping up with everyone else. If you agree with that, you need to take your CSS development to the next step. Sass and Compass will take you there. Sass takes a lot of repetitive writing out of CSS, and puts the real kick ass back into it. Compass makes Sass better by extension. If you are thinking of using Sass, you need to be using Compass. Both are 150% worth the frustration and hair pulling and a loudly screamed “F*#%!” at your monitor. Both will make you better at what you do.

Coupon Code: webmachine

First, a huge thank you to Hampton Catlin and Nathan Weizenbaum for giving us Sass.

As far as I know, there isn’t a Sass (SCSS) Cheat Sheet out there, and there should be. I am fairly certain that most people new to Sass and just getting into it have done plenty of searching for what they are trying to do, but find the actual help available lacking. There are very knowledgeable people out there that are willing to help,like Chris Eppstein and Derek Perez, but outside of those two, there are very few places to turn too. The documentation is ok, but I hate weeding through that thing. I want a cheat sheet that shows me how to do specific things. The problem I keep thinking about though is that you don’t just need the syntax, or a list of methods like jQuery, but actual small examples of how to write something. And just to make things interesting, let’s include Compass!

The real problem – I need help

I can’t do it alone, because I am a newbie. I can start it and add to it as I go, but someone more knowledgeable will have to provide the trickier stuff or just things that I may have missed. So, I am asking you to help me and leave a comment on what should be added. I’ll post it in code form below, and provide a pdf file that you can download below. The Compass part I will include in the pdf version.

Download File

/* Variable: */
$red: #ff0000;
 
.myClass {
color: $red;
}
 
/* !default: If a variable isn't given a value, it uses the one set for default */
$color: #000000;
$color: #ff0000 !default;
 
.myClass {
color: $color;
}
 
/* compiles to black - if color isn't defined, then it gets red */
.myClass {
color: #000000;
}
 
/* Mixin: Re-use whole chunks of CSS, properties or selectors */
@mixin myfont ($size, $weight, $family){
  font: {
    size: $size;
    weight: $weight;
    family: $family;
  }
}
 
.myClass {
@include font(18px, "bold", "Arial,Helvetica,sans-serif");
}
 
/* Nesting: Avoids repetition by nesting selectors within one another */
nav ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    display: inline;
    a {
       color: $red;
    }  
}
}
 
/* Nested Properties */
.myFont {
  font:{
    family: Arial;
    size: 14px;
    weight: bold;
  }
}
 
/* Selector Inheritance (Using @extend): Give a selector the styles of one,
PLUS any additional. This way you don't repeat classes. */
.myClass {
color: #ff0000;
margin: 10px;
}
.anotherClass {
@extend .myClass;
border: 1px #000 solid;
}
 
/* '&': Referencing Parent Selectors */
a {
  color: #ff0000;
  &:hover {
    color: #666666;
  } 
}
 
/* Operations: +, -, *, /, %*/
$width: 1000px;
.myClass {
  width: $width - 400px;
}
 
/* Interpolation: #{} */
$className: samcro;
$attr: background;
a.#{$className} { #{$attr}-color: #000000 }
 
/* compiles to */
a.samcro {
background-color: #000000;
}
 
/* Partials: Additional Sass/SCSS files you want to import but don't want
to compile into additional CSS files (meaning styles are imported into the
main .scss file) */
/* Just save the new file with an underscore in front of it: _nav.scss,
then in the main sass/scss file type - (NOTE - just found out you will get an error if you do not have it AFTER your declared variables and stuff) */
@import "nav";
 
/* @if, @elseif, @else */
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
 
/* @for - could really badass on lists if you needed them each to have
unique styles (@while works similar) */
@for $i from 1 through 3 {
  .myClass-#{$i} { width: 2px * $i; }
}
 
/* compiles to */
.myClass-1 {
  width: 2px; }
.myClass-2 {
  width: 4px; }
.myCass-3 {
  width: 6px; }

Sass Resources you should check out

That is the extent of what I know, a lot gathered from the Sass Reference page, some I knew, and some gathered from questions I’ve learned from asking around. Here is a list of places for you to go to, to learn more:

• Sass Reference
• Derek Perez’s blog – he posts some cool stuff on Sass
• Chris Eppstein’s blog – same as above
• Sass Watch twitter feed

If you know more, let me know!

Help me help them

I would like some help with syntax changes as well (I’ve seen ‘+’ and ‘=’ for mixins and calls, but unsure if that works with SCSS). Let me know what you think, and PLEASE let me know what I can add so newbies can get all the basics in one place and have an easier time getting started using Sass. If you don’t, my house will be turned into a golf course and the Fratellis will get me.

Coupon Code: webmachine

Note: I have included at the bottom of this article, the actual Sass/CSS I have written for my redesign. When I am completely finished with the build, I will post the whole thing for you to view. If you see anything I am doing wrong, poorly, or stupid, PLEASE inform me. I am learning too!
If you read my post yesterday, you will know that I will not be using the 960gs on my main site redesign. Not because it is bad, but because it isn’t going to fit with the project. What I WILL be using though, is Sass. I’ve done a couple of articles already on it, which you can read below if you wish:

• Test driving Sass 3…a second look at Sass
• Taking LESS.js for a spin, and how does it compare to Sass 3

My goal in using Sass for my redesign is to 1) get more familiar with it and learn the syntax better, and 2) well, to say that I did. Always good to learn, and if anyone happened to care, I can always stick it in the resume. One thing I have noticed is that there is no really good reference to using it. An e-book would be great, as it doesn’t need to be very long. Hell I would even settle for an article that posts the Sass styles for a complete site that uses all the CSS3 styles.

Take a look at what I have built so far:

View Demo

Speaking of CSS3 styles in SCSS

If you read my other articles, you will know that SCSS is the new syntax for Sass, and reads/writes pretty close to how you would write your normal CSS. Except for the fact that it has all the extra goodies. Anyway, I using Compass (which includes the blueprint framework – which I ditched) to compile the Sass into CSS, and while looking through its support and reference I read about CSS3 mixins. If you wanted to do a border-radius on something, you would write this in Sass:

.myClass {
@include border-radius(5px);
}

And the output into CSS would look like this:

.myClass {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

Even if you only write 3 or 4 of those lines of CSS normally, you did it in 1 line of Sass. This is where I think the brilliance and power of Sass comes into play. Now, you can’t just get that to work by itself, the solution to actually get it to do that is by including this at the top of your .scss file and you are good to go:

@import 'compass/css3';

Nested styles

There is so much I still don’t know about the syntax and what it can do, what I do know is enough for me to want to use the hell out of it. Nested styles is one of those. Personally, I hate having to write styles for stuff like unordered lists, because you have to write out several styles (ie – nav ul, nav li, nav a, nav a:hover). In Sass, you can do it with one. Here is an example of what I have done with my redesign:

nav li {
	float: left;
	border-right: 1px $orange dotted;
	margin: 0 12px 0 0;
	padding: 0 12px 0 0;
	line-height: 18px;
	a {
	color: $orange;
	text-decoration: none;
	display: block;
	float: left;
	@include font(18px);
	.byline {
		@include font(14px);
		font-weight: normal;
	}
	}
	a:hover {
	color: $wht;
}
}

Here is the output in CSS:

nav { position: absolute; top: 225px; left: 35px; }
nav li { float: left; border-right: 1px #f15c22 dotted; margin: 0 12px 0 0; padding: 0 12px 0 0; line-height: 18px; }
nav li a { color: #f15c22; text-decoration: none; display: block; float: left; font-family: Arial,Helvetica,sans-serif; font-size: 18px; font-weight: bold; }
nav li a .byline { font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-weight: bold; font-weight: normal; }
nav li a:hover { color: white; }

If you don’t know Sass at all, the above is going to be somewhat confusing, but I actually had to write less for the Sass styles AND some of what I did write (because it includes a mixin) is reusable for other styles. Nesting lets you put element styles within the parent elements. To quote the Sass site, “avoids repetition by nesting selectors within one another.

Mixins are awesome

So far, I am only using one mixin, and that is for declaring the font style. Here is what that looks like:

@mixin font ($size){
  font: {
    family: Arial,Helvetica,sans-serif;
    size: $size;
    weight: bold;
  }
}

If any of you reading this knows Sass, I have a question for YOU. While this is working for me at the moment, I would like to pass the family into the mixin as a variable, so when I call it later I can do something like this, but where I can change the family in the call:

@include font(18px Arial,Helvetica,sans-serif;);

When I tried doing it, it was not putting a comma between each, and therefore not recognizing it at all. If you know how to do this, PLEASE LEAVE A COMMENT!

Final Thoughts

I am really falling in love with Sass, which sounds weird to me because at the moment it is actually slowing me down. I can see though that once I master it, my development time will greatly improve. A few things on my wish list if anyone out there knows the answers to these questions:

• How do I toggle the line comments on and off in the compiled CSS?
• Can you change the format of the compiled CSS? Meaning from single line to block?
• I’m using Compass for the compiling, but developing in PHP. The config file doesn’t seem to be doing a damn thing. Why? Its in my root directory, but even if I change the lines about the locations, nothing breaks like I thought it would.

Here is the Sass file I have so far, in case you are interested (please leave pointers if you have any!)

@import "compass/css3.scss";
 
/*Variables*/
$dkgray: #2d2d2d;
$orange: #f15c22;
$wht: #ffffff;
$w: 1020px;
$r: right;
$l: left;
 
@mixin font ($size){
  font: {
    family: Arial,Helvetica,sans-serif;
    size: $size;
    weight: bold;
  }
}
 
 
body {
	background: url(../images/background.jpg) repeat-x left top $dkgray;
	color: $wht;
}
 
a {
	color: $orange;
	zoom: 1;
	outline: none;
}
 
a:hover {
	color: $wht;
}
 
h1 {
font: bold 24px Arial,Helvetica,sans-serif;
text-shadow: 2px 2px  5px $orange;
}
 
#container {
	width: $w;
	margin: 0 auto;
	overflow: hidden;
}
 
header {
	width: $w;
	height:  337px;
	position: relative;
	background: url(../images/jcIndex_01.png) no-repeat left top;
}
 
#contentRepeat {
	width: $w;
	background: url(../images/jcIndex_03.jpg) repeat-y left top;
}
 
#contentTop {
	width: $w;
	background: url(../images/jcIndex_02.jpg) no-repeat left top;
	min-height: 500px;
	height: auto !important;
	height: 500px;
	overflow: hidden;
	padding: 80px 0 0;
}
 
.ie6 #contentTop {overflow: visible;}
 
#contentLeft {
	width: 580px;
	float: $l;
	margin: 0 0 0 60px;
	padding: 10px;
}
 
#contentRight {
	width: 260px;
	float: $r;
	margin: 0 60px 0 0;
}
 
footer {
	width: $w;
	background: url(../images/jcIndex_03.jpg) repeat-y left top;
}
 
#footerContent {
	width: $w;
	min-height: 222px;
	height: auto !important;
	height: 222px;
	overflow: hidden;
	background: url(../images/jcIndex_05.jpg) no-repeat left bottom;
}
 
.ie6 #footerContent  { overflow: visible;}
 
/*************** Navigation Styles *****************/
 
nav {
	position: absolute;
	top: 225px;
	left: 35px;
}
 
nav li {
	float: left;
	border-right: 1px $orange dotted;
	margin: 0 12px 0 0;
	padding: 0 12px 0 0;
	line-height: 18px;
	a {
	color: $orange;
	text-decoration: none;
	display: block;
	float: left;
	@include font(18px);
	.byline {
		@include font(14px);
		font-weight: normal;
	}
	}
	a:hover {
	color: $wht;
}
}

Coupon Code: webmachine

I wanted to create images that I could use for each post showing that it belonged to a certain type of category. You look at the image, and without reading the title, you would say “Oh, this post relates to WordPress.” Same with jQuery, Blogging in general, or whatever category I come up with. Something my readers would come to recognize over time. I also wanted to be able to do it without having to stick it in manually in the post like I do with the other images I stick in articles. If you are on the home page you will already see this. That is the one I came up with for articles relating to WordPress.

Now, I can’t take credit for what I am about to show you. I learned how to do this fromJustin Tadlock’s blog, but I wanted to spread the love. This was the best tutorial I found on the subject.

Just 10 Easy Steps!

Here is my quick and dirty paraphrasing of it. Meaning, do EXACTLY AS IT SAYS BELOW.

1) Create awesome post.
2) Scroll down in post editor, under Custom Fields, create a Key named “Thumbnail.”
3) The Value should be the url to the image: (Example: wp-content/themes/yourThemeName/images/imageName.jpg)

NOTE: It took me a while to understand where it was pulling the images from – images folder in your theme. I was trying to get it to load from somewhere outside the theme. I’m sure you can, but this was easier.

4) Click Add Custom Field. Ya! Part 1 is done.
5) Add another, by clicking Enter New. This time make the Key be Thumbnail Class
6) Make the Value thumbnail-class
7) Open the template you want the image to show on (index.php, single.php, category.php, archive.php, etc.)
8- Find this code:

if(have_posts()) : while(have_posts()) : the_post();

Post the following code directly AFTER it:

$thumb = get_post_meta($post->ID, 'Thumbnail', $single = true);
$thumb_class = get_post_meta($post->ID, 'Thumbnail Class', $single = true);
$thumb_alt = get_post_meta($post->ID, 'Thumbnail Alt', $single = true);

9) Find this code:

<?php the_content();  ?>
//OR THIS CODE, EITHER ONE
<?php the_excerpt();  ?>

And add this code BEFORE it:

<?php // if there's a thumbnail
if($thumb !== '') { ?>
	<img src="<?php echo $thumb; ?>"
	class="<?php if($thumb_class !== '') { echo $thumb_class; } else { echo "left"; } ?>"
	alt="<?php if($thumb_alt !== '') { echo $thumb_alt; } else { echo the_title(); } ?>"
	/>
<?php } // end if statement
// if there's not a thumbnail
else { echo ''; } ?>

NOTE ADDED 7/30/10: If you read this post previously, I wrote a note here originally that was pretty much me being stupid.

10) Open your CSS file and add this class:

.thumbnail-class {
	float: left;
	width: 100px;
	height: 100px;
	margin: 0 15px 0 0;
	}

Done. Of course, you still have to create the images though. Note the size of the image is actually controlled through the CSS. Meaning, even if the image you created is 300 by 300, whatever you put in the css is what it will display at. You can also call the class, and Key names whatever you wish, just be sure to change them in the php code as well.

For a more detailed explanation, you will want to read the article I linked to above. I searched for quite a while before I found his tutorial and it rocks. I just had to read more to accomplish it. He also gives hints on what else you can do with it. Very good read though.

Compass’ inline image function

I am not recommending you do this, I am just showing you how. Let’s say you have a bunch of sprites, they are all small, and you don’t want the extra http requests on your website. Pretty understandable, which is why I use minify on my main site for the css and javascript files. Compass has a built in function that lets you actually embed an image into the CSS file. “Holy HELL! That’s insane!” That is what your head is screaming at the screen, right? That is what I said too when I saw it. I wish I could remember where, but I forgot to paste the url in my Evernote…just the code.

In your .sass file (yes Sass…I highly recommend it),you make a style like so:

.mySprite
  background-image: inline-image("images/mySprite.png") /* ! */
  height: 35px
  width: 35px

Compass then embeds the image into the CSS file. You can obviously think ahead on why this could be bad if you do this a lot. You are adding weight to the actual CSS file. Which of course this is why you would only do it with some small file size sprites. I can see this being good for small sites, but probably not anything of substantial size. Just use your head before you actually use this.

NOTE ABOUT THIS TRICK: IE6 and 7 do NOT support this. You will have to include the style the normal way for those browsers, if you are supporting them.

Last thoughts

Hope you learned something! I know I did today, which is what I strive for every day. If you are using Custom Fields for WordPress, I would love to know about how you are using them, and the code for doing it! Share the love people!

Coupon Code: webmachine

$('.myClass').after('<p>Even more content to read!</p>');