Kas yra mažiau CSS ir kaip jį naudoti?

Jei esate patyręs CSS kūrėjas, puikiai žinosite kalbos trūkumus. Jame vis dar trūksta plataus palaikymo ilgai prašomoms funkcijoms, tokioms kaip lizdas ir mišiniai.

Less (Leaner Style Sheets) yra CSS plėtinys su daugybe galingų funkcijų. Jei žinote CSS, išmokti Less yra lengva, nes Less sintaksė yra labai panaši.

Kaip įdiegti mažiau

Galite įdiegti Less su „JavaScript“ paketų tvarkyklė, NPM bėgant:

npm įdiegti mažiau -g

Įdiegę galite kompiliuoti .mažiau failus į .css naudojant mažiauc komandą. Pavyzdžiui, sukompiliuojama ši komanda stilius.mažiau ir išveda rezultatus į a stilius.css failą.

lessc style.less style.css

Kintamieji mažiau

Skirtingai nei įprastas CSS, kuris naudoja „--“ operatorių kintamiesiems apibrėžti, Less apibrėžia kintamuosius naudodami simbolį „@“. Pavyzdžiui:

@width:40 piks;
@aukštis:80 piks;

Kodo blokas tiesiog sukuria du kintamuosius, plotį ir aukštį, kurie atitinkamai turi dvi reikšmes: 40 pikselių ir 80 pikselių. Įprasta naudoti CSS dažniausiai naudojamas vertes ir saugoti jas kintamajame. Tai leidžia lengviau keisti tas reikšmes, nes yra tik vienas valdymo šaltinis.

Štai kaip galite naudoti kintamuosius Less. Sukurti an index.htm failą ir pridėkite šį pagrindinį kodą:

html>
<htmllang="en">
<galva>
<metasimbolių rinkinys="UTF-8">
<metahttp-equiv=„Suderinamas su X-UA“turinys="IE = kraštas">
<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1,0">
<nuorodarel="stiliaus lapas"href="stilius.css">
<titulą>Mažiau CSS naudojimastitulą>
galva>
<kūnas>
<div>
 Sveiki nuo Žemės planetos vaikų!
div>
kūnas>
html>

Tada sukurkite a stilius.mažiau failą ir pridėkite:

@width:400 piks;
@aukštis:400 piks;
@vertikalus centras: centras;
@txt-white: baltas;
@bg-red: rgb(220, 11, 11);
@font-40:40 piks;
div {
plotis: @plotis;
aukščio: @aukštis;
ekranas: lankstus;
spalva: @txt-white;
fono spalva: @bg-red;
šrifto dydis: @font-40;
}

Dabar, kai galite sudaryti .mažiau failą į .css naudojant mažiauc komanda:

lessc style.less style.css

Sudarytas CSS turėtų atrodyti taip:

div {
plotis: 400px;
aukščio: 400px;
ekranas: lankstus;
spalva: baltas;
fono spalva: #dc0b0b;
šrifto dydis: 40px;
}

Kai atidarote naršyklę, turėtumėte pamatyti štai ką:

Yra daug daugiau, ką galite padaryti naudodami kintamuosius, pvz., interpoliaciją, kuri leidžia naudoti kintamuosius kaip parinkiklio pavadinimus, URL adresus ir kt. Štai pavyzdys, kaip įgyvendinti kintamąjį interpoliavimą:

@custom-selector: konteineris;
.@{custom-selector} {
kamšalas: 10 piks;
marža: 10 piks;
siena: kietas 10 piks;
}

Aukščiau pateiktame kodo bloke naudojama @{...} sąlygą naudoti kintamąjį kaip parinkiklį. Sukūrus kodą, bus taip:

.konteineris{
kamšalas: 10px;
marža: 10px;
siena: kietas 10px;
}

Aritmetiniai veiksmai mažiau

Less taip pat palaiko aritmetines operacijas, tokias kaip sudėtis, atimtis, dalyba ir daugyba. Šios operacijos veikia su konstantomis, reikšmėmis ir kintamaisiais.

@kintamasis-1:5 piks;
// Daugyba Operacija tarp kintamojo ir konstantos
@kintamasis-2:@kintamasis-1 * 2
// Sudėjimo tarp reikšmės ir kintamojo operacija.
@kintamasis-3:10 piks + @kintamasis-2

Kaip naudoti mišinius

„Mixins“ leidžia pakartotinai naudoti stilius (arba CSS kodą) visame stiliaus lape. Kita CSS plėtiniai, tokie kaip Sass taip pat siūlome Mixins. Norėdami iliustruoti, kaip „Mixins“ veikia „Less“, sukurkite index.htm ir pridėkite šį kodą:

html>
<htmllang="en">
<galva>
<metasimbolių rinkinys="UTF-8">
<metahttp-equiv=„Suderinamas su X-UA“turinys="IE = kraštas">
<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1,0">
<nuorodarel="stiliaus lapas"href="stilius.css">
<titulą>Mažiau CSS naudojimastitulą>
galva>
<kūnas>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, guessnda reiciendis
 facilis unde sequi.
