7 Sass features you should be familiar with
Most Rails developers are aware of advantages such as nesting, reference selector, variables, mixins or extending directives. But Sass is much more than that!
In this blog post, I’ll introduce Sass features that I use in my day-to-day work that might be useful.
1. Reference symbol ( & )
You might be familiar with the reference symbol, which allows you to reference a parent element as such:
Note that you can also put the symbol after a selector which can be useful to combat some IE related issues:
2. Partials and @import directive
There exists a convention in the rails world where one adds a controller name and controller action to a body tag or site #main tag. This is good of course, but sometimes developers tend to reflect the html structure inside css in the wrong way, which can cause clutter and problems with overqualified selectors:
I’ve found that it’s best to avoid nesting selectors to make the code more modular. Personally, I believe that we should nest no deeper than the third level. I also like to divide my code into smaller particles and group them up like so:
Sass code will evaluate into this simple css:
Also, this method helps to abstract and keep other code bits separated (for mixins, settings (defined variables), etc.)
3. Interpolation
We can define an element in a variable and interpolate it inside our sass code. This is useful when you keep your modules in separated files:
Note that this is only good if we want to nest elements inside each other. Personally, I like BEM syntax and prefer to ‘nest’ selectors using indentation to reflect the html structure.
You can read more about BEM on Harry Roberts blog here.
4. @content directive
Since SASS 3.2.0 we can pass a code block into a mixin:
This can be very helpful in situations where content depends on what you are fighting with:
And of course when struggling with devices and resolutions - more on that subject can be found here.
5. %placeholders
**Placeholders available since SASS 3.2.0 are useful when you want to write styles that were meant to be extended but you don’t want the base styles to be seen in output css styles (in opposite to extending classes).
Great example of placeholder usage as Ian Storm Taylor mentioned is the ‘golden child’ of OOCSS - media object. You can read his article about OOCSS and using placeholders here.
6. Functions
Sass has a build in set of functions some of them are related to color, some of them are related to strings and some of them are related to numbers.
There is also an ‘if’ function:
See the Pen mBAps by Dawid Woźniak ( @dawidw) on CodePen
If we switch to master branch we can notice that we have some new functions added for the next sass 3.3 release, i.e. to_lowe_case, to_upper_case, str_slice, str_length etc. We also have functions to operate on lists like join, zip, index or nth.
You can also define your own functions like so:
7. Lists and @each directive
Lists are an old feature of Sass, alone they can’t do much on their own.
However when combined with list functions (join, lenght, nth, append) and @each directive things get more interesting, perfect example for list usage are sprite icons.
More advanced example is presented by Dale Sande and can be found in his great blog post.
If you’re curious what’s next to come I highly recommend David Walsh post on future of sass.
Join the discussion at reddit r/webdev
