Mis on vähem CSS-i ja kuidas seda kasutada?

Kui olete kogenud CSS-i arendaja, olete keele puudustest hästi teadlik. Sellel puudub endiselt laialdane tugi kaua taotletud funktsioonidele, nagu pesastamine ja segud.

Less (Leaner Style Sheets) on paljude võimsate funktsioonidega CSS-i laiendus. Kui tead CSS-i, on Lessi õppimine lihtne, kuna Lessi süntaks on väga sarnane.

Kuidas installida vähem

Saate installida rakendusega Less JavaScripti paketihaldur, NPM joostes:

npm installi vähem -g

Pärast installimist saate kompileerida .vähem failid .css kasutades vähemc käsk. Näiteks kompileerib järgmine käsk stiil.vähem ja väljastab tulemused a stiil.css faili.

lessc style.less style.css

Muutujad in Less

Erinevalt tavaline CSS, mis kasutab muutujate määratlemiseks operaatorit "--"., Less määratleb muutujad, kasutades sümbolit "@". Näiteks:

@width:40 pikslit;
@kõrgus:80 pikslit;

Koodiplokk loob lihtsalt kaks muutujat, laiuse ja kõrguse, millel on vastavalt kaks väärtust: 40px ja 80px. Tavapärane on võtta CSS-is tavaliselt kasutatavad väärtused ja salvestada need muutujasse. See muudab nende väärtuste muutmise lihtsamaks, kuna on ainult üks kontrolliallikas.

Siit saate teada, kuidas saate Lessis muutujaid kasutada. Loo an index.htm fail ja lisage järgmine kood:

html>
<htmllang="en">
<pea>
<metamärgistik="UTF-8">
<metahttp-ekv="X-UA-ühilduv"sisu="IE = serv">
<metanimi="vaateava"sisu="laius = seadme laius, esialgne skaala = 1,0">
<linkrel="laadileht"href="stiil.css">
<pealkiri>Kasutades vähem CSS-ipealkiri>
pea>
<keha>
<div>
 Tere planeedi Maa laste poolt!
div>
keha>
html>

Järgmisena looge a stiil.vähem faili ja lisage järgmine:

@width:400 pikslit;
@kõrgus:400 pikslit;
@vertical-center: Keskus;
@txt-white: valge;
@bg-red: rgb(220, 11, 11);
@font-40:40 pikslit;
div {
laius: @laius;
kõrgus: @kõrgus;
kuva: flex;
värvi: @txt-valge;
taustavärv: @bg-punane;
fondi suurus: @font-40;
}

Nüüd, kui saate koostada .vähem faili .css kasutades vähemc käsk:

lessc style.less style.css

Kompileeritud CSS peaks välja nägema järgmine:

div {
laius: 400px;
kõrgus: 400px;
kuva: painduv;
värvi: valge;
taustavärv: #dc0b0b;
fondi suurus: 40px;
}

Kui avate oma brauseri, peaksite nägema järgmist:

Muutujatega Less saate teha palju rohkem, näiteks interpoleerimine, mis võimaldab kasutada muutujaid valijanimede, URL-ide ja muuna. Siin on näide muutuja interpolatsiooni rakendamisest:

@kohandatud valija: konteiner;
.@{custom-selector} {
polsterdus: 10 pikslit;
marginaal: 10 pikslit;
piir: tahke 10 pikslit;
}

Ülaltoodud koodiplokk kasutab @{...} klausel muutuja kasutamiseks valijana. Koostamisel annab kood järgmise tulemuse:

.konteiner{
polsterdus: 10px;
marginaal: 10px;
piir: tahke 10px;
}

Aritmeetilised tehted vähemaga

Less toetab ka aritmeetilisi toiminguid, nagu liitmine, lahutamine, jagamine ja korrutamine. Need toimingud töötavad konstantide, väärtuste ja muutujatega.

@muutuja-1:5 pikslit;
// Korrutamine Toiming muutuja ja konstandi vahel
@muutuja-2:@muutuja-1 * 2
// Väärtuse ja muutuja vahelise liitmise operatsioon.
@muutuja-3:10 pikslit + @muutuja-2

Kuidas segusid kasutada

Mixins võimaldab teil stiile (või CSS-koodi) kogu laaditabeli ulatuses uuesti kasutada. muud CSS-i laiendused nagu Sass pakkuda ka Mixine. Et illustreerida, kuidas mixinid rakenduses Less töötavad, looge index.htm ja lisage järgmine kood:

html>
<htmllang="en">
<pea>
<metamärgistik="UTF-8">
<metahttp-ekv="X-UA-ühilduv"sisu="IE = serv">
<metanimi="vaateava"sisu="laius = seadme laius, esialgne skaala = 1,0">
<linkrel="laadileht"href="stiil.css">
<pealkiri>Kasutades vähem CSS-ipealkiri>
pea>
<keha>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing eliit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, guessnda reiciendis
 facilis unde sequi.
