Preprocessor CSS: överblick, urval, applikation

Absolut alla erfarna webbdesigners använder preprocessor. Det finns inga undantag. Om du vill lyckas i denna verksamhet, glöm inte om dessa program. Vid en första anblick kan de orsaka en nybörjare tyst fasa - det är alltför likt programmeringen! I själva verket kan du ta itu med alla funktioner i CSS preprocessor för ungefär en dag, och om du försöker, sedan ett par timmar. I framtiden kommer de avsevärt förenkla ditt liv.

Hur gjorde CSS preprocessor

För att bättre förstå egenskaperna hos denna teknik, kort gräva i historien om den visuella presentationen av webbsidor.

När bara börjat den massiva användningen av Internet, gjorde inga formatmallar inte. Utförande av dokument berodde helt och hållet på webbläsaren. Var och en av dem hade sina egna stilar, som har använts för behandling av vissa taggar. Följaktligen sidorna ser olika ut beroende på i vilken ordning webbläsaren du öppnar dem. Resultatet - kaos, förvirring, problem för utvecklare.

År 1994 norska forskaren Håkon Lie utvecklat en formatmall som kan användas för utseende av sidorna separat från HTML-dokument. Idén priglanulas medlemmar i W3C, som genast ut till slut. Några år senare publicerade han en första version av CSS-specifikationen. Då blev hon ständigt förbättras, att färdigställas ... Men begreppet förblev alla samma: varje stil ställa in vissa egenskaper.

Använda CSS tabeller har alltid varit problematisk. Till exempel, webbdesigners hade ofta problem med sortering och gruppering funktioner och arv är inte så enkelt.

Och sedan kom 2000:e. Markeringar alltmer började engagera sig i professionella front-end utvecklare, vilket är viktigt att vara flexibel och dynamisk arbets stilar. Existerade vid tiden krävde CSS prefix placering och spårning stödja de nya funktionerna i webbläsaren. Sedan, genom JavaScript och Ruby experter kom ner till affärer, vilket skapar en preprocessor - överbyggnad för CSS är nya funktioner läggs till det.

CSS för nybörjare: förprocessorn funktioner

De har flera funktioner:

• förena webbläsaren prefix och khaki;

• förenkla syntax;

• ger möjlighet att arbeta med kapslade väljare utan fel;

• förbättra logik styling.

Kort sagt: preprocessorn lägger CSS programmering logik kapacitet. Nu är styling inte utförs i den vanliga listan över stilar och med några enkla tekniker och metoder: variabler, funktioner, pirål, cyklar villkor. Dessutom, förmågan att använda matematik.

Att se populariteten av dessa tillägg har W3C börjat att gradvis lägga till möjligheten av dem i CSS-kod. Till exempel, i beskrivningen så det calc () funktionen, som stöds av många webbläsare. Det förväntas att det snart kommer att vara möjligt att ställa in variabler och skapa en pirål. Detta kommer dock att ske i en avlägsen framtid, och preprocessorer redan här och redan fungerar bra.

Populära preprocessorer CSS. sass

Designad 2007. Ursprungligen en komponent HAML - en mall HTML. Nya funktioner för CSS element styr njöt utvecklare på Ruby on Rails, som började sprida det överallt. Den Sass ett stort antal funktioner som nu ingår i någon preprocessor: variabler, inbäddning av väljare, pirål (då, men dessa argument kan inte läggas till).

Deklarera variabler i Sass

Variabler deklareras med $ tecken. De kan behålla sina egenskaper och apparater, till exempel: "$ borderSolid: 1px solid red;". I det här exemplet, förklarade vi en variabel som heter borderSolid och sparat det värde 1px solid red. Om nu i CSS måste vi skapa en röd bredd 1px gräns indikerar helt enkelt att variabeln efter egenskapsnamn. Efter tillkännagivandet av variablerna inte kan ändras. Det finns flera inbyggda funktioner. Till exempel, deklarerar en variabel med ett värde av $ redcolor # FF5050. Nu, i CSS-kod i egenskaperna för alla element, använda den för att ställa in font color: p {color: $ redColor; }. Vill du experimentera med färg? Använd funktionen mörkare eller ljusare. Detta görs så: p {färg: mörkna ($ redColor, 20%); }. Som ett resultat kommer färgen redColor vara 20% lättare.

