SCSS se podobně jako Less používá ke psaní CSS stylů pro webové stránky. SCSS je plně kompatibilní s CSS a umožňuje používat pár triků pro rychlejší generování stylů. Hodí se psát styly v .scss a např. pomocí Gulp skriptu generovat výsledný .css soubor, který stejně potřebujeme minifikovat na produkční server, tak proč to neudělat 2 v 1. Navíc nás preprocesor upozorní na překlepy a chyby.
Pseudotřídy pomocí ampersandu
Nechcete znovu a znovu psát název hlavní třídy pro každou funkci. Např. chceme mít třídu .button pro tlačítko, které může mít rozdílné styly pro :visited :hover :active. Aby se nemuselo 3x psát .button …, lze použít SCSS ampersand a napsat vše v jednom bloku.
.button {
&:visited { }
&:hover { }
&:active { }
}
SCSS
.button:visited { }
.button:hover { }
.button:active { }
CSS vygenerovaný z SCSS