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.
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.
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.
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.
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 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.
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.