Mik a CSS preprocesszorok és mire jók? – Webdesign Tanfolyam

Mik a CSS preprocesszorok és mire jók?

2018. május 23. - 07:50 • írta: Pócsik Emese

A CSS preprocesszorok (előfeldolgozók) segítenek gyorsabb, hatékonyabb, könnyebben karbantartható, jövőre támaszkodó kódot írni, és jelentősen csökkenteni a kézzel megírandó CSS mennyiségét. Ezt a megoldást nem csak nagy méretű felhasználói felületeken, hírportálokon érdemes használni, közepes méretűt céges honlapoknál is nagyon hasznos.

Mit szólnál ahhoz, ha azt mondanám 5-8 paraméter beállításával teljesen különböző kinézetű weboldalakat lehet létrehozni ugyanabból a kódbázisból? Egy megfelelően osztályozott, szemantikus felépítésű oldal globális stílusait nagyon egyszerűen módosíthatod, ha preprocesszorral dolgozol. Pillanatok alatt tudsz változtatni például a színeken, betűtípusokon, akár ez elrendezéseken is.

Mire jók a prepocesszorok?

A CSS leíró nyelv elég primitív és korlátozott, nem tudunk, függvényeket, feltételeket, változókat megadni. Elég körülményes megoldani az öröklést, valamint a helyes összevonásokat is. Nagyobb projekteknél, vagy komplexebb rendszereknél a nagy CSS fájlok karbantartása elég nagy probléma, főleg, ha más kódjában kell turkálnod. Ennek a hatékonnyá tételére találták ki a preprocesszorokat, amelyek segítségével nagymértékben megkönnyítheted a front-end munkát.

LESS, SASS, vagy Stylus?

Igazából mindegy, ha jól használod. A 3 nyelvvben vannak apróbb különbségek, de szerencsére a szintaktika mindhárom előfeldolgozó esetében majdnem megegyezik a hagyományos CSS-el. A SASS és a LESS a standard CSS szintaktikát használják, ez egyszerűvé teszi a meglévő CSS fájlok átalakítását. A SASS .scss kiterjesztést használ, a  LESS .less-t, a Sylus pedig .styl-t.

A fenti fájltípusok mindegyike hagyományos CSS-be fordul át, tehát a böngészőben már CSS-t fájlt fogsz látni, amit a preprocesszor fordítója készít el. Mindegyik típushoz létezik CMS bővítmény, aminek a segítségével tudsz készíteni preprocesszor alapon WordPress, Joomla, vagy Drupal sablonokat. Akármelyik nyelvet választod minden esetben telepítened kell egy fordító bővítményt, hogy a rendszer átfordítsa  az előfeldolgozó fájlokat.

Különösen fontos, hogy a kódban ne legyen szintaktikai hibád, különben a fordított változat nem fut le. A SASS-ben kihagyhatjuk a kapcsos-zárójeleket és a pontosvesszőt, a Stylusban még a kettőspontot is el lehet hagyni. Ezek mind a SASS-ben, mind a Stylus-ban opcionálisak. Én azért szeretem látni, hogy még mindig CSS-ben vagyok, tehát a kapcsos-zárójelet mindig meghagyom, de rád van bízva, hogy mire szoksz rá.

A következő példákban LESS-el mutatom be az előfeldolgozók legnagyobb előnyeit. WordPress-hez a „WP-LESS” bővítményt használom fordításra. A sablon mappájában készítek egy less mappát, ahova a stíluslapokat rakom .less végződéssel. A gyökérben lévő style.css fájlban csak a sablon leírását hagyom, minden más paramétert .less-be írok. CSS mappára is szükséged lesz, ide fordítja a bővítmény a kimeneti .css fájlt.

1. Változók használata

Már a tervezési fázisban meghatározza a designer az alapszíneket, betűtípusokat, alapstílusokat, miért ne lehetne ezeket a fejlesztői oldalon, kód szinten is egyszerűen megadni? Hagyományos CSS használatakor mindig egyesével külön-külön be kell írni, hogy mi milyen színű, mekkora legyen margója, milyen betűtípussal írjuk, stb. Ha később változtatni szeretnénk, akkor több stíluslapban is keresgélni kell, macerás az egész. Preprocesszorral lehetőséged van változókat használni, nem kell minden egyes alkalommal beírnod a kívánt tulajdonságot. Legnagyobb előnye, hogy pillanatok alatt megtudod változtatni az oldal kinézetét.

@base-color: #ff000;
@main-font: 'Open Sans';
@border: solid 1px #ddd;

2. Egymásba beágyazás

A CSS-nek nincs vizuális hierarchiája a gyermek szelektorokal való munkavégzés során. A szelektorokat és azok kombinációit külön sorokban kell megadni. A preprocessor használat viszont egymásba ágyazott vizuális hierarchiát biztosít a HTML-hez hasonlóan.

ul {
    margin: 0;
    li {
        float: left;
    }
    a {
    color: $base-color;
        &:hover {
        color: $link-hover;
        }
    }
}

3. Mixinek

A mixin egyfajta többszörös öröklés, vagy statikus szabályok szerint összeállított definíció. Velük könnyedén megadhatunk több tulajdonságot is egyszerre, illetve jól jön böngésző specifikus tulajdonságoknál is.

.shadow {
    box-shadow: 1px 2px 3px rgba(0,0,0,0.5);
    border: solid 2px #ddd;
    background: rgba(0,0,0,0.5);
}
.content {
    .shadow();
}

4. Színkeverési műveletek

