A preprocesszor (Sass) használatának előnyei a CSS-fejlesztésben

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:

https://caniuse.com/

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:

CSS osztályok a navigációs menühöz

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:

A Sass-szal ugyanezek az osztályok

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.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.