Sass 3.3 - Some things you might not know about
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.