Előfeldolgozók. Videóbemutató a „Sass and Less Preprocessors. A front-end fejlesztés automatizálása és egyszerűsítése"

A CSS-előfeldolgozó egy CSS-bővítmény, amely hozzáadott szintaxis használatával új szolgáltatásokat és funkciókat biztosít a CSS számára.

Az előfeldolgozók célja: kényelmes szintaktikai konstrukciók biztosítása a webfejlesztő számára a projektekben a stílusok fejlesztésének és karbantartásának egyszerűsítésére és felgyorsítására.

A CSS-előfeldolgozók az előfeldolgozó nyelvvel írt kódot tisztává és érvényessé teszik.

Az előfeldolgozók segítségével az írott kód: ember által olvasható, strukturált és logikus, produktív lesz.

A legnépszerűbb előfeldolgozók közül a Less, Sass (Scss), Stylus. Ezen a területen kevésbé észrevehető eszközök a Closure Stylesheets, a CSS Crush, ezek kevésbé népszerűek Ebben a pillanatban, de néhány fejlesztő még mindig használja őket. Próbáljuk megérteni a Less, Sass (Scss), Stylus képességeit és funkcióit.

A szabványos CSS-használat meglehetősen bonyolult. A beágyazás nélküli szintaxis közvetlenül megnehezíti a vizuális észlelést. A normál változók és függvények hiánya a CSS-kódot szűkre szabottá teszi, és sok szükségtelen és szükségtelen részlettel.

Rendelkezésre álló dokumentáció – most bárki rövid időn belül, extra költségek nélkül sajátíthatja el a kiválasztott előfeldolgozót. A második előny az előfeldolgozók egyszerű használata. Ehhez csak telepítenie kell speciális program, amely figyeli az előfeldolgozónak szánt fájlokat, és ha azok megváltoznak, ezek tartalmát tiszta CSS-kódba fordítja.

A haladóbb felhasználók számára speciális projektépítők állnak rendelkezésre.

A Less a legnépszerűbb és leggyakrabban használt előfeldolgozó. A JavaScriptre alapozva fejlesztett, alapvető előfeldolgozó képességeket tartalmaz, de nem ad a szokásos értelemben vett feltételes konstrukciókat és ciklusokat. Egyszerűsége és tömörsége miatt szabványos CSS-szintaxissal rendelkezik, és bővítheti a funkcionalitást a bővítmények használatával.

A LESS dinamikus képességeket biztosít a CSS-hez: változók, mixek, műveletek és függvények. A dokumentáció nagyon fejlesztőbarát, és a szintaxis nagyon hasonló a tiszta CSS-hez. A népszerű keretrendszerek, mint például a Twitter Bootstrap, KEVESEBB dinamikus funkciókat használnak ki. A LESS azonban lehetővé teszi az osztályok mixinként való újrafelhasználását bárhol a stíluslapon.

Egy másik nagy teljesítményű és népszerű előfeldolgozó a Sass. Hatalmas fejlesztői közösség alakult ki az eszköz körül. 2007-ben alapították HAML modulként, és Ruby nyelven írták (C++ portot biztosít). A Less-hez képest sokféle funkcióval rendelkezik. Az előfeldolgozó a Compass könyvtárral bővíti funkcionalitását, amely lehetővé teszi a túllépést CSS keretrendszerés nagyobb léptékben dolgozni. Kétféle szintaxist biztosít: A Sass (Syntactically Awesome Style Sheets) egy egyszerűbb CSS-szintaxis, amely identitásalapú. Őt többnek tartják elavult verzió. Scss (Sassy CSS), amely szabványos CSS szintaxison alapul.

– egy meglehetősen fiatal, de már ígéretes CSS-előfeldolgozó. 2010-ben fejlesztették ki. Sokan kényelmes és bővíthető előfeldolgozónak tartják, és rugalmasabbnak, mint a Sass. JavaScriptben fejlesztve. Számos szintaktikai beállítást támogat a CSS-szerűtől az egyszerűbb és könnyebbig.

Hasznos eszközök a fejlesztők számára:

• CodeKit: Lefordítja a Sass, LESS és Stylus fájlokat, majd automatikusan újraindítja a webböngészőt a fájlok frissítése után. Ez magában foglalja a projektképek optimalizálását a rendszer teljesítményének javítása érdekében. A technológia fizetős, de van próbaverzió is, amellyel dolgozni lehet.
• LiveReload: ellenőrzi a fájlok változásait, majd feldolgozza azokat, és automatikusan újratölti a webböngészőt. A verzió Mac és Windows rendszeren működik.
• Scout: Ruby környezetben működik a Sass és Compass segítségével. Működik Mac és Windows rendszeren.
• EGYSZERŰ: Egy egyszerű és egyszerű LESS CSS fordító Mac és Windows rendszerhez.

A munkához megfelelő előfeldolgozó kiválasztásához próbáljon meg többféle előfeldolgozót használni. A teszteredmények alapján pedig sokkal könnyebb lesz a választás. És ne felejtse el, hogy az előfeldolgozó elsajátításakor nem új nyelvet tanul, hanem csak új szintaxist és képességeket. A Company™ kellemes munkát kíván a CSS világában!

2545 alkalommal 1 Megtekintve ma

És mikor nyugszanak meg végre ezek a fejlesztők és hagyják abba az újoncok zaklatását!? Mielőtt teljesen megértettem volna a CSS-t, azt mondták: "Minden igazi elrendezéstervező már régóta átvált az előfeldolgozókra. Nos, miféle tiszta CSS ez 2020 előestéjén!?" Mit kell tenni?

Először is, a fejlesztők soha nem hagyják abba az új technológiák kifejlesztését. A profi tördelőtervezők pedig nagyon hálásak ezért nekik. Táblázat nyelve CSS stílusok, akkor találták ki, amikor a weboldalak primitívek voltak. De ahogy teltek az évek, a webhelyek összetettebbé és masszívabbá váltak, de az elrendezési módszerek ugyanazok maradtak. Az elrendezéstervezők belefáradtak a hasonló kódrészletek írásába. Lehetetlen volt gyorsan megváltoztatni a színt az oldalon. Szükség volt az elrendezés nagyobb automatizálására, így megjelentek a CSS kód előfeldolgozói. Ma pedig ezek egyikéről, a LESS előfeldolgozóról fogunk beszélni.

