CSS-preprocessorer är skriptspråk som utökar standardfunktionerna i CSS. De gör det möjligt för oss att använda logik i vår CSS-kod, till exempel variabler, nestning, arv, mixins, funktioner och matematiska operationer. CSS-preprocessorer gör det enkelt att automatisera repetitiva uppgifter, minska antalet fel och uppblåst kod, skapa återanvändbara kodsnuttar och säkerställa bakåtkompatibilitet.
Varje CSS-preprocessor har sin egen syntax som de sammanställer till vanlig CSS så att webbläsare kan rendera den på klientsidan. För närvarande är de tre mest populära och stabila CSS-preprocessorerna LESS, Sass och Stylus, men det finns också många mindre. CSS-preprocessorer gör alla liknande saker men på ett annat sätt och med sina egna syntaxer. Var och en av dem har några avancerade funktioner som är unika för dem och deras eget ekosystem (verktyg, ramverk, bibliotek) också.
Idag handlar det om LESS.
1. @variabler
Variabler gör din kod enklare att underhålla genom att ge dig ett sätt att kontrollera dessa värden från en enda plats:
// Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
// Usage
a,
.link {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}
.widget {
color: #fff;
background: @link-color;
}
1.1 @Nästlade väljare
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
Resultat efter kompilering:
.button-ok {
background-image: url("ok.png");
}
.button-cancel {
background-image: url("cancel.png");
}
.button-custom {
background-image: url("custom.png");
}
2. @importerar
CSS @import gör en annan http-begäran för att hämta en annan stilmall, medan en Less @import tar tag i innehållet från din importerade fil och inkluderar det i den sammanställda stilmallen. Detta innebär endast en http-begäran, så att du kan skapa partialer och organisera din css bara lite bättre utan några nackdelar!
En normal import hämtar innehållet i den filen och dumpar det i den fil som ber om det. Super användbart. Att sammanfoga filer är en mycket viktig funktion i preprocessorer.
/* Normal import */ @import "colors-or-whatever.less";
En (referens)import gör inte det. Faktum är att den inte lägger in något alls i den fil som ber om det. Koden i den filen är just nu redo att användas, antingen genom att anropa en mixin i den eller genom att utöka en väljare i den.
@import (reference) "https://s3-us-west-2.amazonaws.com/s.cdpn.io/18728/pure.less";
.my-button {
&:extend(.pure-button all);
}
3. @mixins
Mixins kopierar alla egenskaper till en selektor, vilket kan leda till onödig duplicering. Därför kan du använda extends istället för mixins för att flytta väljaren upp till de egenskaper du vill använda, vilket leder till att mindre CSS genereras.
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
Resultat efter kompilering:
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}
4. @förläng
Extend är en Less-pseudoklass som sammanfogar den väljare den är placerad på med sådana som matchar det den refererar till.
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
Resultat efter kompilering:
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
5. @math
Matematiska funktioner omfattar metoder som används för att utföra numeriska operationer, t.ex. avrundning, kvadratrot, potensvärde, modulus, procent etc.
@nav-height: 60px;
body {
padding-top: @nav-height + 40px;
}
.nav {
position: fixed;
top: 0;
width: 100%;
height: @nav-height;
}
.one-third {
width: (100% / 3);
}
Resultat efter kompilering:
body {
padding-top: 100px;
}
.nav {
position: fixed;
top: 0;
width: 100%;
height: 60px;
}
.one-third {
width: 33.33333333%;
}
6. @loops
En av de bästa sakerna med LESS är att du kan göra loopar och bygga klasser dynamiskt.
Följande exempel är att dynamiskt skapa klasser i steg om 10. Jag kunde ha skrivit 10 klasser, men det här sättet är mycket trevligare och lättare att underhålla.
.mixin-loop (@index) when (@index > 0) {
.per-@{index}0 {
display: inline-block;
width: @index * 10%;
}
.mixin-loop(@index - 1);
}
.mixin-loop(10);
Resultat efter kompilering:
.per-100 {
display: inline-block;
width: 100%;
}
.per-90 {
display: inline-block;
width: 90%;
}
.per-80 {
display: inline-block;
width: 80%;
}
.per-70 {
display: inline-block;
width: 70%;
}
.per-60 {
display: inline-block;
width: 60%;
}
.per-50 {
display: inline-block;
width: 50%;
}
.per-40 {
display: inline-block;
width: 40%;
}
.per-30 {
display: inline-block;
width: 30%;
}
.per-20 {
display: inline-block;
width: 20%;
}
.per-10 {
display: inline-block;
width: 10%;
}