Hva er mindre CSS og hvordan bruker du det?

Hvis du er en erfaren CSS-utvikler, vil du være godt klar over språkets ulemper. Den mangler fortsatt utbredt støtte for lenge etterspurte funksjoner som nesting og mixins.

Less (Leaner Style Sheets) er en utvidelse av CSS med mange kraftige funksjoner. Hvis du kan CSS, er det lett å lære Less fordi Syntaksen til Less er veldig lik.

Hvordan installere mindre

Du kan installere Less med JavaScript Package Manager, NPM ved å kjøre:

npm installer mindre -g

Etter installasjonen kan du kompilere .mindre filer til .css bruker mindrec kommando. For eksempel kompilerer følgende kommando stil.mindre og gir ut resultatene i en style.css fil.

lessc style.less style.css

Variabler i mindre

I motsetning til vanlig CSS, som bruker "--"-operatoren til å definere variabler, Mindre definerer variabler ved å bruke "@"-symbolet. For eksempel:

@bredde:40 piksler;
@høyde:80 piksler;

Kodeblokken lager ganske enkelt to variabler, bredde og høyde som har to verdier henholdsvis: 40px og 80px. Det er vanlig praksis å ta ofte brukte verdier i CSS og lagre dem i en variabel. Dette gjør det lettere å endre disse verdiene siden det bare er én kilde til kontroll.

Slik kan du bruke variabler i Less. Opprett en index.htm fil og legg til følgende standardkode:

html>
<htmllang="no">
<hode>
<metategnsett="UTF-8">
<metahttp-ekv="X-UA-kompatibel"innhold="IE=kant">
<metaNavn="viewport"innhold="width=device-width, initial-scale=1.0">
<linkrel="stilark"href="style.css">
<tittel>Bruker mindre CSStittel>
hode>
<kropp>
<div>
 Hei fra barna til planeten Jorden!
div>
kropp>
html>

Deretter oppretter du en stil.mindre fil og legg til følgende:

@bredde:400 piksler;
@høyde:400 piksler;
@vertical-center: senter;
@txt-hvit: hvit;
@bg-red: rgb(220, 11, 11);
@font-40:40 piksler;
div {
bredde: @bredde;
høyde: @høyde;
vise: bøye;
farge: @txt-hvit;
bakgrunnsfarge: @bg-rød;
skriftstørrelse: @font-40;
}

Nå, når du kan kompilere .mindre fil til .css bruker mindrec kommando:

lessc style.less style.css

Den kompilerte CSS-en skal se slik ut:

div {
bredde: 400px;
høyde: 400px;
vise: bøye seg;
farge: hvit;
bakgrunnsfarge: #dc0b0b;
skriftstørrelse: 40px;
}

Når du åpner nettleseren din, bør du se dette:

Det er mye mer du kan gjøre med variabler i Less, for eksempel interpolasjon som lar deg bruke variabler som velgernavn, URL-er og mer. Her er et eksempel på hvordan du implementerer variabel interpolering:

@egendefinert-velger: container;
.@{custom-selector} {
polstring: 10 piksler;
margin: 10 piksler;
grense: solid 10 piksler;
}

Kodeblokken ovenfor bruker @{...} klausul for å bruke en variabel som en velger. Når den er kompilert, vil koden resultere i følgende:

.container{
polstring: 10px;
margin: 10px;
grense: fast 10px;
}

Aritmetiske operasjoner på mindre

Mindre gir også støtte for aritmetiske operasjoner som addisjon, subtraksjon, divisjon og multiplikasjon. Disse operasjonene fungerer med konstanter, verdier og variabler.

@variabel-1:5 px;
// Multiplikasjon Operasjon mellom variabel og konstant
@variabel-2:@variabel-1 * 2
// Addisjonsoperasjon mellom verdi og variabel.
@variabel-3:10 piksler + @variabel-2

Hvordan bruke Mixins

Mixins lar deg gjenbruke stiler (eller CSS-kode) gjennom hele stilarket. Annen CSS-utvidelser som Sass tilbyr også Mixins. For å illustrere hvordan mixins fungerer i Less, lag en index.htm og legg til følgende kode:

html>
<htmllang="no">
<hode>
<metategnsett="UTF-8">
<metahttp-ekv="X-UA-kompatibel"innhold="IE=kant">
<metaNavn="viewport"innhold="width=device-width, initial-scale=1.0">
<linkrel="stilark"href="style.css">
<tittel>Bruker mindre CSStittel>
hode>
<kropp>
<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>
kropp>
html>

Deretter oppretter du en stil.mindre fil og legg til følgende linjer:

.eksempeltekst() {
bakgrunnsfarge: gul;
}
.første bokstav() {
bakgrunnsfarge: rød;
farge: hvit;
skriftstørrelse: 30 piksler;
}
s {
.eksempeltekst();
}
s::første bokstav {
.første bokstav();
}

I kodeblokken ovenfor er det to mixin-klasser: .eksempeltekst og .første bokstav. Når du vil bruke en mixin i en annen del av stilarket, refererer du til den ved navn med parenteser på slutten: .mixin(). I nettleseren bør du se noe slikt:

Stil hekking på mindre

La oss si at du har en overordnet div med to elementer som barn: a s element og et annet div. Vanligvis, hvis du ønsker å style s element med fargen rød og div elementer med fargen grønn, kan du bruke følgende tilnærming:

divs {
farge: rød;
}
div {
farge: grønn
}

Mindre gir lignende funksjonalitet gjennom bruk av hekking. Så i dette tilfellet vil den mindre ekvivalenten til kodeblokken ovenfor være:

div {
farge: grønn;
s {
farge: rød;
 }
}

Ikke bare er dette lettere å vikle hodet rundt, det gjør også koden mer vedlikeholdbar. Å referere til foreldrevelgere med mindre er lettere med & operatør. For eksempel:

knapp {
bakgrunnsfarge: blå;
grense: ingen;
&:sveve {
bakgrunnsfarge: grå;
forvandle: skala(1.2);
 }
}

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

knapp {
bakgrunnsfarge: blå;
grense: ingen;
}
knapp:sveve {
bakgrunnsfarge: grå;
forvandle: skala(1.2);
}

Forstå omfang og funksjoner på mindre

Som vanlige programmeringsspråk har variabler omfanget av blokken du definerer dem i. For å illustrere dette, lag en ny index.htm fil, og legg til den første HTML-koden som ble gitt tidligere. Legg deretter til følgende blokk i kropp stikkord:

<divklasse="ytre-div">
 Ytre Div skal være rød.
<br />
<spanklasse="inner-div">
 Indre div skal være grønn.
span>
div>

I stil.mindre fil, legg til følgende linjer:

@bg-farge: rød;
kropp {
skriftstørrelse: 40 piksler;
farge: hvit;
margin: 20 piksler;
}
.inner-div {
@bg-farge: grønn;
bakgrunnsfarge: @bg-farge;
}
.outer-div {
bakgrunnsfarge: @bg-farge;
}

De indre-div blokk omdefinerer bg-farge variabel, begrenset til bare den blokken. Så den grønne fargen gjelder bare for den klassen og påvirker ikke den globale bg-farge variabel. Når du kompilerer og åpner resultatet i nettleseren, er dette hva du bør se:

Mindre gir også nyttige funksjoner som kan være fordelaktige i enkelte scenarier. For eksempel, hvis du vil angi en stil bare hvis en bestemt betingelse er oppfylt, kan du gjøre det med hvis funksjon. Denne funksjonen har følgende syntaks:

hvis((tilstand), verdi1, verdi2)

Koden kommer tilbake verdi1 dersom vilkåret er oppfylt og verdi2 ellers. Her er et eksempel:

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

Kodeblokken ovenfor skal resultere i følgende CSS når den er kompilert:

div {
polstring: 10px;
}

Gjør mer med mindre og andre CSS-utvidelser

Tusenvis av utviklere bruker Less for å gjøre det litt morsomt å skrive CSS. Fantastiske funksjoner som funksjoner, mixins og variabler er bare en liten del av det Less tilbyr.

Mindre passer for både små og store prosjekter. Det er verdt å merke seg at andre like fantastiske CSS-utvidelsesspråk som Sass og Stylus CSS er verdt å sjekke ut.