Funktioner förenklar din programmeringsupplevelse avsevärt, och detta gäller även när du skriver CSS-kod.
Less CSS är en robust och dynamisk CSS-förprocessor som har fått stor uppmärksamhet och popularitet de senaste åren. Som en förprocessor fungerar den som en förlängning av "Vanilla CSS", det traditionella CSS-stylingspråket som används på webben utveckling, genom att tillhandahålla en rad ytterligare funktioner och funktioner som förbättrar den övergripande stilen erfarenhet.
Om du är väl bevandrad i att skriva standard CSS kan du sömlöst gå över till att använda Mindre CSS utan en brant inlärningskurva. Denna kompatibilitet gör det enkelt att underhålla din befintliga CSS-kunskap samtidigt som du utnyttjar de avancerade funktionerna hos Less.
Vad är funktioner och varför är de viktiga?
I programmering är en funktion ett kodblock som utför en specifik uppgift. Du kan också återanvända den någon annanstans i programmet. Funktioner tar vanligtvis in data, bearbetar dem och returnerar resultaten.
De gör det enkelt att reducera dubblettkod i ett program. Låt oss till exempel säga att du har ett program som beräknar rabatten utifrån det pris användaren anger. I en språk som JavaScript, du kan implementera det så här:
fungeracheckRabatt(pris, tröskel){
om (pris >= tröskel){
låta rabatt = 5/100 * pris;
lämna tillbaka`Din rabatt är $${discount}`;
} annan {
lämna tillbaka`Tyvärr, den här artikeln kvalificerar sig inte för någon rabatt. `
}
}
Sedan kan du anropa funktionen och skicka in pris och den tröskel.
låta pris = uppmaning("Ange artikelpriset: ")
varning (checkRabatt (pris, 500))
Genom att abstrahera bort logiken för att kontrollera rabatter är programmet inte bara läsbart, utan du har nu ett återanvändbart kodblock som bearbetar rabatten och returnerar resultatet. Det finns mycket mer som funktioner kan göra, men detta är bara grunderna.
Förstå funktioner i mindre CSS
I traditionell CSS finns det en mycket begränsad uppsättning funktioner tillgängliga för dig som utvecklare. En av de mest populära funktionerna i CSS är calc() matematisk funktion som gör precis som det verkar – den utför beräkningar och använder resultatet som ett egenskapsvärde i CSS.
sid{
bakgrundsfärg: röd;
bredd: beräkn(13px- 4px);
}
I Less CSS finns det flera funktioner som gör mer än bara aritmetiska operationer. En funktion som du kan stöta på i Less är om fungera. De om Funktionen tar in tre parametrar: ett villkor och två värden. Kodblocket nedan visar hur du kan använda denna funktion:
@bredd: 10px;
@höjd: 20px;
div{
marginal:om((@bredd > @höjd), 10px, 20px)
}
I kodblocket ovan kontrollerar Less-kompilatorn om variabeln bredd (definieras av @ symbol) är större än variabeln höjd. Om villkoret är sant returnerar funktionen det första värdet efter villkoret (10px). Annars returnerar funktionen det andra värdet (20px).
Efter kompileringen bör CSS-utgången se ut ungefär så här:
div {
marginal: 20px;
}
Hur man använder en boolean på mindre
En boolean är en variabel som har två möjliga värden: Sann eller falsk. Med boolean() funktion i Mindre kan du lagra det sanna eller falska värdet för ett uttryck i en variabel för senare användning. Så här fungerar det.
@text färg: röd;
@bg-färg: boolean(@text-färg = röd);
I kodblocket ovan kontrollerar Less-kompilatorn om text färg är röd. Sedan bg-färg variabel lagrar värdet.
div{
bakgrundsfärg: om(@bg-färg,grön gul);
}
Kodblocket ovan kompileras till något så här:
div {
bakgrundsfärg: grön;
}
Ersätta text i en sträng med funktionen replace().
Syntaxen för byta ut() funktionen ser ut så här:
byta ut(sträng, mönster, ersättning, flaggor)
sträng representerar strängen som du vill söka och ersätta i. mönster är strängen att söka efter. mönster kan också vara ett reguljärt uttryck, men det är oftast en sträng. Efter en lyckad match ersätter Less CSS-kompilatorn det mönster med ersättning.
Eventuellt byta ut() funktionen kan också innehålla flaggor parameter för reguljära uttrycksflaggor.
@sträng: "Hallå";
@mönster: "hej";
@ersättning: "jag";
div::innan{
innehåll: byta ut(@sträng,@mönster,@ersättning)
}
Kodblocket ovan bör resultera i följande efter kompilering:
div::innan {
innehåll: "Hej";
}
Lista funktioner i mindre CSS
I Mindre CSS använder du kommatecken eller mellanslag för att definiera en lista med värden. Till exempel:
@specerier: "bröd", "banan", "potatis", "mjölk";
Du kan använda längd() funktion för att utvärdera antalet element i listan.
@resultat: length(@groceries);
Du kan också använda extrahera() funktion för att extrahera värdet på en viss position. Till exempel, om du vill få det tredje elementet i specerier listan gör du följande:
@tredje element: extrakt(@groceries, 3);
Till skillnad från vanliga programmeringsspråk där listindexet börjar från 0, är startindexet för en lista i Mindre CSS alltid 1.
En annan listfunktion som kan vara användbar när du bygger webbplatser med Less är räckvidd() fungera. Den tar in tre parametrar. Den första parametern anger startpositionen i området. Den andra parametern anger slutpositionen och den sista parametern anger öknings- eller minskningsvärdet mellan varje post i intervallet. Om det inte anges är standardvärdet 1.
div {
margin: range (10px, 40px, 10);
}
Kodblocket ovan bör kompileras till följande:
div {
marginal: 10px 20px 30px 40px;
}Som du kan se börjar Less CSS-kompilatorn från 10px, vilket ökar det föregående värdet med 10, tills den når slutpositionen (40px).
Bygga en enkel webbplats med färre CSS-funktioner
Det är dags att samla allt du har lärt dig och skapa ett enkelt projekt med Mindre CSS. Skapa en mapp och lägg till index.htm och stil.mindre filer.
Öppna index.htm fil och lägg till följande HTML-kod.
html>
<htmllang="en">
<huvud>
<metateckenuppsättning="UTF-8">
<metanamn="viewport"innehåll="width=device-width, initial-scale=1.0">
<länkrel="stilmall/mindre"typ="text/css"href="style.less" />
<titel>Dokumenteratitel>
huvud>
<kropp>
<divklass="behållare">
<h1>
h1>
div>
<manussrc=" https://cdn.jsdelivr.net/npm/less" >manus>
kropp>
html>
I kodblocket ovan finns en förälder "behållare"div med en tom h1 element. De src attribut på manus taggen pekar på sökvägen till Less CSS-kompilatorn.
Utan detta manus taggen kommer webbläsaren inte att kunna förstå din kod. Alternativt kan du installera Less CSS på din dator via Nod Package Manager (NPM), genom att köra följande kommando i terminalen:
npm installera -g mindre
Närhelst du är redo att kompilera .mindre fil, kör bara kommandot nedan och se till att du anger filen som kompilatorn ska skriva utdata till.
lessc style.less style.css
I den stil.mindre fil, skapa två variabler nämligen: containerbredd och container-bg-färg för att representera bredden och bakgrundsfärgen på "behållare"div respektive.
@containerbredd: 50 rem;
@container-bg-color: gul;
Skapa sedan tre variabler nämligen: sträng, mönster, och ersättning. Lägg sedan till stilarna för "behållare"div och den h1 element.
@sträng: "Hej från barnen på planeten Jorden!";
@mönster: "barn av planeten jorden!";
@ersättning: "Plutos invånare!";.behållare{
bredd: @containerbredd;
bakgrundsfärg: @container-bg-color;
stoppning: om(@containerbredd > 30 rem, intervall(20px, 80px, 20),"");
gräns: fast;
}
h1:förstfödde::efter{
innehåll: byta ut(@sträng,@mönster,@ersättning);
}
I kodblocket ovan visas räckvidd() funktionen ställer in stoppning egendom på "behållare"div. Less-kompilatorn bör kompilera stil.mindre fil i följande:
.behållare {
bredd: 50rem;
bakgrundsfärg: gul;
stoppning: 20px 40px 60px 80px;
gräns: fast;
}
h1:förstfödde::efter {
innehåll: "HallåfråndeinvånareavPluto!";
}
När du öppnar index.htm fil i webbläsaren, det här är vad du ska se:
Förbättra din produktivitet med CSS-förprocessorer
I vanliga programmeringsspråk minskar funktioner mängden kod du behöver för att skriva och minimerar fel. CSS-förprocessorer som Less har flera funktioner som gör det lättare att skriva CSS-kod.
CSS-förprocessorer kommer väl till pass när man arbetar med stora filer. De gör det lättare att felsöka problem och förbättrar därmed utvecklarens produktivitet.
