Vlastnost č. 1: Proměnné
Různé třídy CSS mohou v projektu obsahovat stejné pravidlo nebo pravidla. Například máme na webové stránce 20 rámečků s různými barvami pozadí:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Později si to náš klient rozmyslí a chce větší rámečky. Potřebuji tedy postupně zvětšit vlastnosti width a height každé třídy. Mohlo by to být i 50 tříd. V reálném programování to může být frustrující. Jak jsem zmínil výše, je to příklad velkého úsilí pro malé změny.
Jak to můžeme udělat efektivněji?
Sass nabízí řešení: proměnné. Stejně jako v jiných programovacích jazycích můžeme proměnné používat k ukládání hodnot a později je znovu použít.
Definice proměnné:
$variable-name: value;
Pokud se vrátíme k výše uvedenému příkladu, pokud definujeme proměnné pro width & height :
$box-width: 100px;
$box-height: 100px;
pozdější potřebu změny, stačí pouze jednou změnit jejich hodnoty:
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
Samotné CSS nyní proměnné také podporuje, ale v IE & starých verzích ostatních prohlížečů to nefunguje:
Feature #2: Nesting
Standardní CSS nepodporuje vnořování. Nemůžeme zapsat třídu uvnitř jiné třídy. S rostoucím projektem to přináší problém s čitelností a struktura nevypadá hezky.
Například níže definujme navigační menu s klikacími odkazy v HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
HTML podporuje vnořený kód. Bez vnoření však v CSS vypadají takto:
Museli jsme napsat nav pro každý tag, dokonce i pro pseudotřídu kotvy (hover), protože nav je rodičovský tag všech. Sass však podporuje vnořování:
Tady můžeme psát lépe strukturovaný kód jako v HTML. Nemusíme psát navtřídu za třídou, což také zabraňuje redundanci
Důležité: Nedoporučuje se vnořovat třídy hlouběji než do 3 úrovní.
Feature #3: Mixins
Výše jsme se naučili používat proměnné pro pravidla CSS. Ale co když potřebujeme použít skupinu pravidel dohromady? Sass má funkci zvanou mixiny, která nám to umožňuje.
Co je mixin?
Mixiny jsou funkce Sass, které seskupují deklarace CSS dohromady. Můžeme je později znovu použít jako proměnné.
Mixin můžeme vytvořit příkazem @ mixin, za kterým následuje název:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
nebo můžeme mixin vytvořit jako funkci a přidat i parametry:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
Po vytvoření mixinu jej můžeme použít v libovolné třídě příkazem @ include. Místo 4 řádků pravidel pro fonty tak můžeme pokaždé použít mixin my-font. Tento přístup zjednodušuje kód.
p {
@include my-font;
}
Používání mixinů je dobrý způsob, jak zabránit redundanci kódu.
Funkce č. 4: Importy
Nakonec můžeme naše obrovské soubory CSS rozřezat na menší části pomocí funkce importů Sass. Je mnohem snazší číst & udržovat menší soubory než jeden velký soubor s nekonečnými řádky.
Vlastně i CSS má nyní funkci importu. Funguje však jinak. CSS při každém importu souboru odešle na server požadavek HTTP. Sass to dělá bez požadavku HTTP, což je rychlejší přístup.
Jediné, co potřebujete, je importovat soubor Sass pomocí příkazu @import do jiného souboru Sass:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
Nemusíme používat přípony .scss v cestě k souboru, Sass to pochopí.
.