div>
<lk>
 Lorem ipsum dolor sit amet, consectetur adipisicing eliit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, guessnda reiciendis
 facilis unde sequi.
lk>
<lk>
 Lorem ipsum dolor sit amet, consectetur adipisicing eliit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, guessnda reiciendis
 facilis unde sequi.
lk>
keha>
html>

Järgmisena looge a stiil.vähem faili ja lisage järgmised read:

.näidistekst() {
taustavärv: kollane;
}
.esimene täht() {
taustavärv: punane;
värvi: valge;
fondi suurus: 30 pikslit;
}
lk {
.näidistekst();
}
lk::esimene täht {
.esimene täht();
}

Ülaltoodud koodiplokis on kaks segamisklassi: .näidistekst ja .esimene täht. Kui soovite stiililehe mõnes muus osas mixini kasutada, viidake sellele lihtsalt nime järgi koos sulgudega lõpus: .mixin(). Brauseris peaksite nägema midagi sellist:

Stiil Pesastus vähemas

Oletame, et teil on ülem-div, mille alamelement on kaks: a lk element ja teine div. Tavaliselt, kui soovite stiili kujundada lk element, mille värv on punane ja div rohelise värviga elemente, võite kasutada järgmist lähenemist:

divlk {
värvi: punane;
}
div {
värvi: roheline
}

Less pakub sarnaseid funktsioone kasutades pesitsemine. Sel juhul oleks ülaltoodud koodiploki vähem ekvivalent:

div {
värvi: roheline;
lk {
värvi: punane;
 }
}

Sellega pole mitte ainult lihtsam pea ümber mähkida, vaid see muudab koodi ka paremini hooldatavaks. Vanemavalijatele vähemaga viitamine on rakendusega lihtsam & operaator. Näiteks:

nuppu {
taustavärv: sinine;
piir: puudub;
&:hõljuma {
taustavärv: hall;
teisendada: kaal(1.2);
 }
}

Ülaltoodud koodiplokk annab koostamisel järgmise CSS-koodi:

nuppu {
taustavärv: sinine;
piir: mitte ühtegi;
}
nuppu:hõljuma {
taustavärv: hall;
teisendada: kaal(1.2);
}

Reguleerimisala ja funktsioonide mõistmine vähemaga

Nagu tavalistel programmeerimiskeeltel, on muutujatel selle ploki ulatus, milles te need määratlete. Selle illustreerimiseks looge uus index.htm faili ja lisage esimene varem pakutud HTML-i standardkood. Seejärel lisage järgmine plokk keha silt:

<divklass="välimine-div">
 Outer Div peaks olema punane.
<br />
<ulatusklass="sisemine-div">
 Sisemine osa peaks olema roheline.
ulatus>
div>

Aastal stiil.vähem faili, lisage järgmised read:

@bg-värv: punane;
keha {
fondi suurus: 40 pikslit;
värvi: valge;
marginaal: 20 pikslit;
}
.inner-div {
@bg-värv: roheline;
taustavärv: @bg-värv;
}
.outer-div {
taustavärv: @bg-värv;
}

The sisemine-div plokk määratleb uuesti bg-värv muutuja, mis on suunatud just sellele plokile. Seega kehtib roheline värv ainult selle klassi kohta ega mõjuta globaalset bg-värv muutuv. Kui kompileerite ja avate tulemuse brauseris, peaksite nägema järgmist:

Less pakub ka käepäraseid funktsioone, mis võivad mõne stsenaariumi korral kasulikud olla. Näiteks kui soovite määrata stiili ainult siis, kui teatud tingimus on täidetud, saate seda teha kui funktsiooni. Sellel funktsioonil on järgmine süntaks:

kui((seisukord), väärtus1, väärtus2)

Kood naaseb väärtus1 kui tingimus on täidetud ja väärtus2 muidu. Siin on näide:

@var1:20 pikslit;
@var2:20 pikslit;
div {
polsterdus: kui((@var1 = @var2), 10 pikslit, 20 pikslit);
}

Ülaltoodud koodiplokk peaks koostamisel andma järgmise CSS-i:

div {
polsterdus: 10px;
}

Tehke vähema ja muude CSS-i laiendustega rohkem

Tuhanded arendajad kasutavad Lessi, et muuta CSS-i kirjutamine pisut nauditavaks. Hämmastavad funktsioonid, nagu funktsioonid, segud ja muutujad, on vaid väike osa Lessi pakutavast.

Less sobib nii väikeste kui ka suurte projektide jaoks. Väärib märkimist, et ka teisi sama hämmastavaid CSS-i laienduskeeli, nagu Sass ja Stylus CSS, tasub vaadata.