Share
Att hantera den sanna kraften hos en CSS preprocessor är ett äventyr. Det finns otaliga språk, syntaxer och funktioner, alla redo att användas just nu.
I den här artikeln kommer vi att täcka de olika funktionerna och fördelarna med att använda tre olika förprocessorer-Sass, LESS och Stylus.
Preprocessorer producerar CSS som fungerar i alla webbläsare.
CSS3 preprocessorer är språk skrivna för det enda syftet att lägga till coola, uppfinningsrika funktioner till CSS utan att bryta webbläsarkompatibiliteten. De gör det genom att sammanställa koden vi skriver till vanlig CSS som kan användas i alla webbläsare hela vägen tillbaka till stenåldern. Det finns tusentals funktioner som förprocessorer tar med sig till bordet, och i den här artikeln kommer vi att täcka några av de publicerade, och några av de inte så publicerade. Låt oss börja.
Den viktigaste delen av skrivkoden i en CSS preprocessor är att förstå syntaxen. Lyckligtvis för oss är syntaxen (eller kan vara) identisk med vanlig CSS för alla tre förprocessorer.
Sass och LESS använder båda standard CSS-syntaxen. Detta gör det extremt enkelt att konvertera en befintlig CSS-fil till antingen preprocessor. Sass använder .SCSS filtillägg och MINDER använder .mindre förlängning. Den grundläggande Sass- eller LESS-filen kan ställas in som nedan:
/ * style.scss eller style.less * / h1 färg: # 0982C1;
Som du kanske har märkt är detta bara vanlig CSS, som kompilerar perfekt både i Sass och LESS.
Det är viktigt att notera att Sass också har en äldre syntax, som utelämnar semikolon och lockiga fästen. Även om detta fortfarande finns är det gammal och vi kommer inte använda det förbi detta exempel. Syntaxen använder .sass filtillägg och ser så här ut:
/ * style.sass * / h1 färg: # 0982c1
Syntaxen för Stylus är mycket mer verbos. Använda .styl filtillägg, accepterar Stylus standard CSS-syntaxen, men det accepterar också några andra variationer där parenteser, kolonner och halvkolon är alla valfria. Till exempel:
/ * style.styl * / h1 färg: # 0982C1; / * omit parentes * / h1 färg: # 0982C1; / * omit kolon och halvkolonor * / h1 färg # 0982C1
Att använda olika variationer i samma stilark är också giltigt, så följande kommer att kompilera utan fel.
h1 färg # 0982c1 h2 typsnittstorlek: 1.2em
Variabler kan deklareras och användas i stilarket. De kan ha något värde som är ett CSS-värde (t ex färger, siffror [enheter inkluderade] eller text.), Och kan hänvisas var som helst i vårt stylesheet.
Sass-variablerna är prepended med $ symbol och värdet och namnet är separerade med en semikolon, precis som en CSS-egenskap.
$ mainColor: # 0982c1; $ siteWidth: 1024px; $ borderStyle: prickad; kropp färg: $ mainColor; gränsen: 1px $ borderStyle $ mainColor; max bredd: $ siteWidth;
LÄSER variabler är exakt samma som Sass variabler, förutom att de variabla namnen läggs upp med @ symbol.
@mainColor: # 0982c1; @siteWidth: 1024px; @borderStyle: prickad; kropp färg: @mainColor; gräns: 1px @ borderStyle @mainColor; max bredd: @siteWidth;
Stylusvariabler kräver inte någonting att läggas till dem, även om det tillåter $ symbol. Som alltid krävs det slutliga semikolonet, men ett lika tecken mellan värdet och variabeln är. En sak att notera är att Stylus (0.22.4) sammanställer om vi förbereder @ symbol för ett variabelt namn, men kommer inte att tillämpa värdet när det hänvisas. Med andra ord, gör inte det.
mainColor = # 0982c1 siteWidth = 1024px $ borderStyle = prickad kroppsfärg mainColor gräns 1px $ borderStyle mainColor maxbredd siteWidth
Vart och ett av ovanstående filer kommer att kompilera till samma CSS. Du kan använda din fantasi för att se hur användbara variabler kan vara. Vi behöver inte längre ändra en färg och måste skriva in den tjugo gånger, eller vill ändra vår bredd på sidan och måste gräva för att hitta den. Här är CSS efter sammanställning:
kropp färg: # 0982c1; gräns: 1px prickad # 0982c1; max bredd: 1024px;
Om vi behöver referera till flera element med samma förälder i vår CSS, kan det vara tråkigt att fortsätta skriva förälder om och om igen.
avsnitt marginal: 10px; avsnitt nav höjd: 25px; avsnitt nav a color: # 0982C1; avsnitt nav a: svävar text-decoration: underline;
Istället, med hjälp av en förbehandlare, kan vi skriva barnselektorerna inom föräldrars parentes. Även & symbol hänvisar till moderväljaren.
Samtliga tre förprocessorer har samma syntax för nestande selektorer.
avsnitt marginal: 10px; nav höjd: 25px; en färg: # 0982C1; &: sväva text-decoration: underline;
Detta är den sammanställda CSS från koden ovan. Det är exakt detsamma som när vi började - hur bekvämt!
avsnitt marginal: 10px; avsnitt nav höjd: 25px; avsnitt nav a color: # 0982C1; avsnitt nav a: svävar text-decoration: underline;
Mixins är funktioner som tillåter återanvändning av egenskaper genom vårt stilark. Snarare än att behöva gå hela vårt stilark och ändra en egenskap flera gånger, kan vi nu bara ändra det inom vår mixin. Detta kan vara mycket användbart för specifika styling av element och leverantörs prefix. När mixins kallas från en CSS-väljare är mixin-argumenten igenkända och stilarna i mixin appliceras på väljaren.
/ * Sass mixin-fel med (valfritt) argument $ borderWidth som standard till 2px om det inte anges * / @mixin error ($ borderWidth: 2px) border: $ borderWidth solid # F00; färg: # F00; .generic-error padding: 20px; marginal: 4px; @include error (); / * Tillämpar stilar från mixin error * / .login-error left: 12px; position: absolut; topp: 20px; @include error (5px); / * Tillämpar stilar från mixin-fel med argument $ borderWidth lika med 5px * /
/ * LÄGRE mixinfel med (valfritt) argument @borderWidth som standard till 2px om det inte anges * / .error (@borderWidth: 2px) border: @borderWidth solid # F00; färg: # F00; .generic-error padding: 20px; marginal: 4px; .fel(); / * Tillämpar stilar från mixin error * / .login-error left: 12px; position: absolut; topp: 20px; .error (5px); / * Tillämpar stilar från mixin-fel med argument @borderWidth lika med 5px * /
/ * Stylus mixin fel med (valfritt) argument borderWidth som standard till 2px om inte specificerat * / error (borderWidth = 2px) border: borderWidth solid # F00; färg: # F00; .generic-error padding: 20px; marginal: 4px; fel(); / * Tillämpar stilar från mixin error * / .login-error left: 12px; position: absolut; topp: 20px; fel (5px); / * Tillämpar stilar från mixin error med argument borderWidth lika med 5px * /
Alla förprocessorer sammanställer till samma kod nedan:
.generiskt fel vaddering: 20px; marginal: 4px; gräns: 2px solid # f00; färg: # f00; .login-error left: 12px; position: absolut; topp: 20px; gränsen: 5px solid # f00; färg: # f00;
När vi skriver CSS på det gammaldags sättet kan vi använda följande kod för att tillämpa samma stilar på flera element samtidigt:
p, ul, ol / * stilar här * /
Det fungerar bra, men om vi behöver ytterligare utforma elementen individuellt, måste en annan väljare skapas för varje och det kan snabbt bli snabbare och svårare att behålla. För att motverka detta kan arv användas. Erfarenhet är förmågan för andra CSS-väljare att ärva en egen väljare egenskaper.
.blockera margin: 10px 5px; vaddering: 2px; p @extend .block; / * Förnya stilar från '.block' * / border: 1px solid #EEE; ul, ol @extend .block; / * Förnya stilar från '.block' * / color: # 333; text-transform: stor bokstav;
.block, p, ul, ol margin: 10px 5px; vaddering: 2px; p border: 1px solid #EEE; ul, ol färg: # 333; text-transform: stor bokstav;
MINDER stöder verkligen inte arvande stilar som Sass och Stylus. I stället för att lägga till flera selektorer till en uppsättning egenskaper, behandlar den arv som en mixin utan argument och importerar stilar till egna selektorer. Nackdelen med detta är att egenskaperna upprepas i ditt sammanställda stilark. Så här skulle du ställa in det:
.blockera margin: 10px 5px; vaddering: 2px; p .block; / * Förnya stilar från '.block' * / border: 1px solid #EEE; ul, ol .block; / * Förnya stilar från '.block' * / color: # 333; text-transform: stor bokstav;
.blockera margin: 10px 5px; vaddering: 2px; p marginal: 10px 5px; vaddering: 2px; gränsen: 1px solid #EEE; ul, ol marginal: 10px 5px; vaddering: 2px; färg: # 333; text-transform: stor bokstav;
Som du kan se, stilar från .blockera infördes i selektorerna som vi ville ge ärvet till. Det är viktigt att notera att prioritet kan bli ett problem här, var försiktig.
I CSS-communityet importeras CSS för att det krävs flera HTTP-förfrågningar. Importera med en förbehandlare fungerar emellertid annorlunda. Om du importerar en fil från någon av de tre förprocessorerna kommer det bokstavligen inkludera Importen under kompileringen skapar endast en fil. Tänk på att det importeras regelbundet .css filer kompilerar med standardvärdet @import "file.css"; koda. Dessutom kan mixins och variabler importeras och användas i ditt huvudsakliga stilark. Import gör det möjligt att skapa separata filer för organisation.
/ * fil. typ * / body background: #EEE;
@import "reset.css"; @import "-filen. typ"; p bakgrund: # 0982C1;
@import "reset.css"; kropp bakgrund: #EEE; p bakgrund: # 0982C1;
Färgfunktioner är inbyggda i funktioner som förvandlar en färg vid sammanställning. Detta kan vara mycket användbart för att skapa gradienter, mörkare svävarfärger och mycket mer.
lätta ($ färg, 10%); / * returnerar en färg 10% lättare än $ color * / darken ($ color, 10%); / * returnerar en färg 10% mörkare än $ color * / saturate ($ color, 10%); / * returnerar en färg 10% mer mättad än $ color * / desaturate ($ color, 10%); / * returnerar en färg 10% mindre mättad än $ färg * / gråskala ($ färg); / * returnerar gråskala av $ color * / complement ($ color); / * returnerar komplementfärgen på $ color * / invert ($ color); / * returnerar inverterad färg på $ color * / mix ($ color1, $ color2, 50%); / * mix $ color1 med $ color2 med en vikt på 50% * /
Det här är bara en kort lista över tillgängliga färgfunktioner i Sass, en fullständig lista över tillgängliga Sass-färgfunktioner kan hittas genom att läsa Sass-dokumentationen.
Färgfunktioner kan användas var som helst en färg är giltig CSS. Här är ett exempel:
$ färg: # 0982C1; h1 bakgrund: $ color; gräns: 3px solid mörkare ($ färg, 50%);
lätta (@färg, 10%); / * returnerar en färg 10% lättare än @color * / darken (@color, 10%); / * returnerar en färg 10% mörkare än @färg * / mättad (@färg, 10%); / * returnerar en färg 10% mer mättad än @färg * / desaturat (@färg, 10%); / * returnerar en färg 10% mindre mättad än @färg * / spin (@färg, 10); / * returnerar en färg med en 10 grader större i färg än @color * / spin (@color, -10); / * returnerar en färg med en 10 graders mindre färg än @color * / mix (@ color1, @ color2); / * returnera en mix av @ color1 och @ color2 * /
En lista över alla MINDRE funktioner kan hittas genom att läsa MINDRE dokumentationen.
Här är ett exempel på hur du använder en färgfunktion i MINDER:
@color: # 0982C1; h1 bakgrund: @color; gräns: 3px solid mörkare (@färg, 50%);
lätta (färg, 10%); / * returnerar en färg 10% lättare än "färg" * / mörkare (färg, 10%); / * returnerar en färg 10% mörkare än "färg" * / mättnad (färg, 10%); / * returnerar en färg 10% mer mättad än "färg" * / desaturerad (färg, 10%); / * returnerar en färg 10% mindre mättad än "färg" * /
En fullständig lista över alla Stylus-färgfunktioner kan hittas genom att läsa Stylus Documentation.
Här är ett exempel med hjälp av Stylus-färgfunktioner:
färg = # 0982C1 h1 bakgrundsfärggräns 3px solid mörkare (färg, 50%)
Att göra matematik i CSS är ganska användbar, och nu fullt möjligt. Det är enkelt och det här är hur man gör det:
kropp margin: (14px / 2); topp: 50px + 100px; höger: 100px - 50px; vänster: 10 * 10;
Vi har täckt många funktioner och nya saker som förprocessorer kan göra, men vi har inte täckt något praktisk eller praktisk. Här är en kort lista över verkliga applikationer där användning av en förprocessor är en livsuppehållare.
Detta är en av de hyped orsakerna till att använda en förprocessor och av mycket bra skäl - det sparar massor av tid och tårar. Att skapa en mixin för att hantera leverantörs prefix är enkel och sparar mycket repetition och smärtsam redigering. Så här gör du det:
@mixin border-radius ($ -värden) -webkit-border-radius: $ values; -moz-gränsen-radien: $ värden; gränslinje: $ värden; div @ include border-radius (10px);
.gränsvärdet (@values) -webkit-border-radius: @values; -moz-gränsen-radien: @värden; gränsstråle: @värden; div .border-radius (10px);
gränsvärdet (värden) -webkit-border-radius: values; -moz-gränsen-radien: värden; gränsstråle: värden; div gränsstråle (10px);
div -webkit-border-radius: 10px; -moz-gränsen-radien: 10px; gränsstråle: 10px;
Faking 3D-text med flera text-skuggor är en smart idé. Det enda problemet är att byta färg efter det faktum är svårt och besvärligt. Med hjälp av mixins och färgfunktioner kan vi skapa 3D-text och ändra färg i flygningen!
@mixin text3d ($ color) färg: $ color; textskugga: 1px 1px 0px mörkare ($ färg, 5%), 2px 2px 0px mörkare ($ färg, 10%), 3px 3px 0px mörkare ($ färg, 15%), 4px 4px 0px mörkare ($ färg, 20% ), 4px 4px 2px # 000; h1 font-size: 32pt; @ inkludera text3d (# 0982c1);
.text3d (@color) färg: @color; textskugga: 1px 1px 0px mörkare (@färg, 5%), 2px 2px 0px mörkare (@färg, 10%), 3px 3px 0px mörkare (@färg, 15%), 4px 4px 0px mörkare (@färg, 20% ), 4px 4px 2px # 000; span font-size: 32pt; .text3d (# 0982c1);
text 3d (färg) färg: färg textskugga: 1px 1px 0px mörkare (färg, 5%), 2px 2px 0px mörkare (färg, 10%), 3px 3px 0px mörkare (färg, 15%), 4px 4px 0px mörk , 20%), 4px 4px 2px # 000 span typsnitt: 32pt text3d (# 0982c1)
Jag valde att skriva Stylus text-skuggor på en rad eftersom jag utelämnade de krökta parenteserna.
span font-size: 32pt; färg: # 0982c1; textskugga: 1px 1px 0px # 097bb7, 2px 2px 0px # 0875ae, 3px 3px 0px # 086fa4, 4px 4px 0px # 07689a, 4px 4px 2px # 000;
Använda nummeroperationer och variabler för kolumner är en idé som jag kom fram när jag spelade första gången med CSS preprocessorer. Genom att förklara önskad bredd i en variabel kan vi enkelt ändra den på vägen utan någon mental matematik. Så här är det gjort:
$ siteWidth: 1024px; $ gutterWidth: 20px; $ sidobar Bredd: 300px; kropp marginal: 0 auto; bredd: $ siteWidth; .content float: left; bredd: $ siteWidth - ($ sidebarWidth + $ gutterWidth); .sidebar float: left; marginal-vänster: $ gutterWidth; bredd: $ sidfält Bredd;
@siteWidth: 1024px; @gutterWidth: 20px; @sidebar Bredd: 300px; kropp marginal: 0 auto; bredd: @siteWidth; .content float: left; bredd: @siteWidth - (@ sidebarWidth + @ gutterWidth); .sidebar float: left; marginal-vänster: @gutterWidth; bredd: @sidebarWidth;
siteWidth = 1024px; gutterWidth = 20px; sidebarWidth = 300px; kropp marginal: 0 auto; bredd: siteWidth; .content float: left; bredd: siteWidth - (sidebar Bredd + gutterWidth); .sidebar float: left; marginal-vänster: gutterWidth; bredd: sidebar Bredd;
kropp marginal: 0 auto; bredd: 1024px; .content float: left; bredd: 704px; .sidebar float: left; marginal-vänster: 20px; bredd: 300px;
Det finns en hel del quirks att använda en CSS preprocessor. Jag ska gå över några av de roliga, men om du verkligen är intresserad av att hitta dem, rekommenderar jag dig att skura dokumentationen eller, än bättre, bara börja använda en förprocessor i din dagliga kodning.
Om du har skrivit CSS för en anständig tid, är du säker på att du har nått en punkt där du hade ett fel någonstans och helt enkelt inte kunde hitta den. Om du är något som jag spenderade du nog på eftermiddagen och drar ut ditt hår och kommenterade olika saker för att jaga felet.
CSS preprocessorer rapporterar fel. Det är bara så enkelt. Om det är något fel med din kod berättar du var, och om du har tur: varför. Du kan kolla in det här blogginlägget om du är intresserad av att se hur fel rapporteras i de olika preprocessorerna.
När du sammanställer med en CSS-förprocessor, kommer eventuell dubbel-snedstreck avlägsnas (t.ex.. //kommentar) och eventuella slash-asterisk-kommentarer kvarstår (t.ex.. /* kommentar */). Med det sagt, använd dubbla snedstreck för kommentarer du vill ha på den icke-sammanställda sidan och snedstreck-asterisk för kommentarer du vill synlig efter sammanställningen.
Bara en anteckning: om du sammanställer minifierad tas alla kommentarer bort.
Varje CSS-förprocessor vi täckte (Sass, LESS och Stylus) har sitt eget unika sätt att utföra samma uppgift, vilket ger utvecklare möjligheten att använda användbara, ostödda funktioner samtidigt som webbläsarkompatibilitet och kodrenlighet hålls.
Även om det inte är ett krav på utveckling, kan förprocessorer spara mycket tid och ha några mycket användbara funktioner.
Jag uppmuntrar er alla att försöka så många av förbehandlarna som möjligt så att du effektivt kan välja en favorit och vet varför den är begåvad över de många andra. Om du inte har försökt använda en förbehandlare för att skriva din CSS rekommenderar jag starkt att du provar.
Har du en favorit CSS preprocessor-funktion som jag inte nämnde? Finns det något man kan göra som en annan inte kan? Låt oss veta i kommentarerna nedan!
Ett speciellt tack till Karissa Smith, en super-begåvad vän av mig som skapade förhandsgranskningsminnebilden för den här artikeln.
Accentsconagua