After succesfully having used SCSS on a couple of projects i thought it was time to get into the more advanced features it provides. Therefore i compiled this “Cheat Sheet” type overview of what i find the most usefull collection of SCSS features.
At the bottom of the page you can download a PDF version of this page to print out and have at hand when you need it.
Avoids repetition by nesting selectors within one another.
Referencing Parent Selectors */
Re-use whole chunks of CSS, properties or selectors.
Selector Inheritance (Using @extend)
Give a selector the styles of one, PLUS any additional. This way you don’t repeat classes.
/* !default: If a variable isn’t given a value, it uses the one set for default.
Compiles to black – if color isn’t defined, then it gets red.
Operations: + – * / %
Additional Sass/SCSS files you want to import but don’t want to compile into additional CSS files (meaning styles are imported into the main .scss file)
Just save the new file with an underscore in front of it: _nav.scss, then in the main sass/scss file type – (NOTE – You will get an error if you do not have it AFTER your declared variables and stuff).
@if, @elseif, @else
This could be really badass on lists if you needed them each to have unique styles (@while works similar)