Home-theater-designers
Less CSS er en robust og dynamisk CSS-forprosessor som har høstet betydelig oppmerksomhet og popularitet de siste årene. Som en forprosessor fungerer den som en forlengelse av 'Vanilla CSS', det tradisjonelle CSS-stylingspråket som brukes i webutvikling, ved å tilby en rekke tilleggsfunksjoner og funksjonaliteter som forbedrer den generelle stylingopplevelsen.
Dagens MUO-video RULL FOR Å FORTSETTE MED INNHOLD
Hvis du er godt kjent med å skrive standard CSS, kan du sømløst gå over til å bruke mindre CSS uten en bratt læringskurve. Denne kompatibiliteten gjør det enkelt å vedlikeholde din eksisterende CSS-kunnskap mens du utnytter de avanserte egenskapene til Less.
Hva er funksjoner og hvorfor er de viktige?
I programmering er en funksjon en kodeblokk som utfører en spesifikk oppgave. Du kan også gjenbruke det et annet sted i programmet. Funksjoner tar vanligvis inn data, behandler dem og returnerer resultatene.
De gjør det enkelt å redusere duplikatkode i et program. La oss for eksempel si at du har et program som beregner rabatten basert på prisen brukeren legger inn. I en språk som JavaScript , kan du implementere det slik:
function checkDiscount(price, threshold){
if (price >= threshold){
let discount = 5/100 * price;
return `Your discount is $${discount}`;
} else {
return `Sorry, this item does not qualify for a discount. `
}
}
Deretter kan du ringe funksjonen og sende inn pris og terskel .
let price = prompt("Enter the item price: ")
alert(checkDiscount(price, 500))
Ved å abstrahere bort logikken for å sjekke rabatter, er programmet ikke bare lesbart, men du har nå en gjenbrukbar kodeblokk som behandler rabatten og returnerer resultatet. Det er mye mer funksjoner kan gjøre, men dette er bare det grunnleggende.
Forstå funksjoner i mindre CSS
I tradisjonell CSS er det et svært begrenset sett med funksjoner tilgjengelig for deg som utvikler. En av de mest populære funksjonene i CSS er calc() matematisk funksjon som gjør akkurat det det ser ut til – det utfører beregninger og bruker resultatet som en egenskapsverdi i CSS.
p{
background-color: red;
width: calc(13px - 4px);
}
I Less CSS er det flere funksjoner som gjør mer enn bare aritmetiske operasjoner. En funksjon du kan komme over i Less er hvis funksjon. De hvis funksjonen tar inn tre parametere: en betingelse og to verdier. Kodeblokken nedenfor viser hvordan du kan bruke denne funksjonen:
@width: 10px;
@height: 20px;
div{
margin:if((@width > @height), 10px, 20px)
}
I kodeblokken ovenfor sjekker Less-kompilatoren om variabelen bredde (definert av @ symbol) er større enn variabelen høyde . Hvis betingelsen er sann, returnerer funksjonen den første verdien etter betingelsen (10px). Ellers returnerer funksjonen den andre verdien (20px).
Etter kompileringen skal CSS-utgangen se omtrent slik ut:
div {
margin: 20px;
}
Hvordan bruke en boolsk på mindre
En boolsk er en variabel som har to mulige verdier: ekte eller falsk . Med boolsk() funksjon i Less, kan du lagre den sanne eller falske verdien av et uttrykk i en variabel for senere bruk. Slik fungerer det.
@text-color: red;
@bg-color: boolean(@text-color = red);
I kodeblokken ovenfor sjekker Less-kompilatoren om tekst-farge er rød. Og så bg-farge variabel lagrer verdien.
div{
background-color: if(@bg-color,green,yellow);
}
Kodeblokken ovenfor kompilerer ned til noe som dette:
div {
background-color: green;
}
Erstatte tekst i en streng med replace()-funksjonen
Syntaksen for erstatte() funksjonen ser slik ut:
replace(string, pattern, replacement, flags)
streng representerer strengen du vil søke og erstatte i. mønster er strengen å søke etter. mønster kan også være et regulært uttrykk, men det er vanligvis en streng. Etter en vellykket match erstatter Less CSS-kompilatoren den mønster med erstatning .
Eventuelt erstatte() funksjonen kan også inneholde flagg parameter for regulære uttrykksflagg.
@string: "Hello";
@pattern: "ello";
@replacement: "i";
div::before{
content: replace(@string,@pattern,@replacement)
}
Kodeblokken ovenfor skal resultere i følgende etter kompilering:
div::before {
content: "Hi";
}
Liste funksjoner i mindre CSS
I Mindre CSS bruker du komma eller mellomrom for å definere en liste med verdier. For eksempel:
@groceries: "bread", "banana", "potato", "milk";
Du kan bruke lengde() funksjon for å evaluere antall elementer i listen.
@result: length(@groceries);
Du kan også bruke ekstrakt() funksjon for å trekke ut verdien ved en bestemt posisjon. For eksempel, hvis du ønsker å få det tredje elementet i dagligvarer listen gjør du følgende:
@third-element: extract(@groceries, 3);
I motsetning til vanlige programmeringsspråk der listeindeksen starter fra 0, er startindeksen til en liste i Less CSS alltid 1.
En annen listefunksjon som kan komme godt med når du bygger nettsteder med Less, er område() funksjon. Den tar inn tre parametere. Den første parameteren spesifiserer startposisjonen i området. Den andre parameteren angir endeposisjonen og den siste parameteren angir økningen eller reduksjonsverdien mellom hvert element i området. Hvis ikke oppgitt, er standardverdien 1.
hvordan legge til apper til vizio tv
div {
margin: range(10px, 40px, 10);
}
Kodeblokken ovenfor bør kompileres til følgende:
div {
margin: 10px 20px 30px 40px;
}
Som du kan se, starter Less CSS-kompilatoren fra 10px, og øker den forrige verdien med 10, til den når sluttposisjonen (40px).
Bygg et enkelt nettsted med færre CSS-funksjoner
Det er på tide å samle alt du har lært og lage et enkelt prosjekt med mindre CSS. Opprett en mappe og legg til index.htm og stil.mindre filer.
Åpne index.htm fil og legg til følgende HTML-kode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="style.less" />
<title>Document</title>
</head>
<body>
<div class="container">
<h1>
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/less" ></script>
</body>
</html>
I kodeblokken ovenfor er det en forelder 'container' div med en tom h1 element. De src attributt på manus taggen peker på banen til Less CSS-kompilatoren.
Uten dette manus -taggen, vil ikke nettleseren kunne forstå koden din. Alternativt kan du installere Less CSS på datamaskinen din via Node Package Manager (NPM) , ved å kjøre følgende kommando i terminalen:
npm install -g less
Når du er klar til å kompilere .mindre fil, bare kjør kommandoen nedenfor, og pass på at du spesifiserer filen som kompilatoren skal skrive utdataene til.
lessc style.less style.css
I stil.mindre fil, lag to variabler, nemlig: container-bredde og container-bg-farge for å representere bredden og bakgrunnsfargen til 'container' div hhv.
@container-width: 50rem;
@container-bg-color: yellow;
Deretter oppretter du tre variabler, nemlig: streng , mønster, og erstatning . Deretter legger du til stilene for 'container' div og h1 element.
@string: "Hello from the children of planet Earth!";
@pattern: "children of planet Earth!";
@replacement: "inhabitants of Pluto!";
.container{
width: @container-width;
background-color: @container-bg-color;
padding: if(@container-width > 30rem, range(20px, 80px, 20),"");
border: solid;
}
h1:first-child::after{
content: replace(@string,@pattern,@replacement);
}
I kodeblokken ovenfor vises område() funksjonen setter polstring eiendom på 'container' div . Less-kompilatoren bør kompilere stil.mindre fil i følgende:
.container {
width: 50rem;
background-color: yellow;
padding: 20px 40px 60px 80px;
border: solid;
}
h1:first-child::after {
content: "Hello from the inhabitants of Pluto!";
}
Når du åpner index.htm fil i nettleseren, dette er hva du bør se:
Forbedre produktiviteten med CSS-forbehandlere
I vanlige programmeringsspråk reduserer funksjoner mengden kode du trenger for å skrive og minimerer feil. CSS-forprosessorer som Less har flere funksjoner som gjør det enklere å skrive CSS-kode.
CSS-forprosessorer kommer godt med når du arbeider med store filer. De gjør det lettere å feilsøke problemer, og forbedrer dermed produktiviteten til utvikleren.