Sass 3.3 - Some things you might not know about

March 13, 2014

Sass 3.3 is out! And it's quite nice. A lot of talk has been made over the new Maps function, which allows you to use keypair values of items. However, you've been able to do that for a while, albeit much less elegantly - I'll talk about that another time.

However, 3.3 is packed with much more useful features than Maps. Here's some other features you might have missed.

&_suffix

Hallelujah! You can now use & as a child and add a suffix to the class name. This means markup like .header .header_logo can now be more consistent - now you don't need .header .logo and run into potential tripfalls.

Let's check out a gist below of this in action.

Play with this gist on SassMeister.

[javascript src="http://static.sassmeister.com/js/embed.js" async]

It almost helps you mirror a BEM markup style, although this new function is through nesting and BEM should avoid that.

It's worth noting that only a suffix works, prefixing a class (like .text_&) will not work.

String functions

Now you can control a string more accurately. You can get the length, insert strings inside each other, slice, and make a string lowercase/uppercase.

See if something exists

You can now make sure a mixin exists before you call it and crash your compilation! Throw these in an @if and wave your life of compile-crashing errors goodbye. Much like everything in your Sass toolkit, there are plenty of ways to use these to make your life easier.

  • variable-exists($name) checks if a variable resolves in the current scope.
  • global-variable-exists($name) checks if a global variable of the given name exists.
  • function-exists($name) checks if a function exists.
  • mixin-exists($name) checks if a mixin exists.

Random!

Sooo randum! Use random() to generate a random number. By default it'll give you 1 or 0.

If you use a number inside random(), such as 5, the random number will be 1 to 4. The selection excludes the number you select.

at-root

At root lets you define a rule that will get placed at the top of your CSS document. Much like @import on an external file (like Google Webfonts), by using at-root you can be sure that a rule will find its way to the top.

The style of at-root means that you can keep your rule in a logical place inside your SCSS files, knowing that it'll get pumped out to the top of the file when you compile.

Stu Robson has written a nice post on how to use at-root, so check that out.

Unique CSS ID

I'm not sure when this will be useful, but unique-id() now lets you generate a unique ID for each individual CSS file.

Turn that @for upside down

@fors can now go from top to bottom. @for from 4 through 1 will go downwards through 4, 3, 2, 1.


The new improvements in Sass 3.3 aren't anything revolutionary, but they introduce a new set of tools that will let you do your job better. I'm sure I'll find a use for these tools very soon in the future. There's a whole bunch more in the changelog, so check it out and find something useful for yourself.