Preprocessor CSS: oversikt, utvalg, søknad

Absolutt alle erfarne webdesignere bruke preprosessor. Det er ingen unntak. Hvis du ønsker å lykkes i denne aktiviteten, ikke glem om disse programmene. Ved første øyekast kan de forårsake en nybegynner stille horror - det er altfor lik programmeringen! Faktisk kan du avtale med alle funksjonene i CSS preprosessor for ca en dag, og hvis du prøver, så et par timer. I fremtiden vil de betydelig forenkle livet ditt.

Hvordan gjorde CSS preprosessor

For bedre å forstå egenskapene til denne teknologien, kort fordype deg i historien om den visuelle presentasjonen av websider.

Når bare så vidt begynt den massive bruken av Internett, gjorde ingen stilark ikke eksisterer. Gjennomføring av dokumenter helt avhengig av nettleseren. Hver av dem hadde sine egne stiler, som har vært brukt til behandling av visse koder. Følgelig sidene ser forskjellig avhengig av hvilken rekkefølge nettleseren du åpner dem. Resultatet - de kaos, forvirring, problemer for utviklere.

I 1994, norsk forsker Håkon Lie utviklet et stilark som kan brukes for utseendet på sidene separat fra HTML-dokumentet. Ideen priglanulas medlemmer av W3C, som umiddelbart satt ut til ferdigstillelse. Noen år senere publiserte han en første versjon av CSS-spesifikasjonen. Deretter ble hun stadig forbedret, blir sluttført ... Men konseptet forble det samme: hver stil satt visse egenskaper.

Ved hjelp av CSS tabeller har alltid vært problematisk. For eksempel, webdesignere ofte hadde problemer med sortering og gruppering funksjoner, og arv er ikke så enkelt.

Og så kom de to tusendel. Markeringer i økende grad begynte å engasjere seg i faglig front-end utviklere, noe som er viktig å være fleksible og dynamiske arbeidsstiler. Eksisterte på den tiden krevde CSS prefikser plassering og sporing støtte de nye funksjonene i nettleseren. Deretter av Javascript, og Ruby eksperter kom ned til virksomheten, skaper en preprosessor - overbygning for CSS, nye funksjoner lagt til det.

CSS for nybegynnere: preprosessor funksjoner

De har flere funksjoner:

• forene nettleser prefikser og khaki;

• forenkle syntaks;

• gi mulighet til å jobbe med nestede velgere uten feil;

• forbedre logikk styling.

Kort sagt: preprosessor legger CSS programmering logikk evner. Nå er styling ikke utføres på vanlig oppføring av stiler og med noen få enkle teknikker og innfallsvinkler: variabler, funksjoner slimål, sykluser vilkår. I tillegg til evnen til å bruke matematikk.

Å se populariteten til disse tilleggene, har W3C begynt å gradvis legge muligheten for dem i CSS-koden. For eksempel, i beskrivelsen, så det funksjonen beregnet (), som er støttet av mange nettlesere. Det er forventet at snart vil det være mulig å sette variabler og skape en slimål. Imidlertid vil dette skje i en fjern fremtid, og preprocessors allerede her og allerede fungerer bra.

Populære preprocessors CSS. sass

Designet i 2007. Opprinnelig en komponent Haml - en mal HTML. Nye funksjoner for CSS-elementer kontrollere nøt utviklere på Ruby on Rails, som begynte å spre det overalt. Den Sass et stort antall funksjoner som nå er inkludert i noen preprosessor: variabler, innebygging av velgere, slimål (da har imidlertid disse argumentene kan ikke legges til).

Erklære variabler i Sass

Variabler deklareres med $ tegn. De kan opprettholde sine egenskaper og sett, for eksempel: "$ borderSolid: 1px solid rød;". I dette eksempelet, erklærte vi en variabel kalt borderSolid og lagret den verds 1px solid rødt. Nå, hvis du er i CSS vi trenger for å lage en rød ramme bredde på 1px, indikerer bare at variabelen etter at eiendommen navn. Etter kunngjøringen av variablene ikke kan endres. Det er flere innebygde funksjoner. For eksempel erklære en variabel med en verdi på $ redcolor # FF5050. Nå, i CSS-kode i egenskapene for et element, bruke den til å sette skriftfarge: p {color: $ redColor; }. Ønsker du å eksperimentere med farger? Bruk funksjonen mørkere eller lysere. Dette er gjort slik: p {farge: mørkne ($ redColor, 20%); }. Som et resultat, vil fargen redColor være 20% lettere.