Mind a három előfeldolgozónak vannak színkeverési funkciója, így lehet a színekkel játszani. Módosíthatod az alapszín telítettségét, vagy keverhetsz több különböző színt. Ez a funkció nem túl lényeges, de néha hasznos például, ha menőbb :hover effektet szeretnél készíteni képeknek.

saturate(@color, @amount)
desaturate(@color, @amount)
lighten(@color, @amount)
darken(@color, @amount)
fadein(@color, @amount)
fadeout(@color, @amount)
fade(@color, @amount)
spin(@color, @amount)
mix(@color1, @color2, @weight)
grayscale(@color)
contrast(@color)

5. Feltételes elágazások

Kisebb oldalaknál nincs jelentősége, nagyobb portáloknál azonban hasznos, ha egy tulajdonságot feltételesen tudsz megadni, mondjuk a szülő elem szélességéhez, vagy akár az alapszín telítettségéhez viszonyítva.

.mixin (@color) when (lightness(@color) > 30%) {
    background-color: black;
}
.mixin (@color) when (lightness(@color) =< 30%) {
    background-color: white;
}

6. Ciklus

A ciklus olyan programozási eljárás, amely megismétel (iterál) egy függvényt. Általában az adatok listájának feldolgozására használják.

.loop( @parameters ) when ( @condition ) {
.loop( @parameters + 1 );
}

7. Matematikai műveltek

Az egyszerű matematika alapműveletek mellett a preprocesszorok komplexebb matematikai támogatással is rendelkeznek, ilyen például a kerekítés, vagy a maximum/minimum kiválasztás. A margók kiszámításakor lehet nagyon hasznos, ha töréspont alatt nem kell minden elemnek külön-külön újra számolnod a margóját, csak egyszerűen szorzod kettővel.

.content {
    padding: ($spacing * 2);
}

8. Import

A stíluslapokat érdemes szétdarabolni a betöltött funkció szerint. Pl: gird.css, typo.css, layout.css ahelyett, hogy egy nagy fájlba ömlesztenénk a kódot, így könnyebben karbantartható, rendszerezhető. Ezen felül a hasonló kódrészeket mappákba is csoportosíthatjuk. Ezeket aztán a megfelelő sorrendben importálhatjuk egy fő .less fájlba, ami fordításkor összefűzi az összes stíluslapot, így egy nagy CSS-t fogunk kapni a böngészőben.

@import "/reset.css";
@import "/variables.less";
@import "/typo.less";
@import "/menu.less";
@import "/grid.less";

A gyakorlatban

WordPress sablon készítésnél az alábbi stíluslap fájlokat használom. A sorrend fontos!

reset.css – Kiütöm az összes formázást.
variables.less – Ebben határozom meg a stíluslapokban használt változókat, ezeket a többi fájl is használja.
grid.less – Ez a fájl felel a tartalmak tördeléséért.
typo.less – Ide írom az összes szöveges formázásra vonatkozó szabályt, címsorok, listák tulajdonságait.
menu.less – A fő navigáció könnyen átemelhető egy másik weboldalba is, ha ezt is külön írod meg.
main.less – Ebbe a fájlba töltöm be az összes korábbit, majd ebbe írom az egyéb másodlagos formázásokat.

Az alábbi változókat használom:

@brand-color: #f2d380; /* A weboldal fő színe */
@hover-color: #000; /* A weboldal másodlagos színe */
@light-color: #f5f5f5; /* Egy kiegészítő szín egyszerűbb kiemelésekre elválasztásokra */
@base-font: 'Oxygen'; /* Folyószöveg betűtípusa */
@title-font: 'Unna'; /* Címsorok betűtípusa */
@box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); /* Globális vetített árnyék */
@text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Globális betű árnyék */
@border: solid 1px rgba(255, 255, 255, 0.2); /* Globális keret stílus */
@border-radius: 5px; /* Globális keret lekerekítése */
/* Megadok egy mixint az animálásokhoz használt áttűnés effektre is  */
.ease() {
    -ms-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

A gridet szintén felosztom változókra, ezeket a grid.less tetejében határozom meg, így csak egyszer kell beírnom a margók mértékét. 3 törésponttal dolgozom általában, ennyinek elégnek kell lenni, ha a „Mobile First” elvet követem tervezéskor. Ehhez próbálok igazodni a designban is.

@grid-padding-size: 15px;
@desktop: 980px;
@tablet: 850px;
@mobile: 540px;

Ha ezeken felül még szükségem van töréspontokra, akkor azt simán beírom egyedileg. A töréspontok méretét a design szerint választom meg attól függően, hogy milyen típusú az oldal. Mindig megnézem az aktuálisan legnépszerűbb eszközök felbontását is, amiből kiderül, hogy hol érdemes törni az elrendezést.

@media only screen and (min-width: @desktop) {
    .center-box {
        width: @desktop;
    }
}

Záró gondolatok
Az előfeldolgozók számos módot kínálnak a CSS-problémák egyszerűsítésére, a kódolás hatékonnyá tételére. Használata nélkül ma már nem beszélhetünk hatékony front-end fejlesztésről, professzionális weboldalak építéséről. Ha már magabiztosan elboldogulsz a hagyományos CSS-ben, mindenképp érdemes áttérned valamelyik preprocesszor nyelvre és újra gondolnod a saját fejlesztői munkamenetedet.

Címkék:

Ezeket láttad már?

A szerző: Pócsik Emese
2007 óta dolgozom webdesignerként. Munkáim nagy részét főleg üzleti weboldalak készítése teszi ki kis- és közép vállalkozásoknak. A tanfolyamon összetettebb weblapok HTML+CSS kódolását oktatom, néhány házi praktikával és gyakorlati tanáccsal megfűszerezve.

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

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.