Home-theater-designers
Less CSS je robusten in dinamičen predprocesor CSS, ki je v zadnjih letih pritegnil veliko pozornosti in priljubljenosti. Kot predprocesor služi kot razširitev »Vanilla CSS«, tradicionalnega slogovnega jezika CSS, ki se uporablja v spletnem razvoju, z zagotavljanjem niza dodatnih funkcij in funkcionalnosti, ki izboljšajo celotno izkušnjo sloga.
MUO video dneva POMIKITE SE ZA NADALJEVANJE Z VSEBINO
Če ste dobro seznanjeni s pisanjem standardnega CSS, lahko nemoteno preidete na uporabo Less CSS brez strme krivulje učenja. Ta združljivost olajša vzdrževanje obstoječega znanja o CSS, hkrati pa izkorišča napredne zmogljivosti Less.
Kaj so funkcije in zakaj so pomembne?
V programiranju je funkcija blok kode, ki izvaja določeno nalogo. Uporabite ga lahko tudi nekje drugje v programu. Funkcije običajno sprejmejo podatke, jih obdelajo in vrnejo rezultate.
Omogočajo preprosto zmanjšanje podvojene kode v programu. Na primer, recimo, da imate program, ki izračuna popust na podlagi cene, ki jo uporabnik vnese. V jezik, kot je JavaScript , bi ga lahko implementirali takole:
function checkDiscount(price, threshold){
if (price >= threshold){
let discount = 5/100 * price;
return `Your discount is $${discount}`;
} else {
return `Sorry, this item does not qualify for a discount. `
}
}
Nato lahko pokličete funkcijo in posredujete cena in prag .
let price = prompt("Enter the item price: ")
alert(checkDiscount(price, 500))
Z abstrahiranjem logike za preverjanje popustov program ni le berljiv, ampak imate zdaj ponovno uporabljiv blok kode, ki obdela popust in vrne rezultat. Funkcije lahko naredijo še veliko več, a to so le osnove.
Razumevanje funkcij v manj CSS
V tradicionalnem CSS je kot razvijalec na voljo zelo omejen nabor funkcij. Ena najbolj priljubljenih funkcij v CSS je izračun() matematična funkcija ki naredi točno to, kar se zdi – izvaja izračune in uporablja rezultat kot vrednost lastnosti v CSS.
katera generacija je najnovejši ipad
p{
background-color: red;
width: calc(13px - 4px);
}
V Less CSS obstaja več funkcij, ki opravljajo več kot le aritmetične operacije. Ena funkcija, na katero lahko naletite v Lessu, je če funkcijo. The če funkcija ima tri parametre: pogoj in dve vrednosti. Spodnji blok kode prikazuje, kako lahko uporabite to funkcijo:
@width: 10px;
@height: 20px;
div{
margin:if((@width > @height), 10px, 20px)
}
V zgornjem bloku kode prevajalnik Less preveri, ali spremenljivka premer (opredeljeno z @ simbol) je večji od spremenljivke višina . Če je pogoj resničen, funkcija vrne prvo vrednost za pogojem (10px). V nasprotnem primeru funkcija vrne drugo vrednost (20px).
Po prevajanju bi moral izhod CSS izgledati nekako takole:
div {
margin: 20px;
}
Kako uporabiti logično vrednost v Less
Logična vrednost je spremenljivka, ki ima dve možni vrednosti: prav oz lažno . z boolean() funkcijo v Less, lahko shranite resnično ali napačno vrednost izraza v spremenljivko za kasnejšo uporabo. Evo, kako to deluje.
@text-color: red;
@bg-color: boolean(@text-color = red);
V zgornjem bloku kode prevajalnik Less preveri, če barva besedila je rdeča. Potem, bg-barva spremenljivka shrani vrednost.
notepad ++ primerja dve datoteki
div{
background-color: if(@bg-color,green,yellow);
}
Zgornji blok kode se prevede v nekaj takega:
div {
background-color: green;
}
Zamenjava besedila znotraj niza s funkcijo replace().
Sintaksa za zamenjati() funkcija izgleda takole:
replace(string, pattern, replacement, flags)
vrvica predstavlja niz, v katerem želite iskati in zamenjati. vzorec je niz za iskanje. vzorec je lahko tudi regularni izraz, vendar je običajno niz. Po uspešnem ujemanju to zamenja prevajalnik Less CSS vzorec z zamenjava .
Po želji, zamenjati() funkcija lahko vsebuje tudi zastave parameter za zastavice regularnega izraza.
@string: "Hello";
@pattern: "ello";
@replacement: "i";
div::before{
content: replace(@string,@pattern,@replacement)
}
Zgornji blok kode bi moral po prevajanju dati naslednje:
div::before {
content: "Hi";
}
Seznam funkcij v manj CSS
V Less CSS uporabite vejice ali presledke za določanje seznama vrednosti. Na primer:
@groceries: "bread", "banana", "potato", "milk";
Lahko uporabite dolžina() funkcija za ovrednotenje števila elementov na seznamu.
@result: length(@groceries);
Uporabite lahko tudi ekstrakt () funkcija za ekstrahiranje vrednosti na določenem mestu. Na primer, če želite dobiti tretji element v živila seznam, storite naslednje:
@third-element: extract(@groceries, 3);
Za razliko od običajnih programskih jezikov, kjer se indeks seznama začne z 0, je začetni indeks seznama v Less CSS vedno 1.
Druga funkcija seznama, ki bi lahko prišla prav pri gradnji spletnih mest z Lessom, je obseg() funkcijo. Zajema tri parametre. Prvi parameter določa začetni položaj v območju. Drugi parameter označuje končno pozicijo, zadnji parameter pa vrednost prirastka ali zmanjšanja med vsakim elementom v obsegu. Če ni podana, je privzeta vrednost 1.
div {
margin: range(10px, 40px, 10);
}
Zgornji blok kode bi se moral sestaviti v naslednje:
div {
margin: 10px 20px 30px 40px;
}
Kot lahko vidite, prevajalnik Less CSS začne od 10px, poveča prejšnjo vrednost za 10, dokler ne doseže končnega položaja (40px).
Izdelava preprostega spletnega mesta z manj funkcijami CSS
Čas je, da združite vse, kar ste se naučili, in ustvarite preprost projekt z manj CSS. Ustvarite mapo in dodajte index.htm in stil.manj datoteke.
Odprite index.htm in dodajte naslednjo kodo HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="style.less" />
<title>Document</title>
</head>
<body>
<div class="container">
<h1>
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/less" ></script>
</body>
</html>
V zgornjem kodnem bloku je nadrejeni element 'posoda' div s praznim h1 element. The src atribut na scenarij kaže na pot do prevajalnika Less CSS.
Brez tega scenarij brskalnik ne bo mogel razumeti vaše kode. Druga možnost je, da namestite Less CSS na svoj računalnik prek Node Package Manager (NPM) , tako da v terminalu zaženete naslednji ukaz:
npm install -g less
Kadarkoli ste pripravljeni prevesti .manj preprosto zaženite spodnji ukaz in se prepričajte, da ste določili datoteko, v katero naj prevajalnik zapiše izhod.
kam gredo posnetki zaslona na mac
lessc style.less style.css
V stil.manj datoteko, ustvarite dve spremenljivki, in sicer: širina posode in kontejner-bg-barva za predstavitev širine in barve ozadja 'posoda' div oz.
@container-width: 50rem;
@container-bg-color: yellow;
Nato ustvarite tri spremenljivke, in sicer: vrvica , vzorec, in zamenjava . Nato dodajte sloge za 'posoda' div in h1 element.
@string: "Hello from the children of planet Earth!";
@pattern: "children of planet Earth!";
@replacement: "inhabitants of Pluto!";
.container{
width: @container-width;
background-color: @container-bg-color;
padding: if(@container-width > 30rem, range(20px, 80px, 20),"");
border: solid;
}
h1:first-child::after{
content: replace(@string,@pattern,@replacement);
}
V zgornjem bloku kode je obseg() funkcija nastavi oblazinjenje lastnina na 'posoda' div . Prevajalnik Less bi moral prevesti stil.manj datoteko v naslednje:
.container {
width: 50rem;
background-color: yellow;
padding: 20px 40px 60px 80px;
border: solid;
}
h1:first-child::after {
content: "Hello from the inhabitants of Pluto!";
}
Ko odprete index.htm datoteke v brskalniku, bi morali videti tole:
Izboljšajte svojo produktivnost s predprocesorji CSS
V običajnih programskih jezikih funkcije zmanjšajo količino kode, ki jo morate napisati, in minimizirajo napake. Predprocesorji CSS, kot je Less, ponujajo več funkcij, ki olajšajo pisanje kode CSS.
Predprocesorji CSS pridejo prav pri delu z velikimi datotekami. Omogočajo lažje odpravljanje napak in s tem izboljšajo produktivnost razvijalca.