LESS és VS kód fordítása

A KEVESEBB kód lefordításához mindössze a VS Code kódszerkesztőre és az Easy Less kiterjesztésre van szüksége. Hogyan működik?

Hozzon létre egy stílusfájlt .less kiterjesztéssel

Mentés után egy .css fájl automatikusan létrejön ugyanabban a mappában.

A változtatások minden mentésekor a KEVESEBB fájlokat a rendszer CSS-fájlokká fordítja. A böngészők még nem tanultak meg KEVESEBBET megérteni, CSS kódra van szükségük.

KEVESEBB Változók

A leggyakrabban használt tulajdonságokat változókba soroljuk. A webhely jellemzően ismétlődő színeket és betűcsaládokat használ. Az összes színt változókba helyezzük, majd a szabályban nem a színkódot, hanem a változót helyettesítjük. Azt kérdezed: "Mi a mulatság? Még mindig fel kell írnom valamit, mi a különbség?"

Fő jellemzője a gyors színváltás. A szín csak egyszer változik, változóban. Ha egy változóban lecseréli a színt, a szín a webhely összes oldalán lecserélődik. Ez a funkció önmagában is elegendő ahhoz, hogy a KEVÉSBEN használjuk. Változókat KEVÉSBEN deklarálunk és tároljuk bennük a szükséges értékeket, értelmes változóneveket adunk.

@elsődleges: #194eb4;
@másodlagos: #f2b834;
@siker: #4cb514;
@fekete: #000;
@fehér: #fff;

Most normál kódot írunk, mint a CSS-ben, de az értékek helyett változókat helyettesítünk.

KEVÉSBÉ div(
párnázás: 0;

fekete szín;
}

Mentés után a CSS kód összeállításra kerül. A CSS fájlhoz egyáltalán nem nyúlunk, minden munka a LESS fájlban történik. A gyakran ismétlődő tulajdonságokat változókba helyezheti.

CSS div(
párnázás: 0;
font-család: Roboto, sans-serif;
szín: # 000;
) Kevésbé keveredik

A mixinek hasznosak újrafelhasználás tulajdonságok halmaza - keretek, gombok, címsorok. Tulajdonságok csoportosított halmaza, amelyek különböző szelektorokhoz alkalmazhatók.

Az oldalon több azonos típusú gomb található, különböző színekben, de azonos betűtípusokkal. Létrehozunk egy mixint, amely segít automatizálni a gombok létrehozásának folyamatát.

Button_font(

szöveg-átalakítás: nagybetűk;
betűméret: 18 képpont;
}

Adjon hozzá egy mixint a gombválasztó tulajdonságaihoz.

Portfólió__gomb (
padding: 15px 80px;
szín: #344258;
.button_font;
}

A kimeneten a következőket kapjuk:

Portfólió__gomb (
padding: 15px 80px;
szín: #344258;
font-család: "DIN Pro Bold";
szöveg-átalakítás: nagybetűk;
betűméret: 18 képpont;
}

"és" szimbólum

A választó nevének megkettőzése helyett az „és” jelet használjuk.

Portfólió__elem (
pozíció: relatív;
háttérszín: #3c3c3c;
}
&:hover (
háttérszín: #ccc;
}
}

CSS.portfolio__item (
pozíció: relatív;
háttérszín: #3c3c3c;
}
.portfolio__item:hover (
háttérszín: #ccc;
) Médialekérdezések KEVESEBBEN

Közvetlenül a választóba írhat médialekérdezéseket.

KEVÉSBÉ.header__title(
szín: #344258;
betűméret: 40 képpont;

padding: 0 20px;
@media csak képernyő és (max. szélesség: 320 képpont)(
betűméret: 22 képpont;
}
} CSS.header__title(
szín: #344258;
betűméret: 40 képpont;
font-család: "DIN Pro", sans-serif;
padding: 0 20px;
}
@media csak képernyő és (max. szélesség: 320 képpont) (
.header__title(
betűméret: 22 képpont;
}
) Következtetés

Ez a cikk a LESS által kínált összes szolgáltatás 25%-át sem fedi le. Igen, ez nem szükséges, a cikk célja, hogy motiválja a kezdőket az előfeldolgozók használatára. Kezdve a legegyszerűbbekkel, fokozatosan áttérve a bonyolultabbakra.

A HTML és a CSS írási folyamata kissé túlterhelt lehet, és sok ugyanazt a feladatot követeli meg újra és újra. Olyan feladatok, mint a címkék bezárása HTML-ben vagy monoton áttekintés a hexadecimális színértékek között a CSS-ben.

Az ilyen különböző feladatok általában kicsik és kissé csökkentik a hatékonyságot. Szerencsére az előfeldolgozók felismerték és megkérdőjelezték ezeket és számos más hatékonysági hiányt.

Az előfeldolgozó olyan program, amely egy adattípust vesz fel, és egy másik adattípussá alakítja át. A HTML és a CSS esetében a legnépszerűbb előfeldolgozó nyelvek a Haml és a Sass. A Haml HTML-vé, a Sass pedig CSS-vé alakul.

Megalakulásuk óta a leggyakoribb problémák megoldása során Haml és Sass sokat talált további módokon bővítésére HTML képességekés CSS. Nemcsak a nem hatékony feladatok eltávolításával, hanem olyan módszerek létrehozásával is, amelyek megkönnyítik és logikusabbá teszik a weboldalfejlesztést. Az előfeldolgozók az őket támogató különféle keretrendszerek miatt is népszerűvé váltak; az egyik legnépszerűbb a Compass.

Haml

A CodeKit más előfeldolgozókat is támogat, amelyeket szintén hasznosnak találhat.

Doctype

A Haml nyelvű dokumentum írásának első része annak ismerete, hogy milyen típusú dokumentumtípust kell használni. HTML dokumentumokkal való munka során a fő dokumentumtípus a HTML5 lesz. A Hamlban a dokumentumtípusokat három felkiáltójel (!!!) határozza meg, amit szükség esetén valami konkrét követ.