SASS många inbyggda funktioner. Värt åtminstone läsa dem, men bättre - att lära sig.

nesting

Tidigare att indikera kapsling var tvungen att använda en lång och obekväm design. Föreställ dig att vi har en div som är p, och det i sin tur satt span. För div vi måste ställa in font color red för p - gul, för span - rosa. I en typisk CSS det skulle göras på följande sätt:

div {

färg: röd;

}

div p {

färg: gul;

}

div p span {

färg: rosa;

}

Med CSS preprocessor alla blir lättare och mer kompakt:

div {

färg: röd;

p {

färg: gul;

.span {

färg: rosa;

}

}

}

Elements bokstavligen "investerat" varandra.

direktiv förprocessorn

Använda direktiv @ import kan importera filer. Till exempel har vi fonts.sass fil som förklarar formaten för typsnitt. Anslut den till huvudfilen style.sass: @ import 'typsnitt'. Klart! I stället för en enda stor fil med stilar vi har några som kan användas för snabb och enkel tillgång till de egenskaper som krävs.

pirål

En av de mest intressanta idéer. Det gör att en rad för att ställa en uppsättning egenskaper. Fungera enligt följande:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Pirål gälla elementet på sidan, använd direktivet @include. Till exempel vill vi tillämpa den på h1 header. Vi har följande struktur: h1 {@include: largeFont; }

Samtliga egenskaper pirål tilldelas en h1 element.

förprocessorn Mindre

Syntax Sass påminner programmering. Om du letar efter ett alternativ som är mer lämplig för nybörjare som studerar CSS, leta efter mindre. Det skapades i 2009. Den viktigaste funktionen - stöd för CSS infödda syntax, så obekant med programmering Imposer blir det lättare att lära sig.

Variablerna deklareras med @ -tecknet. Till exempel: @fontSize: 14px;. Häckande fungerar på samma principer som i Sass. Pirål meddelas på följande sätt: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. För att ansluta det inte är nödvändigt att använda direktiven förprocessorn - bara lägga den nyskapade pirål i egenskaperna för det valda elementet. Till exempel: h1 {.largeFont; }.

Stylus

En annan preprocessor. Skapades 2011 av samma författare, som gav världen Jade, Express och andra användbara produkter.

Variabler kan förklaras på två sätt - antingen uttryckligen eller underförstått. Till exempel: font = 'Times New Roman'; - en implicit alternativ. Men $ font = 'Times New Roman' - klar. Pirål förklaras och underförstått anslutna. Syntaxen är som följer: redColor () röd färg. Nu kan vi lägga till objektet, till exempel: h1 redColor ();.

Pennan på en första anblick kan det tyckas obegripligt. Där är det "ursprungliga" fästen och semikolon? Men det är nödvändigt att störta in i det, allt blir mycket tydligare. Kom ihåg dock att den långsiktiga utvecklingen av denna preprocessorn kan "avvänja" du använder den klassiska CSS syntax. Detta orsakar ibland problem när man har att arbeta med en "ren" stil.

Vad preprocessor välja?

I själva verket är det ... det spelar ingen roll. Alla versioner har ungefär samma egenskaper bara syntaxen för varje är olika. Vi rekommenderar att Gör så här:

• Om du - programmerare och vill arbeta med stilar i både kod använder Sass;
• Om du - en kodare och vill arbeta med stilar som med den konventionella layout, vara uppmärksamma på att mindre;
• Om du gillar minimalism, använd Stylus.

För alla varianter av ett oändligt antal intressanta bibliotek som kan ytterligare förenkla utveckling. Användare Sass rekommenderas att uppmärksamma kompassen - ett kraftfullt verktyg med många inbyggda funktioner. Till exempel när du har installerat det kommer du aldrig oroa dig för leverantören version prefixet. Förenklar arbetar med galler. Det finns verktyg för att arbeta med blommor, sprites. En rad redan meddelat pirål. Ge det här verktyget ett par dagar - så du kommer att spara mycket tid och ansträngning i framtiden.