Sådan bruger du funktioner i mindre CSS

Less CSS er en robust og dynamisk CSS-forprocessor, der har høstet betydelig opmærksomhed og popularitet i de seneste år. Som en præprocessor fungerer den som en forlængelse af "Vanilla CSS", det traditionelle CSS-stylingsprog, der bruges på nettet udvikling, ved at tilbyde en række ekstra funktioner og funktionaliteter, der forbedrer den overordnede stil erfaring.

Hvis du er velbevandret i at skrive standard CSS, kan du problemfrit gå over til at bruge Mindre CSS uden en stejl indlæringskurve. Denne kompatibilitet gør det nemt at vedligeholde din eksisterende CSS-viden og samtidig udnytte de avancerede funktioner i Less.

Hvad er funktioner, og hvorfor er de vigtige?

I programmering er en funktion en kodeblok, der udfører en bestemt opgave. Du kan også genbruge det et andet sted i programmet. Funktioner tager normalt data ind, behandler dem og returnerer resultaterne.

De gør det nemt at reducere duplikatkode i et program. Lad os for eksempel sige, at du har et program, der beregner rabatten ud fra den pris, brugeren indtaster. I en

sprog som JavaScript, kan du implementere det sådan her:

fungerecheckRabat(pris, tærskel){
hvis (pris >= tærskel){
lade rabat = 5/100 * pris;
Vend tilbage`Din rabat er $${rabat}`;
 } andet {
Vend tilbage`Beklager, denne vare er ikke berettiget til en rabat. `
 }
}

Så kan du kalde funktionen og sende den ind pris og Grænseværdi.

lade pris = prompt("Indtast vareprisen: ")
advarsel (tjek Rabat (pris, 500))

Ved at abstrahere logikken for at kontrollere rabatter, er programmet ikke kun læsbart, men du har nu en genbrugelig kodeblok, der behandler rabatten og returnerer resultatet. Der er meget mere, som funktioner kan, men dette er kun det grundlæggende.

Forstå funktioner i mindre CSS

I traditionel CSS er der et meget begrænset sæt funktioner til rådighed for dig som udvikler. En af de mest populære funktioner i CSS er calc() matematisk funktion som gør præcis, hvad det ser ud til – det udfører beregninger og bruger resultatet som en egenskabsværdi i CSS.

s{
baggrundsfarve: rød;
bredde: beregnet(13px- 4px);
}

I Less CSS er der flere funktioner, der gør mere end blot aritmetiske operationer. En funktion, som du kan støde på i Less, er hvis fungere. Det hvis funktionen tager tre parametre ind: en betingelse og to værdier. Kodeblokken nedenfor viser, hvordan du kan bruge denne funktion:

@bredde: 10px;
@højde: 20 px;
div{
margen:hvis((@bredde > @højde), 10px, 20 px)
}

I kodeblokken ovenfor kontrollerer Less-kompileren, om variablen bredde (defineret af @ symbol) er større end variablen højde. Hvis betingelsen er sand, returnerer funktionen den første værdi efter betingelsen (10px). Ellers returnerer funktionen den anden værdi (20px).

Efter kompileringen skulle CSS-outputtet se sådan ud:

div {
margen: 20px;
}

Sådan bruger du en Boolean på mindre

En boolean er en variabel, der har to mulige værdier: rigtigt eller falsk. Med boolsk() funktion i Mindre, kan du gemme den sande eller falske værdi af et udtryk i en variabel til senere brug. Sådan fungerer det.

@tekst-farve: rød;
@bg-farve: boolean(@tekstfarve = rød);

I kodeblokken ovenfor kontrollerer Less-kompileren om tekst-farve er rød. Derefter bg-farve variabel gemmer værdien.

div{
baggrundsfarve: hvis(@bg-farve,grøn, gul);
}

Kodeblokken ovenfor kompilerer ned til noget som dette:

div {
baggrundsfarve: grøn;
}

Erstatning af tekst i en streng med funktionen replace().

Syntaksen for erstatte() funktion ser sådan ud:

erstatte(snor, mønster, udskiftning, flag)

snor repræsenterer den streng, du vil søge og erstatte i. mønster er strengen, der skal søges efter. mønster kan også være et regulært udtryk, men det er normalt en streng. Efter et vellykket match erstatter Less CSS-compileren det mønster med udskiftning.

Eventuelt erstatte() funktionen kan også indeholde flag parameter for regulære udtryksflag.

@snor: "Hej";
@mønster: "hej";
@udskiftning: "jeg";
div::Før{
indhold: erstatte(@snor,@mønster,@udskiftning)
}