A Haml alapértelmezett dokumentumtípusa a HTML 1.0 Transitional. Ezért ahhoz, hogy olyan legyen, mint a HTML5, át kell adni az ötös számot a felkiáltójelek után (!!! 5).

Kész HTML

Elemek nyilatkozata

A Haml egyik meghatározó jellemzője a szintaxisa, valamint az elemek deklarálása és egymásba ágyazása. HTML elemek, jellemzően nyitó és záró címkét tartalmaznak, de a Haml elemeknek csak egy nyitó címkéje van. Az elemek százalékjellel (%) kezdődnek, majd a behúzás határozza meg a beágyazást. A Haml behúzása egy vagy több szóközzel is elvégezhető, de fontos, hogy a behúzás változatlan maradjon. A tabulátorok és a szóközök nem kombinálhatók, és a tabulátoroknak vagy szóközöknek ugyanannyinak kell lenniük a dokumentumban.

A nyitó és záró címkék, valamint a szükséges behúzási struktúra kiküszöbölésével könnyen követhető elrendezés jön létre. A jelölés bármikor gyorsan megtekinthető és gond nélkül módosítható.

%body %header %h1 Helló világ! %szakasz %p Lorem ipsum dolor sit amet.

Lefordított HTML

Helló Világ!

Lorem ipsum dolor sit amet.

Szövegszerkesztés

A Haml szövege elhelyezhető ugyanabba a sorba, mint a deklarált elem, vagy behúzható az elem alá. A szöveg nem lehet a deklarált elemmel egy sorban, és nem lehet beágyazva alatta; kell lennie egyik vagy másik lehetőségnek. A fenti példa a következőképpen írható át:

%body %header %h1 Helló világ! %szakasz %p Lorem ipsum dolor sit amet.

Attribútumok

Az attribútumok, az elemekhez hasonlóan, kissé eltérően vannak deklarálva a Haml-ban. Az attribútumok deklarálása közvetlenül az elem után, göndör vagy zárójelben történik, attól függően, hogy Ruby vagy HTML szintaxist kívánunk használni. A Ruby stílus attribútumok a szabványos hash szintaxist fogják használni a(z) belsejében, míg az attribútumok in HTML stílus szabványt fogja használni HTML szintaxis belül ().

%img(:src => "shay.jpg", :alt => "Shay Hou") %img(src: "shay.jpg", alt: "Shay Hou") %img(src="shay.jpg" alt="Shay Hou") !}

Lefordított HTML

Osztályok és azonosítók

Kívánt esetben az osztályok és azonosítók deklarálhatók más attribútumokhoz hasonlóan, de kissé eltérően is kezelhetők. Ahelyett, hogy a class és id attribútumokat zárójelben szereplő értékekkel listáznánk, az érték közvetlenül az elem után is megadható. Az osztályokhoz ponttal, vagy az azonosítóhoz hash-vel lehet hozzáadni egy értéket közvetlenül az elem után.

Ezenkívül az attribútumok keverhetők a megfelelő formátumban történő összekapcsolással. Az osztályokat pontokkal kell elválasztani, és más attribútumok is hozzáadhatók a korábban vázolt formátumok valamelyikével.

%section.feature %section.feature.special %section#hello %section#hello.feature(role="region")

Lefordított HTML

Osztályok és azonosítók itt

Abban az esetben, ha osztályt vagy azonosítót használunk, akkor a %div elhagyható, és az osztály vagy azonosító értéke közvetlenül szerepelhet. Az osztályokat ismét egy ponttal, az azonosítókat pedig hash-sel kell meghatározni.

Awesome.wesome.lecke #bekezdés.lecke

Lefordított HTML

Logikai attribútumok

A logikai attribútumokat a rendszer a használt szintaxistól függően ugyanúgy kezeli, mintha Ruby vagy HTML-ben lennének.

%input(:type => "checkbox", :checked => true) %input(type="checkbox" checked=true) %input(type="checkbox" checked)

Lefordított HTML

Menekülő szöveg

A Haml egyik előnye a Ruby kiszámításának és futtatásának képessége, de ez nem mindig a kívánt művelet. A szöveget és a kódsorokat fordított perjel (\) segítségével lehet megszabadítani, ami lehetővé teszi a szöveg explicit megjelenítését végrehajtás nélkül.

Az alábbi példában az első mintát = @author hajtja végre Ruby, lekérve a szerző nevét az alkalmazásból. A második minta a szöveget kilépő fordított perjellel kezdődik, és végrehajtás nélkül kerül nyomtatásra.

Szerző = @szerző \= @szerző

Lefordított HTML

Shay Hou = @szerző

Szöveg szökési alternatívák

Időnként nem elegendő a menekülő szöveg, és Rubyra van szükség a kívánt kimenet létrehozásához. Az egyik népszerű példa erre, hogy megpróbál egy pontot közvetlenül a hivatkozás után beilleszteni, de nem a hivatkozás szövegének részeként. Helyezzen egy pontot új sor nem elfogadható, mivel annak tekintik üres érték osztályba, fordítási hibát okozva. Ha a pont elé fordított perjelet ír be, akkor a karakter kikerül, de szóközt tesz az utolsó szó és a pont közé. Ismét nem hozta meg a kívánt eredményt.

Ilyen esetekben jól jön a Ruby helper. Az alábbi példa a segítő segítségével pontot helyez el közvetlenül az utolsó szó után, de a hivatkozás szövegén kívül.

%p Shay - = sikeres "." do %a(:href => "#") jól sikerült

Lefordított HTML

Shay - Szép munka.

Hozzászólások

Az elemekhez és attribútumokhoz hasonlóan a megjegyzések kezelése kissé eltérő a Haml-ban. A kód egyszerűen kommentálható egyetlen perjel (/) használatával. Az egyes sorokat a sor elején lévő perjel használatával, a kódblokkokat pedig perjel alá ágyazva kommentálhatjuk.

%div / Megjegyzés sor Aktuális sor / %div Megjegyzés blokk

