Hvad er mindre CSS, og hvordan bruger du det?

Hvis du er en erfaren CSS-udvikler, vil du være udmærket klar over sprogets ulemper. Det mangler stadig udbredt understøttelse af længe efterspurgte funktioner som indlejring og mixins.

Less (Leaner Style Sheets) er en udvidelse af CSS med mange kraftfulde funktioner. Hvis du kender CSS, så er det nemt at lære Less, fordi Less' syntaks er meget ens.

Sådan installeres mindre

Du kan installere Less med JavaScript Package Manager, NPM ved at køre:

npm installer mindre -g

Efter installationen kan du kompilere .mindre filer til .css bruger mindrec kommando. For eksempel kompilerer følgende kommando stil.mindre og udlæser resultaterne i en style.css fil.

lessc style.less style.css

Variabler i mindre

I modsætning til almindelig CSS, som bruger "--" operatoren til at definere variabler, Mindre definerer variabler ved hjælp af "@"-symbolet. For eksempel:

@bredde:40 px;
@højde:80 px;

Kodeblokken opretter simpelthen to variabler, bredde og højde, der har to værdier henholdsvis: 40px og 80px. Det er almindelig praksis at tage almindeligt anvendte værdier i CSS og gemme dem i en variabel. Dette gør det lettere at ændre disse værdier, da der kun er én kontrolkilde.

Sådan kan du bruge variabler i Less. Opret en index.htm fil og tilføj følgende kedelkode:

html>
<htmllang="da">
<hoved>
<metategnsæt="UTF-8">
<metahttp-ækvivalent="X-UA-kompatibel"indhold="IE=kant">
<metanavn="udsigtsport"indhold="width=device-width, initial-scale=1.0">
<linkrel="stylesheet"href="style.css">
<titel>Bruger mindre CSStitel>
hoved>
<legeme>
<div>
 Hej fra børnene på planeten Jorden!
div>
legeme>
html>

Opret derefter en stil.mindre fil og tilføj følgende:

@bredde:400px;
@højde:400px;
@vertical-center: centrum;
@txt-hvid: hvid;
@bg-red: rgb(220, 11, 11);
@font-40:40 px;
div {
bredde: @bredde;
højde: @højde;
Skærm: bøje;
farve: @txt-hvid;
baggrundsfarve: @bg-rød;
skriftstørrelse: @font-40;
}

Nu, når du kan kompilere .mindre fil til .css bruger mindrec kommando:

lessc style.less style.css

Den kompilerede CSS skulle se sådan ud:

div {
bredde: 400px;
højde: 400px;
Skærm: bøje;
farve: hvid;
baggrundsfarve: #dc0b0b;
skriftstørrelse: 40px;
}

Når du åbner din browser, skal du se dette:

Der er meget mere, du kan gøre med variabler i Less, såsom interpolation, som giver dig mulighed for at bruge variabler som vælgernavne, URL'er og mere. Her er et eksempel på, hvordan man implementerer variabel interpolation:

@custom-selector: beholder;
.@{custom-selector} {
polstring: 10px;
margen: 10px;
grænse: solid 10px;
}

Kodeblokken ovenfor bruger @{...} klausul for at bruge en variabel som en vælger. Når den er kompileret, vil koden resultere i følgende:

.beholder{
polstring: 10px;
margen: 10px;
grænse: solid 10px;
}

Aritmetiske operationer i mindre

Mindre giver også støtte til aritmetiske operationer som addition, subtraktion, division og multiplikation. Disse operationer arbejder med konstanter, værdier og variabler.

@variabel-1:5 px;
// Multiplikation Operation mellem variabel og konstant
@variabel-2:@variabel-1 * 2
// Additionsoperation mellem værdi og variabel.
@variabel-3:10px + @variabel-2

Sådan bruges Mixins

Mixins giver dig mulighed for at genbruge stilarter (eller CSS-kode) i hele stilarket. Andet CSS-udvidelser som Sass tilbyder også Mixins. For at illustrere, hvordan mixins fungerer i Less, skal du oprette en index.htm og tilføje følgende kode:

html>
<htmllang="da">
<hoved>
<metategnsæt="UTF-8">
<metahttp-ækvivalent="X-UA-kompatibel"indhold="IE=kant">
<metanavn="udsigtsport"indhold="width=device-width, initial-scale=1.0">
<linkrel="stylesheet"href="style.css">
<titel>Bruger mindre CSStitel>
hoved>
<legeme>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste Dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
div>
<s>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste Dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
s>
<s>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste Dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
s>
legeme>
html>

Opret derefter en stil.mindre fil og tilføj følgende linjer:

.eksempel-tekst() {
baggrundsfarve: gul;
}
.første bogstav() {
baggrundsfarve: rød;
farve: hvid;
skriftstørrelse: 30 px;
}
s {
.eksempel-tekst();
}
s::første bogstav {
.første bogstav();
}

I kodeblokken ovenfor er der to mixin-klasser: .eksempel-tekst og .første bogstav. Når du vil bruge en mixin i en anden del af typografiarket, skal du blot henvise til den ved navn med parenteser i slutningen: .mixin(). I browseren skulle du se noget som dette:

Style Nesting i Mindre

Lad os sige, at du har en overordnet div med to elementer som sine børn: a s element og et andet div. Normalt, hvis du ønsker at style s element med farven rød og den div elementer med farven grøn, kan du bruge følgende fremgangsmåde:

divs {
farve: rød;
}
div {
farve: grøn
}

Mindre giver lignende funktionalitet gennem brug af indlejring. Så i dette tilfælde ville den mindre ækvivalent af kodeblokken ovenfor være:

div {
farve: grøn;
s {
farve: rød;
 }
}

Dette er ikke kun nemmere at pakke dit hoved om, det gør også koden mere vedligeholdelsesvenlig. At referere forældrevælgere med mindre er nemmere med & operatør. For eksempel:

knap {
baggrundsfarve: blå;
grænse: ingen;
&:hover {
baggrundsfarve: grå;
transformere: vægt(1.2);
 }
}

Kodeblokken ovenfor vil resultere i følgende CSS-kode, når den er kompileret:

knap {
baggrundsfarve: blå;
grænse: ingen;
}
knap:hover {
baggrundsfarve: grå;
transformere: vægt(1.2);
}

Forstå omfang og funktioner på mindre

Ligesom almindelige programmeringssprog har variabler omfanget af den blok, hvor du definerer dem. For at illustrere dette skal du oprette en ny index.htm fil, og tilføj den første HTML-boilerplate-kode, der blev leveret tidligere. Tilføj derefter følgende blok i legeme tag:

<divklasse="ydre-div">
 Ydre Div skal være rød.
<br />
<spanklasse="indre-div">
 Indre div skal være grøn.
span>
div>

I den stil.mindre fil, skal du tilføje følgende linjer:

@bg-farve: rød;
legeme {
skriftstørrelse: 40 px;
farve: hvid;
margen: 20 px;
}
.indre-div {
@bg-farve: grøn;
baggrundsfarve: @bg-farve;
}
.ydre-div {
baggrundsfarve: @bg-farve;
}

Det indre-div blok omdefinerer bg-farve variabel, med omfang til netop den blok. Så den grønne farve gælder netop for den klasse og påvirker ikke det globale bg-farve variabel. Når du kompilerer og åbner resultatet i browseren, skal du se dette:

Mindre giver også praktiske funktioner, der kan være gavnlige i nogle scenarier. For eksempel, hvis du kun vil indstille en stil, hvis en bestemt betingelse er opfyldt, kan du gøre det med hvis fungere. Denne funktion har følgende syntaks:

hvis((tilstand), værdi1, værdi2)

Koden vender tilbage værdi1 hvis betingelsen er opfyldt og værdi2 Ellers. Her er et eksempel:

@var1:20 px;
@var2:20 px;
div {
polstring: hvis((@var1 = @var2), 10px, 20 px);
}

Kodeblokken ovenfor skulle resultere i følgende CSS, når den kompileres:

div {
polstring: 10px;
}

Gør mere med mindre og andre CSS-udvidelser

Tusindvis af udviklere bruger Less til at gøre det lidt sjovt at skrive CSS. Fantastiske funktioner som funktioner, mixins og variabler er blot en lille del af, hvad Less tilbyder.

Mindre er velegnet til både små og store projekter. Det er værd at bemærke, at andre lige så fantastiske CSS-udvidelsessprog som Sass og Stylus CSS er værd at tjekke ud.