Kā izmantot funkcijas mazāk CSS

Less CSS ir spēcīgs un dinamisks CSS priekšprocesors, kas pēdējos gados ir izpelnījies ievērojamu uzmanību un popularitāti. Kā priekšapstrādātājs tas kalpo kā "Vanilla CSS" paplašinājums, tradicionālā CSS stila valoda, ko izmanto tīmeklī. izstrāde, nodrošinot virkni papildu funkciju un funkcionalitātes, kas uzlabo vispārējo stilu pieredze.

Ja esat labi pārzinājis standarta CSS rakstīšanu, varat nemanāmi pāriet uz mazāk CSS izmantošanu bez straujas mācīšanās līknes. Šī saderība ļauj ērti uzturēt esošās CSS zināšanas, vienlaikus izmantojot Less uzlabotās iespējas.

Kas ir funkcijas un kāpēc tās ir svarīgas?

Programmēšanā funkcija ir koda bloks, kas veic noteiktu uzdevumu. Varat arī to atkārtoti izmantot kaut kur citur programmā. Funkcijas parasti uzņem datus, apstrādā tos un atgriež rezultātus.

Tie ļauj viegli samazināt dublikātu kodu programmā. Piemēram, pieņemsim, ka jums ir programma, kas aprēķina atlaidi, pamatojoties uz lietotāja ievadīto cenu. Iekšā

valoda, piemēram, JavaScript, jūs to varētu īstenot šādi:

funkcijupārbaudietAtlaide(cena, slieksnis){
ja (cena >= slieksnis){
ļaut atlaide = 5/100 * cena;
atgriezties`Jūsu atlaide ir $${atlaide}`;
 } cits {
atgriezties`Atvainojiet, šī prece nepretendē uz atlaidi. `
 }
}

Pēc tam varat izsaukt funkciju un ievadīt cena un slieksnis.

ļaut cena = prompt("Ievadiet preces cenu:")
brīdinājums (pārbaudītAtlaide (cena, 500))

Abstrahējot atlaižu pārbaudes loģiku, programma ir ne tikai lasāma, bet tagad jums ir atkārtoti lietojams koda bloks, kas apstrādā atlaidi un atgriež rezultātu. Funkcijas var darīt daudz vairāk, taču tas ir tikai pamats.

Funkciju izpratne mazāk CSS

Tradicionālajā CSS jums kā izstrādātājam ir pieejams ļoti ierobežots funkciju kopums. Viena no populārākajām CSS funkcijām ir calc()math funkcija kas dara tieši to, kā šķiet — veic aprēķinus un izmanto rezultātu kā īpašuma vērtību CSS.

lpp{
fona krāsa: sarkans;
platums: aprēķins(13px- 4px);
}

Programmā Less CSS ir vairākas funkcijas, kas veic vairāk nekā tikai aritmētiskas darbības. Viena funkcija, ar kuru jūs varat saskarties, izmantojot Less, ir ja funkciju. The ja funkcijai ir trīs parametri: nosacījums un divas vērtības. Tālāk redzamais koda bloks parāda, kā varat izmantot šo funkciju:

@platums: 10 pikseļi;
@augstums: 20 pikseļi;
div{
starpība:ja((@platums > @augstums), 10 pikseļi, 20 pikseļi)
}

Iepriekš esošajā koda blokā Less kompilators pārbauda, ​​vai mainīgais platums (noteikts ar @ simbols) ir lielāks par mainīgo augstums. Ja nosacījums ir patiess, funkcija atgriež pirmo vērtību pēc nosacījuma (10 pikseļi). Pretējā gadījumā funkcija atgriež otro vērtību (20 pikseļi).

Pēc kompilācijas CSS izvadei vajadzētu izskatīties apmēram šādi:

div {
starpība: 20px;
}

Kā izmantot Būla vērtību mazāk

Būla vērtība ir mainīgais, kam ir divas iespējamās vērtības: taisnība vai viltus. Ar Būla() funkcija Less, varat saglabāt izteiksmes patieso vai nepatieso vērtību mainīgajā vēlākai lietošanai. Lūk, kā tas darbojas.

@text-color: sarkans;
@bg-color: Būla(@text-color = sarkans);

Iepriekš esošajā koda blokā Less kompilators pārbauda, ​​vai teksta krāsa ir sarkans. Pēc tam, bg-krāsa mainīgais saglabā vērtību.

div{
fona krāsa: ja(@bg-color,zaļš, dzeltens);
}

Iepriekš minētais koda bloks tiek apkopots šādi:

div {
fona krāsa: zaļš;
}

Teksta aizstāšana virknē Ar funkciju aizstāt ()

Sintakse aizvietot() funkcija izskatās šādi:

aizvietot(virkne, modelis, nomaiņa, karogi)

virkne apzīmē virkni, kurā vēlaties meklēt un aizstāt. modelis ir virkne, kas jāmeklē. modelis var būt arī regulāra izteiksme, bet parasti tā ir virkne. Pēc veiksmīgas atbilstības kompilators Less CSS to aizstāj modelis Ar nomaiņa.

Pēc izvēles, aizvietot() funkcija var ietvert arī karogi parametrs regulārās izteiksmes karodziņiem.

@string: "Sveiki";
@raksts: "sveiki";
@aizvietošana: "es";
div::pirms{
saturu: aizvietot(@string,@raksts,@aizvietošana)
}

Iepriekš norādītajam koda blokam pēc kompilācijas vajadzētu iegūt šādu rezultātu:

div::pirms {
saturu: "Sveiki";
}

Uzskaitiet funkcijas mazāk CSS

Sadaļā Less CSS varat izmantot komatus vai atstarpes, lai definētu vērtību sarakstu. Piemēram:

@pārtikas preces: "maize", "banāns", "kartupeļi", "piens";

Jūs varat izmantot garums () funkciju, lai novērtētu elementu skaitu sarakstā.

@rezultāts: garums(@pārtikas preces);

Varat arī izmantot ekstrakts() funkcija, lai iegūtu vērtību noteiktā pozīcijā. Piemēram, ja vēlaties iegūt trešo elementu pārtikas preces sarakstā, rīkojieties šādi:

@trešais elements: ekstrakts(@pārtikas preces, 3);

Atšķirībā no parastajām programmēšanas valodām, kur saraksta indekss sākas ar 0, saraksta sākuma indekss mazāk CSS vienmēr ir 1.

Vēl viena saraksta funkcija, kas varētu noderēt, veidojot vietnes ar Less, ir diapazons () funkciju. Tas aizņem trīs parametrus. Pirmais parametrs norāda sākuma pozīciju diapazonā. Otrais parametrs norāda beigu pozīciju, un pēdējais parametrs norāda pieauguma vai samazināšanas vērtību starp katru diapazona vienumu. Ja tas nav norādīts, noklusējuma vērtība ir 1.

div {
 piemale: diapazons (10px, 40px, 10);
}

Iepriekš minētais koda bloks ir jāapkopo šādi:

div {
 piemale: 10px 20px 30px 40px;
}

Kā redzat, Less CSS kompilators sākas no 10 pikseļiem, palielinot iepriekšējo vērtību par 10, līdz tas sasniedz beigu pozīciju (40 pikseļi).

Vienkāršas vietnes izveide ar mazākām CSS funkcijām

Ir pienācis laiks apkopot visu, ko esat iemācījies, un izveidot vienkāršu projektu, izmantojot Less CSS. Izveidojiet mapi un pievienojiet index.htm un stils.mazāk failus.

Atveriet index.htm failu un pievienojiet šādu HTML kodu.

html>
<htmllang="lv">
<galvu>
<metarakstzīmju kopa="UTF-8">
<metanosaukums="skata logs"saturu="platums = ierīces platums, sākotnējais mērogs = 1,0">
<saiterel="stila lapa/mazāk"veids="text/css"href="bez stila" />
<virsraksts>Dokumentsvirsraksts>
galvu>
<ķermeni>
<divklasē="konteiners">
<h1>
h1>
div>
<skriptssrc=" https://cdn.jsdelivr.net/npm/less" >skripts>
ķermeni>
html>

Iepriekš esošajā koda blokā ir vecāks "konteiners"div ar tukšu h1 elements. The src atribūts uz skripts tags norāda uz ceļu uz mazāk CSS kompilatoru.

Bez šī skripts tagu, pārlūkprogramma nevarēs saprast jūsu kodu. Varat arī instalēt Less CSS savā datorā, izmantojot Mezglu pakotņu pārvaldnieks (NPM), terminālī izpildot šādu komandu:

npm instalēt -g mazāk

Ikreiz, kad esat gatavs apkopot .mazāk failu, vienkārši palaidiet tālāk norādīto komandu, pārliecinoties, ka esat norādījis failu, kuram kompilatoram jāraksta izvade.

lessc style.less style.css

Iekš stils.mazāk failu, izveidojiet divus mainīgos, proti: konteinera platums un konteiners-bg-krāsa lai attēlotu platumu un fona krāsu "konteiners"div attiecīgi.

@container-width: 50 rem;
@container-bg-color: dzeltens;

Pēc tam izveidojiet trīs mainīgos, proti: virkne, modelis, un nomaiņa. Pēc tam pievienojiet stilus "konteiners"div un h1 elements.

@string: "Sveiki no planētas Zeme bērniem!";
@raksts: "planētas Zeme bērni!";
@aizvietošana: "Plutona iedzīvotāji!";
.konteiners{
platums: @container-width;
fona krāsa: @container-bg-color;
polsterējums: ja(@container-width > 30 rem, diapazons (20 pikseļi, 80 pikseļi, 20),"");
robeža: ciets;
}
h1:pirmais bērns::pēc{
saturu: aizvietot(@string,@raksts,@aizvietošana);
}

Iepriekš esošajā koda blokā diapazons () funkcija iestata polsterējums īpašums uz "konteiners"div. Kompilatoram Less vajadzētu apkopot stils.mazāk failu šādā failā:

.konteiners {
platums: 50rem;
fona krāsa: dzeltens;
polsterējums: 20px 40px 60px 80px;
robeža: ciets;
}
h1:pirmais bērns::pēc {
saturu: "SveikinouziedzīvotājinoPlutons!";
}

Kad atverat index.htm failu pārlūkprogrammā, jums vajadzētu redzēt šo:

Uzlabojiet savu produktivitāti, izmantojot CSS priekšapstrādātājus

Parastās programmēšanas valodās funkcijas samazina rakstāmā koda daudzumu un samazina kļūdas. CSS priekšapstrādātāji, piemēram, Less, nodrošina vairākas funkcijas, kas atvieglo CSS koda rakstīšanu.

CSS priekšapstrādātāji noder, strādājot ar lieliem failiem. Tie atvieglo problēmu atkļūdošanu, tādējādi uzlabojot izstrādātāja produktivitāti.