Feature #1: Változók
Egy projektben több CSS-osztály is tartalmazhatja ugyanazt a szabályt vagy szabályokat. Például van 20 dobozunk a weboldalunkon különböző háttérszínnel:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Később az ügyfelünk meggondolja magát, és nagyobb dobozokat szeretne. Így egyesével meg kell növelnem minden osztály width és height tulajdonságát. Ez akár 50 osztály is lehet. A valós életben a programozásban ez frusztráló lehet. Ahogy fentebb említettem, ez egy példa a nagy erőfeszítésre a kis változtatásokért.
Hogyan tehetnénk ezt hatékonyabban?
A Sass megoldást kínál: a változókat. Más programozási nyelvekhez hasonlóan változókat használhatunk értékek tárolására és későbbi újrafelhasználására.
Változó definiálása:
$variable-name: value;
A fenti példához visszatérve, ha változókat definiálunk width & height :
$box-width: 100px;
$box-height: 100px;
később, amikor változásra van szükség, csak egyszer kell megváltoztatnunk az értékeiket:
$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;
}
CSS maga is támogatja a változókat most már, de ez nem működik IE & más böngészők régi verzióiban:
Feature #2: Nesting
A standard CSS nem támogatja a beágyazást. Nem írhatunk egy osztályt egy másik osztályon belül. Ahogy a projekt egyre nagyobb lesz, ez olvashatósági problémával jár, és a struktúra nem néz ki szépen.
Definiáljunk például egy navigációs menüt kattintható linkekkel az alábbi HTML-ben:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
A HTML támogatja a beágyazott kódot. Beágyazás nélkül azonban CSS-ben így néz ki:
Minden taghez nav-t kellett írnunk, még a horgony (hover) pszeudo-osztályához is, mert a nav mindnek a szülő tagje. A Sass viszont támogatja a beágyazást:
Itt jobban strukturált kódot írhatunk, mint a HTML-ben. Nem kell nav osztályt osztály után írnunk, ami szintén megakadályozza a redundanciát
Fontos: Nem ajánlott 3 szintnél mélyebbre fészkelni az osztályokat.
Feature #3: Mixins
Fentebb megtanultuk, hogyan használhatunk változókat CSS szabályokhoz. De mi van akkor, ha szabályok egy csoportját kell együtt használnunk? A Sass rendelkezik egy mixinek nevű funkcióval, amely lehetővé teszi ezt számunkra.
Mi az a Mixin?
A mixinek olyan Sass funkciók, amelyek CSS deklarációkat csoportosítanak. Később a változókhoz hasonlóan újra felhasználhatjuk őket.
Elkészíthetünk egy mixint a @ mixin paranccsal, amelyet egy név követ:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
vagy létrehozhatunk egy mixint függvényként és paramétereket is adhatunk hozzá:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
A mixin létrehozása után a @ include paranccsal bármelyik osztályban használhatjuk. Így használhatjuk a my-font mixint ahelyett, hogy minden alkalommal 4 sornyi betűtípus-szabályt kellene írnunk. Ez a megközelítés leegyszerűsíti a kódot.
p {
@include my-font;
}
A mixinek használata jó módszer a kód redundanciájának megelőzésére.
Feature #4: Imports
Végül a Sass import funkciójával kisebb darabokra vághatjuk hatalmas CSS fájljainkat. Sokkal könnyebb olvasni & kisebb fájlokat karbantartani, mint egy nagy fájlt végtelen sorokkal.
Ténylegesen a CSS-nek is van már import funkciója. De ez másképp működik. A CSS minden egyes alkalommal HTTP-kérést küld a szervernek egy fájl importálásához. A Sass ezt HTTP-kérés nélkül teszi, ami gyorsabb megközelítés.
Mindössze annyit kell tenned, hogy a Sass fájlodat a @ import paranccsal importálod egy másik Sass fájlba:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
Nem kell .scss kiterjesztést használnunk a fájl elérési útvonalában, a Sass ezt megérti.
Nem kell .scss kiterjesztést használnod a fájl elérési útvonalában, a Sass megérti.