CSS Variables, Mixins and Nesting Might Be Coming

CSS Variables, Mixins and Nesting Might Be Coming

If you don’t know Sass…you might want to now

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

Tags: , ,

4 Responses to “CSS Variables, Mixins and Nesting Might Be Coming”

  1. Justin says:

    This would be really awesome – I’ve looked at SASS before but it seems like most of the good tools for dynamic css tend to be pretty “rails-centric”. I’m thinking about starting to use less for development using http://incident57.com/less/ and just creating production copies of the full blown css. Have you tried this sort of workflow before? I’m wondering if the tedium of having to “recompile” your css after every edit will be outweighed by the speed and other benefits of less – i’m just not comfortable having my stylesheets dependant on js!

    • Rimian says:

      Sass is just a ruby gem so you can use it for anything. I use it for php apps as well as rails apps. It does integrate with Rails but it doesn’t stop you from using it on anything.

      • jcDesigns says:

        Maybe he just doesn’t want to install Ruby and the gems? Don’t know. I’m starting to learn Ruby now, but as for Sass, I’m using it with Compass on my site, which is using php. I just need the command line open to do the ‘compass watch’ thing, that is it. I think the main problem is that people who don’t know Ruby at all, don’t know how to use Sass outside of it? Or something like that.

  2. jcDesigns says:

    Hey Justin, thanks for the comment. I’ve used Sass (along with Compass for the compile and other cool stuff) for my home page so far, so I don’t have to worry really about the time factor on that. What you could do is create the main layout, compile and upload, and then just use the CSS file for edits later. The recompile isn’t any issue because Compass has a watch feature that auto detects any change and recompiles on the fly. But I do have to re-upload after each edit if I am not working locally. The js thing is why I stayed away from LESS.js, but once you get the hang of either syntax, the time you save on the initial build will well be worth no matter which you use, Sass or LESS.

Leave a Reply to jcDesigns