Home-theater-designers
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īmekļa izstrādē, nodrošinot virkni papildu funkciju un funkcionalitātes, kas uzlabo vispārējo stilu veidošanas pieredzi.
MUO dienas video RITINĀT, LAI TURPINĀTU AR SATURU
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:
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. `
}
}
Pēc tam varat izsaukt funkciju un ievadīt cena un slieksnis .
let price = prompt("Enter the item price: ")
alert(checkDiscount(price, 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() matemātiskā funkcija kas dara tieši to, kā šķiet — veic aprēķinus un izmanto rezultātu kā īpašuma vērtību CSS.
p{
background-color: red;
width: calc(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:
@width: 10px;
@height: 20px;
div{
margin:if((@width > @height), 10px, 20px)
}
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).
kā iegūt vairāk video atmiņas
Pēc kompilācijas CSS izvadei vajadzētu izskatīties apmēram šādi:
div {
margin: 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: red;
@bg-color: boolean(@text-color = red);
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{
background-color: if(@bg-color,green,yellow);
}
Iepriekš minētais koda bloks tiek apkopots šādi:
div {
background-color: green;
}
Teksta aizstāšana virknē Ar funkciju aizstāt ()
Sintakse aizvietot() funkcija izskatās šādi:
replace(string, pattern, replacement, flags)
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: "Hello";
@pattern: "ello";
@replacement: "i";
div::before{
content: replace(@string,@pattern,@replacement)
}
Iepriekš norādītajam koda blokam pēc kompilācijas vajadzētu iegūt šādu rezultātu:
div::before {
content: "Hi";
}
Uzskaitiet funkcijas mazāk CSS
Sadaļā Less CSS varat izmantot komatus vai atstarpes, lai definētu vērtību sarakstu. Piemēram:
@groceries: "bread", "banana", "potato", "milk";
Jūs varat izmantot garums () funkciju, lai novērtētu elementu skaitu sarakstā.
@result: length(@groceries);
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:
@third-element: extract(@groceries, 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 {
margin: range(10px, 40px, 10);
}
Iepriekš minētais koda bloks ir jāapkopo šādi:
div {
margin: 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.
<!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>
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 install -g less
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: 50rem;
@container-bg-color: yellow;
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: "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);
}
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ā:
.container {
width: 50rem;
background-color: yellow;
padding: 20px 40px 60px 80px;
border: solid;
}
h1:first-child::after {
content: "Hello from the inhabitants of Pluto!";
}
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.