A funkciók jelentősen leegyszerűsítik a programozási élményt, és ez igaz CSS-kód írásakor is.
A Less CSS egy robusztus és dinamikus CSS-előfeldolgozó, amely az elmúlt években jelentős figyelmet és népszerűséget kapott. Előfeldolgozóként a "Vanilla CSS", a weben használt hagyományos CSS stílusnyelv kiterjesztéseként szolgál. fejlesztés, további funkciók és funkciók biztosításával, amelyek javítják az általános stílust tapasztalat.
Ha jártas a szabványos CSS írásában, meredek tanulási görbe nélkül zökkenőmentesen áttérhet a Kevesebb CSS használatára. Ez a kompatibilitás megkönnyíti a meglévő CSS-ismeretek karbantartását, miközben kihasználja a Less fejlett képességeit.
Mik azok a funkciók és miért fontosak?
A programozásban a függvény egy kódblokk, amely egy adott feladatot hajt végre. A programban máshol is felhasználhatja. A függvények általában adatokat vesznek fel, feldolgozzák, és visszaadják az eredményeket.
Ezek megkönnyítik a programon belüli duplikált kódok csökkentését. Tegyük fel például, hogy van egy programja, amely a felhasználó által beírt ár alapján kiszámítja a kedvezményt. Az a
nyelv, mint a JavaScript, a következőképpen valósíthatja meg:funkciócheckDiscount(ár, küszöb){
ha (ár >= küszöb){
hagyja kedvezmény = 5/100 * ár;
Visszatérés`A kedvezményed $${kedvezmény}`;
} más {
Visszatérés`Sajnos ez a termék nem jogosult a kedvezményre. `
}
}
Ezután meghívhatja a függvényt, és átadhatja a ár és a küszöb.
hagyja ár = prompt("Adja meg a tétel árát:")
figyelmeztetés (checkDiscount (ár, 500))
A kedvezmények ellenőrzésének logikájának absztrakciójával a program nem csak olvasható, de most már van egy újrafelhasználható kódblokk, amely feldolgozza a kedvezményt és visszaadja az eredményt. A funkciók még sok mindenre képesek, de ez csak az alap.
Funkciók megértése kevesebb CSS-ben
A hagyományos CSS-ben nagyon korlátozott számú funkció áll az Ön rendelkezésére, mint fejlesztő. A CSS egyik legnépszerűbb funkciója a calc()math függvény amely pontosan azt teszi, aminek látszik – számításokat végez, és az eredményt tulajdonságértékként használja a CSS-ben.
p{
háttérszín: piros;
szélesség: kalc(13px- 4px);
}
A Less CSS-ben számos olyan függvény van, amely nem csak aritmetikai műveleteket végez. Az egyik funkció, amellyel a Lessben találkozhat, az ha funkció. A ha A függvény három paramétert vesz fel: egy feltételt és két értéket. Az alábbi kódblokk megmutatja, hogyan használhatja ezt a funkciót:
@szélesség: 10 képpont;
@magasság: 20 képpont;
div{
árrés:ha((@szélesség > @magasság), 10 képpont, 20 képpont)
}
A fenti kódblokkban a Less fordító ellenőrzi, hogy a változót szélesség (meghatározza a @ szimbólum) nagyobb, mint a változó magasság. Ha a feltétel igaz, a függvény a feltétel utáni első értéket adja vissza (10 képpont). Ellenkező esetben a függvény a második értéket adja vissza (20 képpont).
A fordítás után a CSS kimenetnek valahogy így kell kinéznie:
div {
árrés: 20px;
}
Hogyan használjunk logikai értéket kevesebben
A logikai érték olyan változó, amelynek két lehetséges értéke van: igaz vagy hamis. A... val logikai() függvényben a Lessben, egy kifejezés igaz vagy hamis értékét egy változóban tárolhatja későbbi felhasználás céljából. Íme, hogyan működik.
@szöveg szín: piros;
@bg-color: logikai érték(@szövegszín = piros);
A fenti kódblokkban a Less fordító ellenőrzi, ha szöveg szín piros. Aztán a bg-color változó tárolja az értéket.
div{
háttérszín: ha(@bg-color,zöld sárga);
}
A fenti kódblokk valami ilyesmire fordítódik le:
div {
háttérszín: zöld;
}
Szöveg cseréje egy karakterláncon belül A helyettesítő() függvénnyel
A szintaxis a csere() függvény így néz ki:
cserélje ki(húr, minta, csere, zászlókat)
húr azt a karakterláncot jelöli, amelyben keresni és lecserélni szeretne. minta a keresendő karakterlánc. minta lehet reguláris kifejezés is, de általában egy karakterlánc. Sikeres egyezés után a Less CSS fordító ezt helyettesíti minta a... val csere.
Opcionálisan a csere() függvény is tartalmazhatja a zászlókat paraméter a reguláris kifejezés jelzőihez.
@húr: "Helló";
@minta: "helló";
@csere: "én";
div::előtt{
tartalom: cserélje ki(@húr,@minta,@csere)
}
A fenti kódblokk a következőt eredményezi a fordítás után:
div::előtt {
tartalom: "Szia";
}
Funkciók listázása kevesebb CSS-ben
A Kevesebb CSS-ben vesszőket vagy szóközöket használ az értékek listájának meghatározásához. Például:
@élelmiszerboltok: "kenyér", "banán", "burgonya", "tej";
Használhatja a hossz() függvény a lista elemeinek számának kiértékeléséhez.
@eredmény: hossz(@élelmiszer);
Használhatja továbbá a kivonat() függvény egy adott pozíció értékének kinyeréséhez. Például, ha szeretné megszerezni a harmadik elemet a élelmiszerek listában a következőket kell tennie:
@harmadik elem: kivonat(@élelmiszer, 3);
A hagyományos programozási nyelvekkel ellentétben, ahol a listaindex 0-tól kezdődik, a Kevesebb CSS-ben a lista kezdőindexe mindig 1.
Egy másik listafunkció, amely hasznos lehet webhelyek készítésénél a Less segítségével, a hatótávolság() funkció. Három paramétert vesz igénybe. Az első paraméter a tartomány kezdőpozícióját adja meg. A második paraméter a végpozíciót, az utolsó paraméter pedig a tartomány egyes elemei közötti növekedési vagy csökkentési értéket adja meg. Ha nincs megadva, az alapértelmezett érték 1.
div {
margó: tartomány (10px, 40px, 10);
}
A fenti kódblokkot a következőkre kell fordítani:
div {
margó: 10px 20px 30px 40px;
}Mint látható, a Less CSS fordító 10 képpontról indul, 10-el növelve az előző értéket, amíg el nem éri a végpozíciót (40 képpont).
Egyszerű webhely készítése kevesebb CSS-funkcióval
Itt az ideje, hogy összegyűjtse mindazt, amit tanult, és létrehozzon egy egyszerű projektet a Less CSS segítségével. Hozzon létre egy mappát, és adja hozzá index.htm és stílus.kevésbé fájlokat.
Nyissa meg a index.htm fájlt, és adja hozzá a következő HTML-kódot.
html>
<htmllang="en">
<fej>
<metakarakterkészlet="UTF-8">
<metanév="nézőablak"tartalom="szélesség = eszköz szélessége, kezdeti méret = 1,0">
<linkrel="stíluslap/kevesebb"típus="text/css"href="stílus nélküli" />
<cím>Dokumentumcím>
fej>
<test>
<divosztály="tartály">
<h1>
h1>
div>
<forgatókönyvsrc=" https://cdn.jsdelivr.net/npm/less" >forgatókönyv>
test>
html>
A fenti kódblokkban van egy szülő "tartály"div egy üres h1 elem. A src attribútum a forgatókönyv címke a Less CSS Compiler elérési útjára mutat.
e nélkül forgatókönyv címke, a böngésző nem fogja tudni megérteni a kódot. Alternatív megoldásként telepítheti a Less CSS-t számítógépére a következőn keresztül Node Package Manager (NPM), a következő parancs futtatásával a terminálban:
npm telepítés -g kevesebb
Amikor készen áll a fordításra .Kevésbé fájlt, egyszerűen futtassa az alábbi parancsot, ügyelve arra, hogy megadja azt a fájlt, amelybe a fordító a kimenetet írja.
lessc style.less style.css
Ban,-ben stílus.kevésbé fájlt, hozzon létre két változót, nevezetesen: konténer-szélesség és konténer-bg-szín hogy ábrázolja a szélességét és a háttérszínét "tartály"div illetőleg.
@container-width: 50 rem;
@container-bg-color: sárga;
Ezután hozzon létre három változót, nevezetesen: húr, minta, és csere. Ezután adja hozzá a stílusokat a "tartály"div és a h1 elem.
@húr: – Üdvözlet a Föld bolygó gyermekeitől!;
@minta: "A Föld bolygó gyermekei!";
@csere: "Plútó lakói!";.tartály{
szélesség: @container-width;
háttérszín: @container-bg-color;
párnázás: ha(@container-width > 30 rem, hatótávolság(20 képpont, 80 képpont, 20),"");
határ: szilárd;
}
h1:első gyerek::után{
tartalom: cserélje ki(@húr,@minta,@csere);
}
A fenti kódblokkban a hatótávolság() függvény beállítja a párnázás ingatlan a "tartály"div. A Less fordítónak le kell fordítania a stílus.kevésbé fájlba a következőbe:
.tartály {
szélesség: 50rem;
háttérszín: sárga;
párnázás: 20px 40px 60px 80px;
határ: szilárd;
}
h1:első gyerek::után {
tartalom: "Hellótól tőlalakosoknak,-nekPlútó!";
}
Amikor kinyitod a index.htm fájlt a böngészőben, ezt kell látnia:
Növelje termelékenységét CSS-előfeldolgozókkal
A normál programozási nyelvekben a függvények csökkentik az írandó kód mennyiségét és minimalizálják a hibákat. A CSS-előfeldolgozók, mint például a Less, számos olyan funkciót biztosítanak, amelyek megkönnyítik a CSS-kód írását.
A CSS-előfeldolgozók jól jöhetnek, ha nagy fájlokkal dolgozunk. Könnyebbé teszik a problémák hibakeresését, ezáltal javítják a fejlesztő termelékenységét.