Úvod do jazyka SASS

V tomto tutoriálu budeme studovat preprocesor SASS. SASS je alternativa k preprocesoru LESS, který také umožňuje programovat v CSS.

Ve skutečnosti má SASS dvě varianty syntaxe, první varianta se také nazývá SASS, a druhá - SCSS. Obě podporují stejnou sadu funkcí a pouze se mírně liší syntaxí. Nicméně, protože SCSS je novější a široce používanější, v tomto tutoriálu budeme studovat právě jej.

Takže, syntaxe SCSS je podobná syntaxi CSS, to znamená, že uvidíme stejné složené závorky a stejné uvozovky s čárkou jako v CSS. Podívejme se na příklad syntaxe SCSS, kde immediately přiřadíme proměnným písmo a barvu, poté přiřadíme tyto proměnné vlastnostem v selektoru body:

styles.scss$font: Helvetica, sans-serif;
$color: #333;

body {
  font: $font;
  color: $color;
}