Kodeblokken ovenfor skulle resultere i følgende efter kompilering:

div::Før {
indhold: "Hej";
}

Liste funktioner i mindre CSS

I Mindre CSS bruger du kommaer eller mellemrum til at definere en liste over værdier. For eksempel:

@dagligvarer: "brød", "banan", "kartoffel", "mælk";

Du kan bruge længde() funktion til at evaluere antallet af elementer på listen.

@resultat: length(@groceries);

Du kan også bruge uddrag() funktion til at udtrække værdien på en bestemt position. For eksempel, hvis du ønsker at få det tredje element i dagligvarer liste, gør du følgende:

@tredje element: ekstrakt(@groceries, 3);

I modsætning til almindelige programmeringssprog, hvor listeindekset starter fra 0, er startindekset for en liste i Mindre CSS altid 1.

En anden listefunktion, der kan være nyttig, når du bygger websteder med Less, er rækkevidde() fungere. Den tager tre parametre ind. Den første parameter angiver startpositionen i området. Den anden parameter angiver slutpositionen, og den sidste parameter angiver stigningen eller reduktionsværdien mellem hvert element i området. Hvis det ikke er angivet, er standardværdien 1.

div {
 margin: interval (10px, 40px, 10);
}

Kodeblokken ovenfor bør kompilere ned til følgende:

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

Som du kan se, starter Less CSS compileren fra 10px, og øger den forrige værdi med 10, indtil den når slutpositionen (40px).

Opbygning af et simpelt websted med færre CSS-funktioner

Det er tid til at samle alt, hvad du har lært, og skabe et simpelt projekt med mindre CSS. Opret en mappe og tilføj index.htm og stil.mindre filer.

Åbn index.htm fil og tilføje følgende HTML-kode.

html>
<htmllang="da">
<hoved>
<metategnsæt="UTF-8">
<metanavn="udsigtsport"indhold="width=device-width, initial-scale=1.0">
<linkrel="stylesheet/mindre"type="tekst/css"href="stil.mindre" />
<titel>Dokumenttitel>
hoved>
<legeme>
<divklasse="beholder">
<h1>
h1>
div>
<manuskriptsrc=" https://cdn.jsdelivr.net/npm/less" >manuskript>
legeme>
html>

I kodeblokken ovenfor er der en forælder "beholder"div med en tom h1 element. Det src attribut på manuskript tag peger på stien til Less CSS Compiler.

Uden dette manuskript tag, vil browseren ikke kunne forstå din kode. Alternativt kan du installere Less CSS på din computer via Node Package Manager (NPM), ved at køre følgende kommando i terminalen:

npm installer -g mindre

Når du er klar til at kompilere .mindre fil, skal du blot køre kommandoen nedenfor, og sørg for at angive den fil, som compileren skal skrive outputtet til.

lessc style.less style.css

I stil.mindre fil, skal du oprette to variable, nemlig: container-bredde og container-bg-farve at repræsentere bredden og baggrundsfarven af "beholder"div henholdsvis.

@container-bredde: 50 rem;
@container-bg-farve: gul;

Opret derefter tre variabler, nemlig: snor, mønster, og udskiftning. Tilføj derefter stilene til "beholder"div og h1 element.

@snor: "Hej fra børnene på planeten Jorden!";
@mønster: "Planet Jordens børn!";
@udskiftning: "Plutos indbyggere!";
.beholder{
bredde: @container-bredde;
baggrundsfarve: @container-bg-farve;
polstring: hvis(@container-bredde > 30 rem, rækkevidde(20 px, 80 px, 20),"");
grænse: solid;
}
h1:første barn::efter{
indhold: erstatte(@snor,@mønster,@udskiftning);
}

I kodeblokken ovenfor er rækkevidde() funktionen indstiller polstring ejendom på "beholder"div. Less-kompileren skal kompilere stil.mindre fil i følgende:

.beholder {
bredde: 50rem;
baggrundsfarve: gul;
polstring: 20px 40px 60px 80px;
grænse: solid;
}
h1:første barn::efter {
indhold: "HejfradetindbyggereafPluto!";
}

Når du åbner index.htm fil i browseren, dette er hvad du skal se:

Forbedre din produktivitet med CSS Preprocessors

I almindelige programmeringssprog reducerer funktioner mængden af ​​kode, du skal bruge for at skrive, og minimerer fejl. CSS-forprocessorer som Less giver flere funktioner, der gør det nemmere at skrive CSS-kode.

CSS-forprocessorer er nyttige, når du arbejder med store filer. De gør det lettere at fejlfinde problemer og forbedrer derved udviklerens produktivitet.