Funkcijos žymiai supaprastina jūsų programavimo patirtį, ir tai galioja ir rašant CSS kodą.
Less CSS yra tvirtas ir dinamiškas CSS pirminis procesorius, kuris pastaraisiais metais sulaukė didelio dėmesio ir populiarumo. Kaip išankstinis procesorius, jis naudojamas kaip „Vanilla CSS“, tradicinės CSS stiliaus kalbos, naudojamos žiniatinklyje, plėtinys. plėtra, suteikdama daugybę papildomų funkcijų ir funkcijų, kurios pagerina bendrą stilių patirtį.
Jei gerai mokate rašyti standartinį CSS, galite sklandžiai pereiti prie mažiau CSS naudojimo be staigios mokymosi kreivės. Šis suderinamumas leidžia lengvai išlaikyti turimas CSS žinias, kartu išnaudojant pažangias Less galimybes.
Kas yra funkcijos ir kodėl jos svarbios?
Programavime funkcija yra kodo blokas, kuris atlieka konkrečią užduotį. Taip pat galite pakartotinai naudoti kur nors kitur programoje. Funkcijos paprastai priima duomenis, apdoroja juos ir grąžina rezultatus.
Jie leidžia lengvai sumažinti pasikartojantį kodą programoje. Pavyzdžiui, tarkime, kad turite programą, kuri apskaičiuoja nuolaidą pagal vartotojo įvestą kainą. A
tokia kalba kaip JavaScript, galite tai įgyvendinti taip:funkcijapatikrinti nuolaida(kaina, riba){
jeigu (kaina >= slenkstis){
leisti nuolaida = 5/100 *kaina;
grąžinti„Jūsų nuolaida yra $${nuolaida}`;
} Kitas {
grąžinti`Atsiprašome, ši prekė netaikoma nuolaidai. `
}
}
Tada galite iškviesti funkciją ir perduoti kaina ir slenkstis.
leisti kaina = greita(„Įveskite prekės kainą:“)
įspėjimas (patikrinkite Nuolaida (kaina, 500))
Atsisakius nuolaidų tikrinimo logikos, programa yra ne tik skaitoma, bet dabar turite daugkartinio naudojimo kodo bloką, kuris apdoroja nuolaidą ir grąžina rezultatą. Funkcijos gali padaryti daug daugiau, tačiau tai tik pagrindiniai dalykai.
Funkcijų supratimas naudojant mažiau CSS
Tradiciniame CSS jums, kaip kūrėjui, prieinamas labai ribotas funkcijų rinkinys. Viena iš populiariausių CSS funkcijų yra calc()math funkcija kuri daro būtent tai, kas atrodo – atlieka skaičiavimus ir naudoja rezultatą kaip nuosavybės vertę CSS.
p{
fono spalva: raudona;
plotis: skaičiuok(13px- 4px);
}
Mažiau CSS yra keletas funkcijų, kurios atlieka ne tik aritmetines operacijas. Viena funkcija, su kuria galite susidurti naudodami Less, yra jeigu funkcija. The jeigu funkcija turi tris parametrus: sąlygą ir dvi reikšmes. Toliau pateiktame kodo bloke parodyta, kaip galite naudoti šią funkciją:
@plotis: 10 piks;
@aukštis: 20 piks;
div{
marža:jei((@plotis > @aukštis), 10 piks, 20 piks)
}
Aukščiau esančiame kodo bloke Mažiau kompiliatorius patikrina, ar kintamasis plotis (apibrėžia @ simbolis) yra didesnis nei kintamasis aukščio. Jei sąlyga teisinga, funkcija grąžina pirmąją reikšmę po sąlygos (10 pikselių). Kitu atveju funkcija grąžina antrąją reikšmę (20 pikselių).
Po kompiliavimo CSS išvestis turėtų atrodyti maždaug taip:
div {
marža: 20px;
}
Kaip naudoti Būlio reikšmę mažiau
Būlis yra kintamasis, turintis dvi galimas reikšmes: tiesa arba klaidinga. Su loginis () funkcija Mažiau, galite išsaugoti tikrąją arba klaidingą išraiškos reikšmę kintamajame, kad galėtumėte naudoti vėliau. Štai kaip tai veikia.
@teksto spalva: raudona;
@bg-spalva: loginis(@teksto spalva = raudona);
Aukščiau esančiame kodo bloke Mažiau kompiliatorius patikrina, ar tekstas-spalva yra raudona. Tada bg spalvos kintamasis saugo reikšmę.
div{
fono spalva: jei(@bg-spalva,žalia, geltona);
}
Aukščiau pateiktas kodo blokas sukompiliuojamas taip:
div {
fono spalva: žalias;
}
Teksto pakeitimas eilutėje naudojant funkciją „replace()“.
Sintaksė, skirta pakeisti () funkcija atrodo taip:
pakeisti(styga, modelis, pakeitimas, vėliavos)
styga reiškia eilutę, kurią norite ieškoti ir kurioje norite pakeisti. modelis yra eilutė, kurios reikia ieškoti. modelis taip pat gali būti reguliarioji išraiška, bet dažniausiai tai yra eilutė. Po sėkmingo atitikimo Mažiau CSS kompiliatorius jį pakeičia modelis su pakeitimas.
Pasirinktinai, pakeisti () funkcijoje taip pat gali būti vėliavos parametras reguliariosios išraiškos vėliavėlėms.
@styga: "Sveiki";
@modelis: "labas";
@pakeitimas: "aš";
div::prieš{
turinys: pakeisti(@styga,@modelis,@pakeitimas)
}
Aukščiau pateiktas kodo blokas po kompiliavimo turėtų sukelti:
div::prieš {
turinys: "Sveiki";
}
Išvardykite funkcijas mažiau CSS
Naudodami Mažiau CSS, reikšmių sąrašui apibrėžti naudojate kablelius arba tarpus. Pavyzdžiui:
@bakalėjos prekės: "duona", "bananas", "bulvė", "pienas";
Galite naudoti ilgis () funkcija įvertinti elementų skaičių sąraše.
@rezultatas: ilgis(@bakalėjos prekės);
Taip pat galite naudoti ekstraktas () funkcija išgauti vertę tam tikroje pozicijoje. Pavyzdžiui, jei norite gauti trečiąjį elementą bakalėjos sąrašą, atlikite šiuos veiksmus:
@trečias elementas: ekstraktas(@bakalėjos prekės, 3);
Skirtingai nuo įprastų programavimo kalbų, kuriose sąrašo indeksas prasideda nuo 0, sąrašo pradžios indeksas, naudojant mažiau CSS, visada yra 1.
Kita sąrašo funkcija, kuri gali praversti kuriant svetaines naudojant Less diapazonas() funkcija. Tam reikia trijų parametrų. Pirmasis parametras nurodo pradinę padėtį diapazone. Antrasis parametras nurodo galutinę padėtį, o paskutinis parametras nurodo kiekvieno diapazono elemento padidėjimą arba mažinimą. Jei nenurodyta, numatytoji vertė yra 1.
div {
paraštė: diapazonas (10 piks., 40 piks., 10);
}
Aukščiau pateiktas kodo blokas turėtų būti sudarytas taip:
div {
paraštė: 10 piks. 20 piks. 30 piks. 40 piks.;
}Kaip matote, Mažiau CSS kompiliatorius pradeda nuo 10 pikselių, padidindamas ankstesnę reikšmę 10, kol pasiekia galutinę padėtį (40 pikselių).
Sukurkite paprastą svetainę su mažiau CSS funkcijų
Atėjo laikas sujungti viską, ko išmokote, ir sukurti paprastą projektą naudodami mažiau CSS. Sukurkite aplanką ir pridėkite index.htm ir stilius.mažiau failus.
Atidaryk index.htm failą ir pridėkite šį HTML kodą.
html>
<htmllang="en">
<galva>
<metasimbolių rinkinys="UTF-8">
<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1,0">
<nuorodarel="stiliaus lapas/mažiau"tipo="text/css"href="style.less" />
<titulą>dokumentastitulą>
galva>
<kūnas>
<divklasė="konteineris">
<h1>
h1>
div>
<scenarijussrc=" https://cdn.jsdelivr.net/npm/less" >scenarijus>
kūnas>
html>
Aukščiau esančiame kodo bloke yra tėvas "konteineris"div su tuščia h1 elementas. The src atributas ant scenarijus žyma nurodo kelią į mažiau CSS kompiliatorių.
Be šito scenarijus žymą, naršyklė negalės suprasti jūsų kodo. Arba savo kompiuteryje galite įdiegti Less CSS per Mazgo paketų tvarkyklė (NPM), vykdydami šią komandą terminale:
npm įdiegti -g mažiau
Kai būsite pasiruošę kompiliuoti .mažiau failą, tiesiog paleiskite žemiau esančią komandą ir įsitikinkite, kad nurodėte failą, į kurį kompiliatorius turėtų įrašyti išvestį.
lessc style.less style.css
Viduje stilius.mažiau failą, sukurkite du kintamuosius būtent: konteinerio plotis ir konteineris-bg-spalva vaizduoti plotį ir fono spalvą "konteineris"div atitinkamai.
@container-width: 50 rem;
@container-bg-color: geltona;
Tada sukurkite tris kintamuosius, būtent: styga, modelis, ir pakeitimas. Tada pridėkite stilius "konteineris"div ir h1 elementas.
@styga: „Sveiki nuo Žemės planetos vaikų!;
@modelis: "Žemės planetos vaikai!";
@pakeitimas: "Plutono gyventojai!";.konteineris{
plotis: @container-width;
fono spalva: @container-bg-color;
kamšalas: jeigu(@container-width > 30 rem, diapazonas(20 piks, 80 piks, 20),"");
siena: kietas;
}
h1:pirmas vaikas::po{
turinys: pakeisti(@styga,@modelis,@pakeitimas);
}
Aukščiau esančiame kodo bloke diapazonas() funkcija nustato kamšalas turtas ant "konteineris"div. Mažiau kompiliatorius turėtų kompiliuoti stilius.mažiau failą į šiuos:
.konteineris {
plotis: 50rem;
fono spalva: geltona;
kamšalas: 20px 40px 60px 80px;
siena: kietas;
}
h1:pirmas vaikas::po {
turinys: "SveikiišįgyventojųapiePlutonas!";
}
Kai atidarote index.htm failą naršyklėje, turėtumėte pamatyti štai ką:
Pagerinkite savo produktyvumą naudodami CSS pirminius procesorius
Įprastose programavimo kalbose funkcijos sumažina kodo, kurį reikia parašyti, kiekį ir sumažina klaidas. CSS pirminiai procesoriai, tokie kaip Less, suteikia keletą funkcijų, kurios palengvina CSS kodo rašymą.
CSS pirminiai procesoriai praverčia dirbant su dideliais failais. Jie palengvina problemų derinimą ir taip pagerina kūrėjo produktyvumą.