Triky pro snadnější psaní CSS stylů pomocí SCSS syntaxe

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

Add Comment

Required fields are marked *. Your email address will not be published.


+ 7 = jedenáct