div>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, guessnda reiciendis
 facilis unde sequi.
p>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, guessnda reiciendis
 facilis unde sequi.
p>
kūnas>
html>

Tada sukurkite a stilius.mažiau failą ir pridėkite šias eilutes:

.teksto pavyzdys() {
fono spalva: geltona;
}
.pirmoji raidė() {
fono spalva: raudona;
spalva: baltas;
šrifto dydis: 30 piks;
}
p {
.teksto pavyzdys();
}
p::pirmoji raidė {
.pirmoji raidė();
}

Aukščiau esančiame kodo bloke yra dvi maišymo klasės: .teksto pavyzdys ir .pirmoji raidė. Jei norite naudoti mixin kitoje stiliaus lapo dalyje, tiesiog nurodykite jį pavadinimu su skliaustais pabaigoje: .mixin(). Naršyklėje turėtumėte pamatyti kažką panašaus:

Stilius „Nesting in Less“.

Tarkime, kad turite pirminį div, kurio antriniai elementai yra du: a p elementas ir kitas div. Paprastai, jei norite sukurti stilių p elementas su raudona spalva ir div elementai su žalia spalva, galite naudoti šį metodą:

divp {
spalva: raudona;
}
div {
spalva: žalias
}

Mažiau suteikia panašias funkcijas naudojant lizdus. Taigi šiuo atveju mažesnis aukščiau pateikto kodo bloko atitikmuo būtų:

div {
spalva: žalias;
p {
spalva: raudona;
 }
}

Taip ne tik lengviau apsisukti galvą, bet ir kodą lengviau prižiūrėti. Paprasčiau nurodyti tėvų parinkiklius naudojant mažiau & operatorius. Pavyzdžiui:

mygtuką {
fono spalva: mėlyna;
siena: nė vienas;
&:užveskite pelės žymeklį {
fono spalva: pilka;
transformuoti: skalė(1.2);
 }
}

Aukščiau pateiktas kodo blokas sudarys tokį CSS kodą:

mygtuką {
fono spalva: mėlyna;
siena: nė vienas;
}
mygtuką:užveskite pelės žymeklį {
fono spalva: pilka;
transformuoti: skalė(1.2);
}

Suprasti taikymo sritį ir funkcijas mažiau

Kaip ir įprastos programavimo kalbos, kintamieji turi bloko, kuriame juos apibrėžiate, apimtį. Norėdami tai iliustruoti, sukurkite naują index.htm failą ir pridėkite pirmąjį anksčiau pateiktą HTML pagrindinį kodą. Tada pridėkite šį bloką kūnas žyma:

<divklasė="išorinis padas">
 Outer Div turi būti raudona.
<br />
<spanklasė="vidinis padas">
 Vidinis skyrelis turi būti žalias.
span>
div>

Viduje stilius.mažiau failą, pridėkite šias eilutes:

@bg-spalva: raudona;
kūnas {
šrifto dydis: 40 piks;
spalva: baltas;
marža: 20 piks;
}
.vidinis-div {
@bg-spalva: žalias;
fono spalva: @bg-spalva;
}
.outer-div {
fono spalva: @bg-spalva;
}

The vidinis-div blokas iš naujo apibrėžia bg spalvos kintamasis, skirtas tik tam blokui. Taigi žalia spalva taikoma tik tai klasei ir neturi įtakos pasaulinei bg spalvos kintamasis. Kai sukompiliuojate ir atidarote rezultatą naršyklėje, turėtumėte pamatyti štai ką:

Less taip pat suteikia patogių funkcijų, kurios gali būti naudingos kai kuriais atvejais. Pavyzdžiui, jei norite nustatyti stilių tik tada, kai įvykdoma tam tikra sąlyga, galite tai padaryti naudodami jeigu funkcija. Ši funkcija turi tokią sintaksę:

jeigu((būklė), vertė1, vertė2)

Kodas grįžta vertė1 jeigu sąlyga įvykdoma ir vertė2 kitaip. Štai pavyzdys:

@var1:20 piks;
@var2:20 piks;
div {
kamšalas: jei((@var1 = @var2), 10 piks, 20 piks);
}

Sudarius aukščiau pateiktą kodo bloką, turėtų būti gautas toks CSS:

div {
kamšalas: 10px;
}

Atlikite daugiau su mažiau ir kitais CSS plėtiniais

Tūkstančiai kūrėjų naudoja Less, kad CSS rašymas būtų malonus. Nuostabios funkcijos, tokios kaip funkcijos, deriniai ir kintamieji, yra tik maža dalis to, ką siūlo Less.

Mažiau tinka tiek mažiems, tiek dideliems projektams. Verta paminėti, kad verta patikrinti kitas ne mažiau nuostabias CSS plėtinių kalbas, tokias kaip Sass ir Stylus CSS.