Lefordított HTML

Aktuális vonal

Feltételes megjegyzések

A feltételes megjegyzéseket is másképp kezelik a Haml. Feltételes megjegyzés létrehozásához használja a szögletes zárójelek() körülmény körül. Ezeket a szögletes zárójeleket közvetlenül a perjel után kell elhelyezni.

/ %script(:src => "html5shiv.js")

Lefordított HTML

Csendes kommentek

A Haml lehetőséget biztosít speciális néma megjegyzések létrehozására is. A néma megjegyzések abban különböznek az alap HTML-megjegyzésektől, hogy a néma megjegyzések tartalmát a fordítás után teljesen eltávolítják az oldalról, és nem jelennek meg az eredmények között. A csendes megjegyzések kötőjellel kezdődnek, amelyet egy hash (-#) követ. Más megjegyzésekhez hasonlóan a néma megjegyzések is használhatók egy vagy több sor eltávolítására egymásba ágyazással.

%div -# Törölt sor Aktuális sor

Lefordított HTML

Aktuális vonal

Szűrők

A Haml számos szűrőt kínál, amelyek lehetővé teszik különböző típusú bemenetek használatát a Hamlon belül. A szűrők kettősponttal kezdődnek, amelyet a szűrő neve követ, például :markdown, alatta pedig a melléklet szűréséhez szükséges teljes tartalommal.

Általános szűrők

Az alábbiakban bemutatunk néhány általános szűrőt, köztük a legnépszerűbbeket: css és javascript.

• :cdata
• :kávé
• :megszökött
• :javascript
• :Kevésbé
• :árleszállítás
• :maruku
• :egyszerű
• :tartani
• :rubin
• :sass
• :scss
• :textil

Javascript szűrő

:javascript $("button").on("kattintás", function(event) ( $("p").hide("lassú"); ));

Lefordított HTML

$("button").on("kattintás", function(event) ( $("p").hide("lassú"); ));

CSS és Sass szűrők

:css .container ( margó: 0 automatikus; szélesség: 960 képpont; ) :sass .container margó: 0 automatikus szélesség: 960 képpont

Lefordított HTML

.container ( margó: 0 automatikus; szélesség: 960 képpont; )

Rubin interpoláció

Ahogy korábban említettük, Haml ki tudja értékelni a Rubyt, és néha előfordulhatnak olyan esetek, amikor a Rubyt egyszerű szövegen belül kell értékelni. Ebben az esetben a Rubyt úgy kell interpolálni, hogy a szükséges kódot Rubyba csomagoljuk.

Az alábbiakban egy Ruby példa látható, amely egy osztálynév részeként interpolálva van.

%div(:class => "tanuló-#(@tanuló.név)")

Lefordított HTML

SCSS és Sass

Az SCSS és a Sass olyan előfeldolgozó nyelvek, amelyek CSS-re fordítódnak. Kicsit olyanok, mint Haml, és megkönnyítik a kódírást, miközben nagyon kevés vezérlőt kínálnak. Külön-külön az SCSS és a Sass azonos eredetû, de technikailag különbözõ szintaxisuk van.

A rövidség kedvéért ebben az oktatóanyagban csak Haml és Sass előfeldolgozók szerepeltek. Azért is esett rájuk a választás, mert Ruby használatával készültek, és közvetlenül illeszkednek a Ruby on Rails alkalmazásokhoz. A közösségtől is óriási támogatást kaptak.

A használandó előfeldolgozó kiválasztásakor fontos mérlegelni, hogy mi a legjobb csapata és projektje számára. A Node.js-ben épített projektek valószínűleg többet profitálhatnak a Jade és a Stylus előnyeiből. A legfontosabb szempont azonban az, hogy a csapata mit szokott használni. Végezzen kutatást az egyes projekteknél, és válassza ki a leginkább tájékozott megoldást.

Források és linkek

• Haml – HTML absztrakciós jelölőnyelv
• Sass – Szintaktikailag félelmetes stíluslapok
• Sass Playground a SassMeister-en

Van kérdésed?

A tervezői elrendezés megvalósítása lehetetlen HTML és CSS használata nélkül. Ha egy jelölőnyelv lehetővé teszi, hogy felvázoljunk egy sablont a szükséges elemekből, akkor a CSS ezt a sablont átalakítja a megfelelő típus, mint a forrásban. Úgy tűnik, hogy a tiszta CSS segítségével olyanná teheted az oldalt, amilyenné az ügyfél szeretné.

Ha azonban valaki megnyitja az Ön egyetlen CSS-fájlját, és megpróbál valamit módosítani, biztos abban, hogy a kód olvasható, szerkeszthető, strukturált és érthető lesz? Ha a projekted hatalmas, sok részből áll, biztos vagy benne, hogy könnyen támogathatod a jövőben? Ha CSS-előfeldolgozót használ, akkor a válasz igen, és emellett ez egy módja annak, hogy automatizálja a webhely elrendezését. Miért? Most megtudjuk.

Mi az a CSS előfeldolgozó?

Értelmezésem szerint ez egy kiegészítő a szabványos CSS-hez, amely kibővíti a szabványos képességeket, hozzáad néhány funkciót, és lehetővé teszi olvashatóbb és könnyebben érthető kód írását. A kijáratnál forrás az általunk megszokott CSS-be fordít. Egy ilyen eszköz használata a modern fejlesztésben „kötelező”, és azt tanácsolom minden tervtervezőnek vagy fejlesztőnek, hogy ismerkedjen meg vele. Hozzá kell tenni, hogy bőven van miből válogatni, mert elég sok CSS előfeldolgozó létezik, de a legnépszerűbbeket érdemes kiemelni:

• Stylus

A fenti előfeldolgozók mindegyike szinte azonos funkcionalitással rendelkezik, csak a szintaxisban vannak apró eltérések. Most pedig térjünk vissza a korábban felvetett kérdéshez: milyen előnyöket nyújtanak az előfeldolgozók a kódunk kényelmesebbé és karbantarthatóbbá tétele érdekében? Ez mindenekelőtt fészekrakás. Ez a funkció lehetőséget ad számunkra, hogy elemeket strukturáljunk, könnyen megtaláljuk az elem szülőjét, gyorsan írjunk pszeudoosztályokat és pszeudoelemeket, és még a BEM-et is használjuk! Például:
.nyomon követni
szín: #fff
&__cím
kitöltés: 10px
&:hover, &:focus
szín: kék

Vessen egy pillantást erre a Sass nyelven írt kódrészletre. Mindez a következő CSS-re fordítódik:

Pálya (szín: #FFF;)
.track__title ( kitöltés: 10 képpont;)
.track__title:hover, .track-title:focus ( szín: kék)

Lakonikus, kényelmes, érthető, a szülőtől a gyerekig terjedő szerkezet remek, nem? A második és nem kevésbé fontos előny a változók. Működésük elve rendkívül egyszerű: a változó neve a $ szimbólummal kezdődik, majd maga a név. Az értéket kettősponton keresztül írjuk - ez lehet bármilyen szín, behúzás, szélesség, betűméret stb. Ennek eredményeként valami ilyesmit kapunk:

$btn-szín: kék;
$font-main-size: 16px;

A használat pedig így fog kinézni:

Blokk (
font-size: $font-main-size;
}

Képzeld csak el, milyen kényelmes. Ha meg kell változtatnia a gombok színét az egész oldalon, akkor ezt csak egy helyen kell megtennie! Nos, menjünk tovább. A harmadik és legnagyszerűbb dolog, amit a CSS-előfeldolgozók kínálhatnak számunkra, a mixinek használata. Szokásos felfogásunk szerint a mixinek olyan függvények, amelyek többször használhatók a kód ugyanazon részeinek megismétlése nélkül (emlékezzen az egyik programozási alapelvre - DRY - Ne ismételje meg magát). Hogy őszinte legyek, nem nagyon használok mixint, láthatóan nem is volt ilyen sürgős szükség, de azért mutatok néhány példát. Az egyik legtöbbet használt funkció a következő:

@function em($pixels, $context: $browser-context) (
@if (egység nélküli($pixel)) (
$pixels: $pixels * 1px;
}
@if (egység nélküli($context)) (
$kontextus: $kontextus * 1px;
}
@return $pixels / $context * 1em;
}

Alkalmazása pedig a következő:

test (
betűméret: em(14px);
}

Igen, amint érti, ez csak a betűméret átalakítása PX-ről Em-re (éljenek azok az idők, amikor az ilyen apróságokért speciális szolgáltatásokat vett igénybe, vagy maga számolta ki egy számológépen). A következő példa is sok időt takarít meg:

@mixin input-placeholder (
&.helyőrző ( @content; )
&:-moz-placeholder ( @content; )
&::-moz-helyőrző ( @content; )
&:-ms-input-placeholder ( @content; )
&::-webkit-input-placeholder ( @content; )
}

Felhasználásai:

bemenet, textarea (
@include input-placeholder (
szín: $szürke;
}
}

Sok más példát is fel lehet hozni, azonban érdemes elkezdeni a mixinek használatát, hogy megértsük, mennyire hasznos ez az eszköz. Talán van még egy ok, ami miatt megszeretheti a CSS-előfeldolgozókat, és ennek neve modularitás. 2018 van, és a modularitás mindenhol jelen van – a HTML-sablonmotoroktól a különféle CSS-keretrendszerekig és projektkészítőkig.

A modern CSS nagy teljesítményű, és az előfeldolgozókkal kombinálva általában egy harci gép az oldalak tartalmának megtervezésében. A cikk a Sass/SCSS részletes útmutatóját tartalmazza példákkal. Miután elolvasta ezt, megtanulja, hogyan kell mixineket, változókat és direktívákat használni, hogy még jobban irányíthassa stílusait.

Megjegyzés Minden Sass/SCSS kód CSS-be van fordítva, hogy a böngészők megértsék és helyesen jeleníthessék meg. Jelenleg a böngészők nem támogatják közvetlenül a Sass/SCSS-szel vagy bármely más CSS-előfeldolgozóval való munkát, hanem a szabványos CSS specifikáció nem biztosít hasonló funkcionalitást.

Miért érdemes Sass/SCSS-t használni CSS helyett?

Fészekrakás- Az SCSS lehetővé teszi a beágyazást CSS szabályok egymásba. A beágyazott szabályok csak azokra az elemekre vonatkoznak, amelyek illeszkednek a külső választókhoz (és ha Sass-ról beszélünk, akkor ott minden szép és intuitív zárójelek nélkül is).

Változók- a szabványos CSS-ben is megvan a változók fogalma, de a Sass-ban kicsit másképp is lehet velük dolgozni. Például ismételje meg őket a @for direktíván keresztül. Vagy dinamikusan generálhat tulajdonságokat. Bővebben az orosz nyelvű projekt honlapján tájékozódhat.

Továbbfejlesztett matematikai műveletek- CSS értékeket összeadhat, kivonhat, szorozhat és oszthat. A szabványos CSS-től eltérően a Sass/SCSS lehetővé teszi a calc() nélküli megoldást.

Trigonometria- Az SCSS lehetővé teszi, hogy saját (szinusz és koszinusz) függvényeket írjon csak Sass/SCSS szintaxis használatával, hasonlóan ahhoz, ahogy más nyelveken, például JavaScriptben is megteheti.

irányelvek@A közben és kifejezés@if-else – CSS-kódot írhat más nyelvekből ismert elemek használatával. De ne tévesszen meg – a végén a kimenet sima CSS lesz.

Mixins (mixins)- egyszer létrehozhat egy CSS-tulajdonságkészletet, és többször is dolgozhat velük, vagy keverheti őket más értékekkel. A mixek segítségével különálló témák hozhatók létre ugyanabban az elrendezésben. A mixek tartalmazhatnak teljes CSS-szabályokat vagy bármi mást, ami a Sass-dokumentumban megengedett. Még érveket is elfogadnak, lehetővé téve sokféle stílus létrehozását kis számú mixinnel.

Funkciók- Létrehozhat CSS-definíciókat függvényként újrafelhasználásra.

Sass előfeldolgozó

Sass nem dinamikus. Nem tud valós időben generálni és/vagy animálni CSS-tulajdonságokat és értékeket. De többet is létrehozhat belőlük hatékony módés hagyja, hogy a szabványos tulajdonságok (például a CSS-animáció) kölcsönözzék őket onnan.

Szintaxis

Az SCSS nem igazán ad hozzá semmilyen új funkciót a CSS-hez, kivéve az új szintaxist, amely gyakran csökkenti a kódolási időt.

Előfeltételek

5 CSS-előfeldolgozó létezik: Sass, SCSS, Less, Stylus és PostCSS.

Ez a cikk többnyire az SCSS-t tárgyalja, amely hasonló a Sass-hoz. Ezekről az előfeldolgozókról bővebben a Stack Overflow (eredeti) vagy a qaru (orosz nyelvű fordítás) oldalon olvashat.

SASS  -  (.sass) Szintaktikailag Egy fantasztikus Style S lapok.

SCSS  -  (.scss) Sass y C lépcsőzetes Style S lapok.

A .sass és .scss kiterjesztések hasonlóak, de mégsem ugyanazok. A rajongóknak parancs sorÍme a konverziós módszer:

# Konvertálás Sass-ból SCSS-be $ sass-convert style.sass style.css # Konvertálás SCSS-ből Sass-ba $ sass-convert style.scss style.sass

A Sass az SCSS első specifikációja .sass fájlkiterjesztéssel. Fejlesztése még 2006-ban kezdődött, de később egy alternatív szintaxist fejlesztettek ki .scss kiterjesztéssel.

Felhívjuk figyelmét, hogy más előfeldolgozók az SCSS-hez hasonló funkciókkal rendelkeznek, de a szintaxis eltérhet. Ezenkívül minden, ami CSS-ben működik, tökéletesen működik Sass-ban és SCSS-ben is.

Változók

A Sass/SCSS lehetővé teszi a változókkal való munkát. A CSS-ben kettős kötőjel (--), az előfeldolgozókban pedig egy dollárjel ($) jelöli őket.

$szám: 1; $szín: #ff0000; $text: "tproger örökre."; $text: "IT örökre." !default; $semmi: null;

A még értékkel nem rendelkező változókhoz alapértelmezett értéket rendelhet, ha az érték végéhez hozzáadja a !default címkét. Ebben az esetben, ha a változó már kapott értéket, az nem fog változni; ha a változó üres, akkor az új megadott értéket kapja.

#container ( tartalom: $text; )

A Sass változói bármely tulajdonsághoz hozzárendelhetők.

Beágyazott szabályok

Szabványos beágyazott CSS-elemek szóközt használva:

/* Beágyazott szabályok */ #A ( szín: piros; ) #A #B ( szín: zöld; ) #A #B #C p ( szín: kék; )

Ugyanazok a beágyazott elemek SCSS használatával:

/* Beágyazott szabályok */ #A ( szín: piros; #B ( szín: zöld; #C p ( szín: kék; ) ) )

Amint látja, a szintaxis tisztábbnak és kevésbé ismétlődőnek tűnik.

Ez különösen akkor hasznos, ha túlterhelt elrendezéseket kezel. Ily módon a beágyazott tulajdonságok kódba írt igazítása szorosan illeszkedik az alkalmazás tényleges elrendezési struktúrájához.

A színfalak mögött az előfeldolgozó még mindig szabványos CSS-kódba fordítja (fent látható), hogy a böngészőben lehessen renderelni. Éppen megváltoztatjuk a CSS írásmódját.

#p „és” ( szín: fekete; a ( betűsúly: félkövér; &:hover ( szín: piros; ) ) )

A & karakterrel kifejezetten megadhatja, hogy a szülő választó hova kerüljön be.

Az alábbiakban látható a Sass (az előző példából) CSS-be fordításának eredménye.

#p (szín: fekete;) #p a (betűsúly: félkövér;) #p a:hover (szín: piros;)

Ennek eredményeként az "és" jelet az a szülőelem nevébe fordították (a:hover).

Mixinek (más néven szennyeződések)

A mixinek szelektorokat is tartalmazhatnak, beleértve a tulajdonságokkal rendelkezőket is. És a szelektorok tartalmazhatnak hivatkozásokat a szülő elemre az „és” jellel (&), emlékszel erre, igaz?

Példa több böngészővel való munkavégzésre

A CSS-ben néhány dolgot meglehetősen fárasztó megírni, különösen a CSS3-ban, ahol ezen felül gyakran nagyszámú gyártói előtagot (-webkit- vagy -moz-) kell használni.

A Mixinek lehetővé teszik CSS-deklarációk csoportjainak létrehozását, amelyeket többször is használni fog a webhelyen. A bevált gyakorlat a mixinek használata a szállítói előtagokhoz. Példa:

@mixin border-radius($radius) ( // A következő előtagjai: -webkit-border-radius: $radius; // Chrome és Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $sugár; // internet böngésző-o-border-radius: $sugár; // Opera border-radius: $sugár; // Standard CSS ) // Példa a border-radius mixin használatára az it.box létrehozása után ( @include border-radius(10px); )

Aritmetikai műveletek

Mint a való élet, nem dolgozhat olyan számokkal, amelyek adattípusai nem kompatibilisek (például px és em hozzáadása).

Összeadás és kivonás p ( font-size: 10px + 2em; // HIBA! font-size: 10px + 6px; // 16px font-size: 10px + 2; // 12px )

Mindig ügyeljen a hozzáadott adatok típusára. Vagyis pixeltől pixelig, elefánttól elefántig. A kivonás ugyanúgy működik, csak mínuszjellel.

Példa a kivonásra:

Szorzás

Pontosan úgy, mint a CSS-ben, calc(a * b) használatával, de calc és zárójelek nélkül. Ezenkívül a szorzójelet szóközzel is elválaszthatja a számoktól (5*6 == 5 * 6).

Kivétel A képpontok egymás között nem szorozhatók. Vagyis 10px * 10px != 100px . 10 képpont * 10 == 100 képpont.

P (szélesség: 10px * 10px; // HIBA! szélesség: 10px * 10; // 100px szélesség: 1px * 5 + 5px; // 10px szélesség: 5 * (5px + 5px); // 50px szélesség: 5px + ( 10 képpont / 2) * 3; // 20 képpont )

Osztály

Az osztásnál a dolgok kicsit bonyolultabbak, de kitalálható, mert a szabványos CSS-ben a perjel a tulajdonságok jelölésének rövid formájának használatára van fenntartva. Példa alább.

/* rövid forma a tulajdonságok írására */ font: dőlt félkövér .8em/1.2 Arial, sans-serif; /* alapforma tulajdonság rekordok */ font-style: dőlt; betűsúly: félkövér; betűméret: .8em; vonalmagasság: 1,2; font-család: Arial, sans-serif;

Három segítő utal a megosztás lehetőségére:

Az értéket (vagy annak bármely részét) egy változó tárolja, vagy egy függvény adja vissza.

Az értékek zárójelben vannak.

Az érték egy másik aritmetikai kifejezés részeként kerül felhasználásra.

$var1: 20; $var2: 4; p ( felső: 16px / 24px; // Változatlanul jelenik meg normál CSS-ben felső: (20px / 5px); // Oszt (de csak zárójelek használata esetén) top: #($var1) / #($var2); / / Kimenetek normál CSS-kódként nem történik felosztás top: $var1 / $var2; // Osztás történik top: random(4) / 5; // Osztás történik (ha a funkcióval együtt használjuk) top: 2px / 4px + 3px; // A rendszer osztást hajt végre, ha újabb aritmetikai műveletet ad hozzá)

Összeállítás eredménye CSS-ben:

P ( felül: 16 képpont / 24 képpont; felül: 4; felül: 20 / 4; felül: 5; felül: 0,6; felül: 3,5 képpont; )

Maradék

A maradék kiszámítja az osztási művelet maradékát. Az alábbiakban megnézzük, hogyan lehet „zebrát” létrehozni egy HTML-listához.

@mixin zebra() ( @for $i 1-től 7-ig ( @if ($i % 2 == 1) ( .stripe-#($i) ( háttérszín: fekete; szín: fehér; ) ) ) ) * ( @include zebra(); szövegigazítás: középre; )

A zebra mixin létrehozása a fenti kódbeágyazásban látható. A @for és @if direktívák leírása az alábbi részben található.

A minta létrehozásához több HTML elemet kell írni.

zebra zebra zebra zebra zebra zebra

Eredmény a böngészőben:

Zebra sikeresen generált a zebra mixin segítségével

Összehasonlító operátorok

Az @if direktíva egy SassScript kifejezést vesz fel, és annak beágyazott stílusait használja, ha a kifejezés a false vagy null értéken kívül mást ad vissza.

Az alábbiakban bemutatjuk, hogyan működnek az @if és @else direktívák, ha egy mixin belül vannak beágyazva.

@mixin spacing($padding, $margin) ( @if ($padding > $margin) ( padding: $padding; ) @else ( padding: $margin; ) .container ( @include spacing(10px, 20px); )

Összehasonlítás a gyakorlatban. A spacing mixin kiválasztja a kitöltési méreteket, ha nagyobb, mint a margó.

CSS-be fordítás után:

Tároló (kitöltés: 20 képpont; )

Logikai operátorok

Logikai operátorok leírása

A Sass logikai operátorok segítségével hozzon létre egy gombot, amelynek háttere a szélességétől függően változik.

@mixin gombszín ($height, $width) ( @if (($height< $width) and ($width >= 35px)) ( háttérszín: kék; ) @else ( háttérszín: zöld; ) .button ( @include button-color (20px, 30px) )

Húrok

A CSS 2 típusú karakterláncot határoz meg: idézőjelekkel és anélkül. Sass mindkettőt felismeri. Ennek eredményeként ugyanazokat a karakterláncokat fogja használni a CSS-ben, amelyeket a Sass-ban használt.

Egyes esetekben idézőjelek nélkül is hozzáadhat karakterláncokat az érvényes CSS-értékekhez, de csak akkor, ha a hozzáadott karakterlánc egy befejező elem.

P ( betűtípus: 50 képpont Ari + "al"; // 50 képpontos Arialra fordítja le)

Az alábbi példa bemutatja, mit ne tegyünk.

P ( betűtípus: "50px" + Arial; // HIBA!)

Hozzáadhat sorokat különböző típusok, ha nincs bennük szóköz. Az alábbi példa nem fordítható le.

P:after ( tartalom: "Hozd vissza Linust" + Torvalds!; // HIBA! )

P:after ( tartalom: "Hozd vissza Linust" + "Torvalds!"; // figyelj a "Torvaldsra!" )

Példa több karakterlánc hozzáadására:

P:after ( tartalom: "Az " + "emberiség sorsa" + "-" + "iteráció."; )

Karakterláncok és számok hozzáadása:

P:after ( tartalom: "Rekurzió" + 2013 + "az égiek sorsa"; )

Megjegyzés: A tartalom tulajdonság csak a:before és:after pszeudoválasztókkal működik. Javasoljuk, hogy ne CSS-dokumentumban használjon tartalmat, hanem közvetlenül a HTML-címkék között használja.

Menetvezérlő operátorok

Az SCSS-nek vannak függvényei (fucntion()) és direktívái (@directive). Kicsit feljebb, már néztünk egy példát egy függvényre, amikor a mixineken belüli argumentumátadást tanulmányoztuk.

A függvények általában közvetlenül a nevük után zárójelben vannak. És az utasítás a @ szimbólummal kezdődik.

A JavaScripthez hasonlóan az SCSS is lehetővé teszi, hogy szabványos áramlásvezérlő operátorokkal dolgozzon.

ha()

if() egy függvény (és néha a mesterséges intelligencia alapja).

Használata meglehetősen primitívnek tűnik: az operátor a feltételben jelzett két érték egyikét adja vissza.

/* Az if() függvény használata */ if (igaz, 1px, 2px) => 1px; if (hamis, 1px, 2px) => 2px;

@ha

Az @if egy feltételes elágazáshoz használt direktíva.

/* Az @if direktíva használata */ p ( @if 1 + 1 == 2 (szegély: 1px szilárd; ) @if 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }

Összeállítás eredménye:

P (szegély: 1 képpont tömör; )

Az alábbiakban egy kombinált villa látható az @else direktíva hozzáadásával.

/* $type változó létrehozása */ $type: river; /* Színezd kékre a konténereket, ha a $type változó értéke river */ div ( @if $type == river ( szín: kék; ) ) /* Feltételes színek a címkében lévő szöveghez

*/ p ( @if $type == fa ( szín: zöld; ) @else if $type == river ( szín: kék; ) @else if $type == piszok ( szín: barna; ) )

Szülőelem jelenlétének ellenőrzése

Az „és” jel kiválasztja a szülőelemet, ha van ilyen. Ellenkező esetben null értékkel tér vissza. Ezért az @if direktívával együtt használható.

A következő példákban feltételes CSS-stílusok létrehozását vizsgáljuk meg a szülőelem jelenlététől függően.

/* Ellenőrizze, hogy van-e szülőelem */ @mixin does-parent-exist ( @if & ( /* Alkalmazzon kék színt a szülőelemre, ha létezik */ &:hover ( szín: kék; ) ) @else ( /* Szülőelem hiányzik, kék szín alkalmazása a linkekre */ a ( szín: kék; ) ) )

@irányelvre

A @for direktíva meghatározott számú alkalommal nyomtat egy stíluskészletet. Minden iterációnál egy számlálóváltozót használnak a kimenet megváltoztatására.

A @for direktíva 5-ször ismétlődik.

@for $i 1-től 5-ig ( .definition-#($i) (szélesség: 10px * $i; ) )

Összeállítás eredménye CSS-ben:

Definition-1 (szélesség: 10px; ) .definition-2 (szélesség: 20px; ) .definition-3 (szélesség: 30px; ) .definition-4 (szélesség: 40px; ) .definition-5 (szélesség: 50px; )

@minden direktíva

Az @each direktíva beállítja a $var értéket a lista- vagy szótárértékek mindegyikéhez, és a benne lévő stílusokat a megfelelő $var értékkel adja ki.

@minden $állat kacsacsőrűben, oroszlánban, bárányban, galambban ( .#($állat)-ikon ( háttérkép: url("/images/#($animal).png") ) )

Összeállítás eredménye CSS-ben:

Platypus-icon ( background-image: url("/images/platypus.png"); ) .lion-icon ( background-image: url("/images/lion.png"); ) .sheep-icon ( background- kép: url("/images/sheep.png"); ) .dove-icon ( background-image: url("/images/dove.png"); )

@while direktíva

A @while direktíva egy SassScript kifejezést vesz fel, és végigfut a benne található stílusokon, miközben a kifejezés kiértékelése true értékű. Használható bonyolultabb ciklusok létrehozására, mint amire a @for alkalmas, bár ritkán van rá szükség. Például:

$index: 5; @while $index > 0 ( .elem-#($index) ( szélesség: 10px * $index; ) $index: $index - 1; )

Összeállítás eredménye:

Element-5 (szélesség: 50px; ) .element-4 (szélesség: 40px; ) .element-3 (szélesség: 30px; ) .element-2 (szélesség: 20px; ) .element-1 (szélesség: 10px; )

Funkciók a Sass/SCSS-ben

A Sass/SCSS használatával ugyanúgy használhatja a függvényeket, mint más nyelveken.

Hozzunk létre egy háromszáz képpont() függvényt, amely 300 képpontot ad vissza.

@function three-hdred-px() ( @return 300px; ) .name ( szélesség: háromszáz képpont(); szegély: 1px tömör szürke; kijelző: blokk; pozíció: abszolút; )

A class.name alkalmazása után az elem szélessége 300 pixel lesz.

Helló.

A Sass függvényei bármilyen érvényes CSS-értéket visszaadhatnak, és bármely tulajdonsághoz hozzárendelhetők. Az átadott argumentum alapján akár ki is számíthatók.

@function double($width) ( @return $width * 2; )

Trigonometria

A sin() és cos() trigonometrikus függvények gyakran megtalálhatók beépített osztályként sok nyelven, például a JavaScriptben.

Munkájukat érdemes tanulmányozni, ha csökkenteni akarjuk az animációk fejlesztésére fordított időt felhasználói felület, például trobber létrehozásához. Erről egyébként az egyik cikkben már beszéltünk. De ebben az esetben ez kód lesz, nem pedig egy HTML dokumentumba beillesztett GIF kép.

Az alábbiakban néhány példát nézünk meg érdekes animációs effektusok létrehozására a sin() függvény segítségével, amelyben a kód mennyisége minimális. Ezután ezt a tudást méretezheti interaktív felhasználói felületelemek létrehozására (körben való mozgás, hullámos animáció).

A trigonometria CSS-sel kombinált használatának előnye, hogy nincsenek további HTTP-kérések, mint a gif-képeknél.

A Sass-ban trigonometrikus függvényeket írhat. Olvasson erről bővebben.

Saját függvények írása

A trigonometriában sok művelet függvényen alapul. Mindegyik funkció a másikra épül. Például a rad() függvény megköveteli a PI() használatát. A cos() és sin() függvényekhez a rad() függvényt kell használni.

@function PI() ( @return 3.14159265359; )

A függvények írása Sass/SCSS-ben nagyon hasonlít a más nyelvek írási függvényeihez.

A pow() függvény használata:

@function pow ($szám, $exp) ( $érték: 1; @if $exp > 0 ( @for $i 1-től $exp ( $érték: $érték * $szám; ) ) @else if $exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

A rad() függvény használata:

@function rad ($angle) ( $egység: egység ($angle); $egység nélküli: $angle / ($angle *0 + 1); //Ha a szög értéke fokban ("deg") van megadva, konvertálni kell radiánban @if $egység == deg ( $egység nélküli: $egység nélküli / 180 * PI(); ) @return $egység nélkül; )

A tangens tan() függvény segítségével történő kiszámításához a sin() és cos() függvényeket kell használni.