Vad är mindre CSS och hur använder du det?

Om du är en erfaren CSS-utvecklare kommer du att vara väl medveten om språkets nackdelar. Det saknar fortfarande brett stöd för länge efterfrågade funktioner som kapsling och mixins.

Less (Leaner Style Sheets) är en förlängning av CSS med många kraftfulla funktioner. Om du kan CSS är det lätt att lära sig mindre eftersom Less syntax är väldigt lik.

Hur man installerar mindre

Du kan installera Less med JavaScript-pakethanterare, NPM genom att köra:

npm installera mindre -g

Efter installationen kan du kompilera .mindre filer till .css använda mindrec kommando. Till exempel kompilerar följande kommando stil.mindre och matar ut resultaten i en style.css fil.

lessc style.less style.css

Variabler i mindre

Till skillnad från vanlig CSS, som använder operatorn "--" för att definiera variabler, Mindre definierar variabler med "@"-symbolen. Till exempel:

@bredd:40px;
@höjd:80px;

Kodblocket skapar helt enkelt två variabler, bredd och höjd som har två värden respektive: 40px och 80px. Det är vanligt att ta vanliga värden i CSS och lagra dem i en variabel. Detta gör det lättare att ändra dessa värden eftersom det bara finns en kontrollkälla.

Så här kan du använda variabler i Less. Skapa en index.htm fil och lägg till följande typkod:

html>
<htmllang="en">
<huvud>
<metateckenuppsättning="UTF-8">
<metahttp-ekvivalent="X-UA-kompatibel"innehåll="IE=kant">
<metanamn="viewport"innehåll="width=device-width, initial-scale=1.0">
<länkrel="stilmall"href="style.css">
<titel>Använder mindre CSStitel>
huvud>
<kropp>
<div>
 Hej från barnen på planeten Jorden!
div>
kropp>
html>

Skapa sedan en stil.mindre fil och lägg till följande:

@bredd:400 pixlar;
@höjd:400 pixlar;
@vertical-center: Centrum;
@txt-vit: vit;
@bg-red: rgb(220, 11, 11);
@font-40:40px;
div {
bredd: @bredd;
höjd: @höjd;
visa: flexa;
Färg: @txt-vit;
bakgrundsfärg: @bg-röd;
textstorlek: @font-40;
}

Nu, när du kan kompilera .mindre fil till .css använda mindrec kommando:

lessc style.less style.css

Den kompilerade CSS ska se ut så här:

div {
bredd: 400px;
höjd: 400px;
visa: böja;
Färg: vit;
bakgrundsfärg: #dc0b0b;
textstorlek: 40px;
}

När du öppnar din webbläsare bör du se följande:

Det finns mycket mer du kan göra med variabler i Less, till exempel interpolation som låter dig använda variabler som väljarnamn, URL: er och mer. Här är ett exempel på hur man implementerar variabelinterpolation:

@anpassad-väljare: behållare;
.@{custom-selector} {
stoppning: 10px;
marginal: 10px;
gräns: fast 10px;
}

Kodblocket ovan använder @{...} sats för att använda en variabel som väljare. När den är kompilerad kommer koden att resultera i följande:

.behållare{
stoppning: 10px;
marginal: 10px;
gräns: fast 10px;
}

Aritmetiska operationer på mindre

Mindre ger också stöd för aritmetiska operationer som addition, subtraktion, division och multiplikation. Dessa operationer arbetar med konstanter, värden och variabler.

@variabel-1:5 px;
// Multiplikation Operation mellan variabel och konstant
@variabel-2:@variabel-1 * 2
// Additionsoperation mellan värde och variabel.
@variabel-3:10px + @variabel-2

Hur man använder Mixins

Mixins låter dig återanvända stilar (eller CSS-kod) i hela stilarket. Övrig CSS-tillägg som Sass erbjuder även Mixins. För att illustrera hur mixins fungerar i Less, skapa en index.htm och lägg till följande kod:

html>
<htmllang="en">
<huvud>
<metateckenuppsättning="UTF-8">
<metahttp-ekvivalent="X-UA-kompatibel"innehåll="IE=kant">
<metanamn="viewport"innehåll="width=device-width, initial-scale=1.0">
<länkrel="stilmall"href="style.css">
<titel>Använder mindre CSStitel>
huvud>
<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>
<sid>
 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.
sid>
<sid>
 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.
sid>
kropp>
html>

Skapa sedan en stil.mindre fil och lägg till följande rader:

.exempeltext() {
bakgrundsfärg: gul;
}
.första bokstaven() {
bakgrundsfärg: röd;
Färg: vit;
textstorlek: 30 pixlar;
}
sid {
.exempeltext();
}
sid::första bokstaven {
.första bokstaven();
}

I kodblocket ovan finns det två mixin-klasser: .exempeltext och .första bokstaven. När du vill använda en mixin i en annan del av stilmallen, referera helt enkelt till den med namn med parenteser i slutet: .blanda i(). I webbläsaren bör du se något i stil med detta:

Stil häckning på mindre

Låt oss säga att du har en överordnad div med två element som sina barn: a sid element och ett annat div. Vanligtvis, om du vill styla sid element med färgen röd och div element med färgen grön kan du använda följande tillvägagångssätt:

divsid {
Färg: röd;
}
div {
Färg: grön
}

Mindre ger liknande funktionalitet genom att använda häckande. Så i det här fallet skulle den mindre motsvarigheten till kodblocket ovan vara:

div {
Färg: grön;
sid {
Färg: röd;
 }
}

Detta är inte bara lättare att linda huvudet runt, det gör också koden mer underhållbar. Att referera föräldraväljare med mindre är lättare med & operatör. Till exempel:

knapp {
bakgrundsfärg: blå;
gräns: ingen;
&:sväva {
bakgrundsfärg: grå;
omvandla: skala(1.2);
 }
}

Kodblocket ovan kommer att resultera i följande CSS-kod när det kompileras:

knapp {
bakgrundsfärg: blå;
gräns: ingen;
}
knapp:sväva {
bakgrundsfärg: grå;
omvandla: skala(1.2);
}

Förstå omfattning och funktioner på mindre

Precis som vanliga programmeringsspråk har variabler omfattningen av blocket där du definierar dem. För att illustrera detta, skapa en ny index.htm fil och lägg till den första HTML-koden som tillhandahållits tidigare. Lägg sedan till följande block i kropp märka:

<divklass="yttre-div">
 Yttre Div ska vara röd.
<br />
<spännaklass="inner-div">
 Inre div ska vara grön.
spänna>
div>

I den stil.mindre fil, lägg till följande rader:

@bg-färg: röd;
kropp {
textstorlek: 40px;
Färg: vit;
marginal: 20px;
}
.inner-div {
@bg-färg: grön;
bakgrundsfärg: @bg-färg;
}
.outer-div {
bakgrundsfärg: @bg-färg;
}

De inre-div block omdefinierar bg-färg variabel, omfattning till just det blocket. Så den gröna färgen gäller just den klassen och påverkar inte det globala bg-färg variabel. När du kompilerar och öppnar resultatet i webbläsaren bör du se detta:

Mindre ger också praktiska funktioner som kan vara fördelaktiga i vissa scenarier. Till exempel, om du vill ställa in en stil endast om ett visst villkor är uppfyllt, kan du göra det med om fungera. Denna funktion har följande syntax:

om((villkor), värde1, värde2)

Koden kommer tillbaka värde1 om villkoret är uppfyllt och värde2 annat. Här är ett exempel:

@var1:20px;
@var2:20px;
div {
stoppning: om((@var1 = @var2), 10px, 20px);
}

Kodblocket ovan bör resultera i följande CSS när det kompileras:

div {
stoppning: 10px;
}

Gör mer med mindre och andra CSS-tillägg

Tusentals utvecklare använder Less för att göra det lite roligt att skriva CSS. Fantastiska funktioner som funktioner, mixins och variabler är bara en liten del av vad Less erbjuder.

Mindre lämpar sig för både små och stora projekt. Det är värt att notera att andra lika fantastiska CSS-tilläggsspråk som Sass och Stylus CSS är värda att kolla in.