De Sass mange innebygde funksjoner. Verdt minst lese dem, men bedre - for å lære.

hekkende

Tidligere, for å indikere hekkende måtte bruke en lang og ubehagelig design. Tenk deg at vi har en div, som er p, og i det i sin tur satt span. For div, må vi sette skriftfargen rødt, for p - gul, for span - rosa. I en typisk CSS ville det gjøres på følgende måte:

div {

color: red;

}

div p {

farge: gul;

}

span div p {

color: pink;

}

Med CSS preprosessor alt blir lettere og mer kompakt:

div {

color: red;

p {

farge: gul;

.span {

color: pink;

}

}

}

Elements bokstavelig "investert" hverandre.

preprosessor direktiver

Bruke @import direktivene kan importere filer. For eksempel har vi fonts.sass fil som erklærer stiler for skrifter. Koble den til hovedfilen style.sass: @import 'fonter'. Ferdig! I stedet for én stor fil med stiler har vi noen som kan brukes for rask og enkel tilgang til de nødvendige egenskapene.

slimål

En av de mest interessante ideer. Det gjør at en linje for å spørre et sett med egenskaper. Operere som følger:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

linje-høyde: 80px;

font-vekt: bold;

}

Slimål å gjelde for elementet på siden, bruker direktivet @include. For eksempel ønsker vi å bruke den til h1 spissen. Vi har følgende struktur: H1 {@include: largeFont; }

Alle egenskapene til slimålen er tilordnet et h1 element.

preprosessor Mindre

Syntax Sass minnes programmering. Hvis du er ute etter et alternativ som er mer egnet for nybegynnere som studerer CSS, ser for mindre. Det ble opprettet i 2009. Den viktigste funksjonen - støtte for CSS innfødte syntaks, så kjent med programmering Imposer vil det være lettere å lære.

De variable er deklarert å bruke @ symbol. For eksempel: @fontSize: 14px;. Hekkende fungerer på de samme prinsippene som i Sass. Slimål er annonsert som følger: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; linje-høyde: 80px; font-vekt: bold; }. For å koble det er ikke nødvendig å bruke preprosessor direktiver - bare legg den nyopprettede slimål i egenskapene for det valgte elementet. For eksempel: h1 {.largeFont; }.

Stylus

En annen preprosessor. Opprettet i 2011 av samme forfatter, som ga verden Jade, Express og andre nyttige produkter.

Variabler kan bli erklært på to måter - enten eksplisitt eller implisitt. For eksempel: font = 'Times New Roman'; - en implisitt alternativ. Men $ font = 'Times New Roman' - klart. Slimål er deklarert og implisitt tilkoblet. Syntaksen er som følger: redColor () fargen rød. Nå kan vi legge til elementet, for eksempel: h1 redColor ();.

Stylus på første øyekast kan det virke uforståelig. Hvor er de "innfødte" braketter og semikolon? Men det er nødvendig å stupe inn i det, blir alt mye klarere. Husk imidlertid at langsiktig utvikling av denne preprosessor kan "avvenne" du bruker den klassiske CSS syntaks. Dette fører noen ganger problemer når måtte jobbe med en "ren" stil.

Hva preprosessor velge?

Faktisk, det er ... det spiller ingen rolle. Alle versjoner har omtrent de samme funksjonene bare syntaksen til hver enkelt er forskjellig. Vi anbefaler å gå frem som følger:

• Hvis du - programmerer og ønsker å jobbe med stiler både i kode, bruker Sass;
• Hvis du - en koder og ønsker å jobbe med stiler som med det vanlige oppsettet, ta hensyn til mindre;
• hvis du liker minimalisme, bruker Stylus.

For alle varianter av en endeløs rekke interessante biblioteker som kan ytterligere forenkle utvikling. Brukere Sass anbefalte å ta hensyn til Compass - et kraftig verktøy med mange innebygde funksjoner. For eksempel, når du har installert det vil du aldri trenger å bekymre deg for leverandøren versjon prefiks. Forenkler jobbe med nett. Det finnes verktøy for å arbeide med blomster, sprites. En rekke allerede annonsert slimål. Gi dette verktøyet et par dager - og dermed vil du spare mye tid og krefter i fremtiden.