Functies vereenvoudigen uw programmeerervaring aanzienlijk, en dit geldt ook wanneer u CSS-code schrijft.
Less CSS is een robuuste en dynamische CSS-preprocessor die de afgelopen jaren veel aandacht en populariteit heeft gekregen. Als preprocessor dient het als een uitbreiding van "Vanilla CSS", de traditionele CSS-stijltaal die op internet wordt gebruikt ontwikkeling, door een scala aan extra kenmerken en functionaliteiten te bieden die de algehele styling verbeteren ervaring.
Als u goed thuis bent in het schrijven van standaard CSS, kunt u naadloos overstappen op het gebruik van Less CSS zonder een steile leercurve. Deze compatibiliteit maakt het gemakkelijk om uw bestaande CSS-kennis te behouden en tegelijkertijd gebruik te maken van de geavanceerde mogelijkheden van Less.
Wat zijn functies en waarom zijn ze belangrijk?
Bij het programmeren is een functie een codeblok dat een specifieke taak uitvoert. Je kunt het ook ergens anders in het programma hergebruiken. Functies nemen meestal gegevens op, verwerken deze en retourneren de resultaten.
Ze maken het gemakkelijk om dubbele code binnen een programma te verminderen. Stel dat u een programma heeft dat de korting berekent op basis van de prijs die de gebruiker invoert. In een taal zoals JavaScript, zou je het als volgt kunnen implementeren:
functiecheckKorting(prijs, drempel){
als (prijs >= drempel){
laten korting = 5/100 * prijs;
opbrengst`Uw korting is $${korting}`;
} anders {
opbrengst`Sorry, dit artikel komt niet in aanmerking voor korting. `
}
}
Dan kun je de functie aanroepen en doorgeven in de prijs en de drempelwaarde.
laten prijs = vraag("Voer de artikelprijs in: ")
alert (checkKorting (prijs, 500))
Door de logica voor het controleren van kortingen weg te abstraheren, is het programma niet alleen leesbaar, maar heb je nu een herbruikbaar codeblok dat de korting verwerkt en het resultaat retourneert. Er is veel meer dat functies kunnen doen, maar dit is slechts de basis.
Functies begrijpen in Less CSS
In traditionele CSS is er een zeer beperkte set functies beschikbaar voor u als ontwikkelaar. Een van de meest populaire functies in CSS is de calc()wiskundige functie wat precies doet wat het lijkt: het voert berekeningen uit en gebruikt het resultaat als eigenschapswaarde in CSS.
P{
Achtergrond kleur: rood;
breedte: berekend(13px- 4px);
}
In Less CSS zijn er verschillende functies die meer doen dan alleen rekenkundige bewerkingen. Een functie die u in Less kunt tegenkomen, is de als functie. De als functie heeft drie parameters: een voorwaarde en twee waarden. Het onderstaande codeblok laat zien hoe u deze functie kunt gebruiken:
@breedte: 10px;
@hoogte: 20px;
div{
marge:als((@breedte > @hoogte), 10px, 20px)
}
In het bovenstaande codeblok controleert de Less-compiler of de variabele breedte (gedefinieerd door de @ symbool) groter is dan de variabele hoogte. Als de voorwaarde waar is, retourneert de functie de eerste waarde na de voorwaarde (10px). Anders retourneert de functie de tweede waarde (20px).
Na de compilatie zou de CSS-uitvoer er ongeveer zo uit moeten zien:
div {
marge: 20px;
}
Hoe een Booleaanse waarde in Less te gebruiken
Een boolean is een variabele die twee mogelijke waarden heeft: WAAR of vals. Met de booleaans() functie in Less kunt u de waarde waar of onwaar van een uitdrukking opslaan in een variabele voor later gebruik. Dit is hoe het werkt.
@tekst kleur: rood;
@bg-kleur: boolean(@tekstkleur = rood);
In het bovenstaande codeblok controleert de Less-compiler of tekst kleur is rood. Dan de bg-kleur variabele slaat de waarde op.
div{
Achtergrond kleur: als(@bg-kleur,groen Geel);
}
Het codeblok hierboven compileert tot iets als dit:
div {
Achtergrond kleur: groente;
}
Tekst binnen een tekenreeks vervangen met de functie replace().
De syntaxis voor de vervangen() functie ziet er zo uit:
vervangen(snaar, patroon, vervanging, vlaggen)
snaar vertegenwoordigt de tekenreeks waarin u wilt zoeken en vervangen. patroon is de tekenreeks waarnaar moet worden gezocht. patroon kan ook een reguliere expressie zijn, maar is meestal een tekenreeks. Na een succesvolle match vervangt de Less CSS-compiler dat patroon met de vervanging.
Optioneel is de vervangen() functie kan ook de vlaggen parameter voor vlaggen voor reguliere expressies.
@snaar: "Hallo";
@patroon: "hallo";
@vervanging: "i";
div::voor{
inhoud: vervangen(@snaar,@patroon,@vervanging)
}
Het bovenstaande codeblok zou na compilatie het volgende moeten opleveren:
div::voor {
inhoud: "Hoi";
}
Lijstfuncties in minder CSS
In Less CSS gebruikt u komma's of spaties om een lijst met waarden te definiëren. Bijvoorbeeld:
@boodschappen: "brood", "banaan", "aardappel", "melk";
U kunt de lengte() functie om het aantal elementen in de lijst te evalueren.
@resultaat: lengte(@boodschappen);
U kunt ook de extract() functie om de waarde op een bepaalde positie te extraheren. Als u bijvoorbeeld het derde element in de boodschappen lijst, doe je het volgende:
@derde-element: extract(@boodschappen, 3);
In tegenstelling tot reguliere programmeertalen waar de lijstindex begint bij 0, is de startindex van een lijst in Less CSS altijd 1.
Een andere lijstfunctie die van pas kan komen bij het bouwen van websites met Less is de bereik() functie. Het neemt drie parameters in beslag. De eerste parameter specificeert de startpositie in het bereik. De tweede parameter geeft de eindpositie aan en de laatste parameter specificeert de verhogings- of verlagingswaarde tussen elk item in het bereik. Indien niet opgegeven, is de standaardwaarde 1.
div {
marge: bereik (10px, 40px, 10);
}
Het bovenstaande codeblok zou moeten worden gecompileerd tot het volgende:
div {
marge: 10px 20px 30px 40px;
}Zoals u kunt zien, begint de Less CSS-compiler vanaf 10px, waarbij de vorige waarde met 10 wordt verhoogd, totdat deze de eindpositie (40px) bereikt.
Een eenvoudige website bouwen met minder CSS-functies
Het is tijd om alles wat je hebt geleerd bij elkaar te brengen en een eenvoudig project te maken met Less CSS. Maak een map en voeg toe index.htm En stijl.minder bestanden.
Open de index.htm bestand en voeg de volgende HTML-code toe.
html>
<htmllang="en">
<hoofd>
<metatekenset="UTF-8">
<metanaam="uitkijk postje"inhoud="breedte=apparaatbreedte, beginschaal=1.0">
<koppelingrel="stylesheet/minder"type="tekst/css"href="stijl.loos" />
<titel>Documenttitel>
hoofd>
<lichaam>
<divklas="houder">
<h1>
h1>
div>
<scriptsrc=" https://cdn.jsdelivr.net/npm/less" >script>
lichaam>
html>
In het bovenstaande codeblok is er een ouder "houder"div met een lege h1 element. De src attribuut op de script tag verwijst naar het pad naar de Less CSS Compiler.
Zonder dit script tag, kan de browser uw code niet begrijpen. U kunt ook Less CSS op uw computer installeren via Knooppuntpakketbeheerder (NPM), door de volgende opdracht in de terminal uit te voeren:
npm install -g minder
Wanneer u klaar bent om het .minder bestand, voert u gewoon de onderstaande opdracht uit, waarbij u ervoor zorgt dat u het bestand opgeeft waarnaar de compiler de uitvoer moet schrijven.
lessc stijl.less stijl.css
In de stijl.minder bestand, maak twee variabelen aan, namelijk: containerbreedte En container-bg-kleur om de breedte en achtergrondkleur van de afbeelding weer te geven "houder"div respectievelijk.
@containerbreedte: 50rem;
@container-bg-kleur: geel;
Maak vervolgens drie variabelen aan, namelijk: snaar, patroon, En vervanging. Voeg vervolgens de stijlen toe voor de "houder"div en de h1 element.
@snaar: "Hallo van de kinderen van planeet Aarde!";
@patroon: "kinderen van planeet Aarde!";
@vervanging: "inwoners van Pluto!";.container{
breedte: @containerbreedte;
Achtergrond kleur: @container-bg-kleur;
opvulling: als(@containerbreedte > 30rem, bereik(20px, 80px, 20),"");
grens: stevig;
}
h1:eerstgeborene::na{
inhoud: vervangen(@snaar,@patroon,@vervanging);
}
In het codeblok hierboven, de bereik() functie stelt de opvulling pand op de "houder"div. De Less-compiler moet de stijl.minder bestand in het volgende:
.container {
breedte: 50rem;
Achtergrond kleur: geel;
opvulling: 20px 40px 60px 80px;
grens: stevig;
}
h1:eerstgeborene::na {
inhoud: "HallovandeinwonersvanPluto!";
}
Wanneer u de index.htm bestand in de browser, dit is wat u zou moeten zien:
Verbeter uw productiviteit met CSS-preprocessors
In reguliere programmeertalen verminderen functies de hoeveelheid code die u nodig hebt om te schrijven en minimaliseren ze het aantal fouten. CSS-preprocessors zoals Less bieden verschillende functies die het gemakkelijker maken om CSS-code te schrijven.
CSS-preprocessors zijn handig bij het werken met grote bestanden. Ze maken het gemakkelijker om problemen op te sporen, waardoor de productiviteit van de ontwikkelaar wordt verbeterd.