Preprocessor CSS: overblik, udvælgelse, ansøgning

Absolut alle erfarne webdesignere bruger præprocessoren. Der er ingen undtagelser. Hvis du ønsker at lykkes i denne aktivitet, så glem ikke om disse programmer. Ved første øjekast, kan de forårsage en novice stille rædsel - det er for ens til programmeringen! Faktisk kan du håndtere alle funktionerne i CSS præprocessor for omkring en dag, og hvis du prøver, så et par timer. I fremtiden vil de væsentligt forenkle dit liv.

Hvordan gjorde CSS præprocessor

For bedre at forstå de særlige kendetegn ved denne teknologi, kortvarigt dykke ned i historien om den visuelle præsentation af websider.

Når kun lige begyndt den massive brug af internettet, har ingen style sheets ikke eksistere. Udførelse af dokumenter afhang helt af browseren. Hver af dem havde deres egne stilarter, som har været anvendt til behandling af visse tags. Derfor siderne ser forskellige afhængigt af den rækkefølge, som den browser du åbner dem. Resultatet - de kaos, forvirring, problemer for udviklere.

I 1994, norsk forsker Håkon Lie udviklet et typografiark, der kunne bruges til udseendet af siderne adskilt fra HTML-dokument. De idea priglanulas medlemmer af W3C, som straks satte sig for at færdiggørelse. Et par år senere udgav han en første version af CSS-specifikationen. Så blev hun konstant forbedret, ved at blive færdiggjort ... Men konceptet forblev alle det samme: hver stil sat visse egenskaber.

Ved hjælp af CSS tabeller har altid været problematisk. For eksempel, webdesignere havde ofte problemer med at sortere og gruppere funktioner, og arv er ikke så enkel.

Og så kom de to tusinde. Markeringer er i stigende grad begyndte at engagere sig i faglige front-end udviklere, hvilket er vigtigt at være fleksible og dynamiske arbejdsstil. Bestod på det tidspunkt krævede CSS præfikser placering og sporing støtte de nye muligheder i browseren. Så ved JavaScript og Ruby eksperter fik ned til erhvervslivet, hvilket skaber en præprocessor - overbygning til CSS, nye funktioner tilføjes det.

CSS for begyndere: præprocessordirektiver funktioner

De har flere funktioner:

• forene browser præfikser og khaki;

• forenkle syntaks;

• giver mulighed for at arbejde med indlejrede vælgere uden fejl;

• forbedre logik styling.

Kort sagt: præprocessoren tilføjer CSS programmering logik kapaciteter. Nu er styling ikke udføres på den sædvanlige liste af stilarter og med et par enkle teknikker og fremgangsmåder: variable, funktioner slimål, cykler betingelser. Hertil kommer, at evnen til at bruge matematik.

At se populariteten af disse tilføjelsesprogrammer, har W3C begyndt gradvist at tilføje muligheden for dem i CSS kode. For eksempel i beskrivelsen så der calc () funktion, som er støttet af mange browsere. Det forventes, at snart vil det være muligt at sætte variabler og skabe en slimål. Dette vil dog ske i en fjern fremtid, og præprocessorer allerede her og allerede fungerer godt.

Populære præprocessorer CSS. Sass

Designet i 2007. Oprindeligt en komponent Haml - en skabelon HTML. Nye funktioner til CSS elementer styrer nød udviklere på Ruby on Rails, som begyndte at sprede det overalt. Den Sass et stort antal funktioner, der nu indgår i enhver Præprocessoren: variabler, indlejring af selektorer, (dengang, men disse argumenter kan ikke tilføjes) slimål.

Erklæring af variabler i Sass

Variable erklæret med $ tegn. De kan opretholde deres egenskaber og sæt, for eksempel: "$ borderSolid: 1px solid rød;". I dette eksempel, erklærede vi en variabel kaldet borderSolid og gemt den værdi 1px solid rød. Nu, hvis i CSS, vi har brug for at skabe en rød kant bredde på 1px, indikerer blot, at variabel efter navnet ejendommen. Efter annonceringen af variablerne kan ikke ændres. Der er flere indbyggede funktioner. For eksempel erklære en variabel med en værdi på $ redcolor # FF5050. Nu, i CSS kode i egenskaberne for ethvert element, bruge den til at indstille skrifttype farve: p {color: $ redColor; }. Har du lyst til at eksperimentere med farven? Brug funktionen mørkere eller lysere. Dette gøres så: p {color: mørkere ($ redColor, 20%); }. Som et resultat, vil farven redColor være 20% lettere.

De Sass mange indbyggede funktioner. Værd i det mindste læse dem, men bedre - at lære.

nesting

Tidligere, for at indikere nesting måttet bruge en lang og ubehagelig design. Forestil dig, at vi har en div, der er p, og i det, til gengæld sat spændvidde. For div, er vi nødt til at indstille skrifttypen farven rød, for p - gul, for span - pink. I en typisk CSS ville det ske på følgende måde:

div {

farve: rød;

}

div p {

farve: gul;

}

div p span {

farve: lyserød;

}

Med CSS præprocessor bliver alle lettere og mere kompakt:

div {

farve: rød;

p {

farve: gul;

.span {

farve: lyserød;

}

}

}

Elementer bogstaveligt "investeret" hinanden.

direktiver Forbehandlingskommandoer

Brug @import direktiver kan importere filer. For eksempel har vi fonts.sass fil, der erklærer de stilarter for skrifttyper. Tilslut den til det vigtigste fil style.sass: @import 'skrifter'. Udført! I stedet for en enkelt stor fil med de stilarter, vi har et par, der kan bruges til hurtig og nem adgang til de ønskede egenskaber.

slimål

Et af de mest interessante idéer. Det tillader en linje til at stille et sæt af egenskaber. Fungerer på følgende måde:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Slimål at gælde for det element på siden, skal du bruge direktivet @include. For eksempel, vi vil anvende den til h1 overskrift. Vi har følgende struktur: h1 {@include: largeFont; }

Alle egenskaber slimål tildeles en h1 element.

præprocessor Mindre

Syntaks Sass minder programmering. Hvis du er på udkig efter en indstilling, der er mere egnet til begyndere studerer CSS, ser for mindre. Det blev oprettet i 2009. Den vigtigste funktion - støtte til CSS indfødte syntaks, så uvant med programmering Imposer det vil være lettere at lære.

Variablerne er erklæret bruger @ symbol. For eksempel: @fontSize: 14px;. Nesting værker om de samme principper som i Sass. Slimål annonceres som følger: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. For at tilslutte det ikke er nødvendigt at bruge præprocessordirektiver direktiver - blot tilføje den nyoprettede slimål i egenskaberne for den valgte element. For eksempel: h1 {.largeFont; }.

Stylus

En anden præprocessoren. Oprettet i 2011 af samme forfatter, der gav verden Jade, Express og andre nyttige produkter.

Variabler kan erklæres på to måder - enten eksplicit eller implicit. For eksempel: font = 'Times New Roman'; - en implicit mulighed. Men $ font = 'Times New Roman' - klar. Slimål deklareres og implicit forbundet. Syntaksen er som følger: redColor () farven rød. Nu kan vi tilføje elementet, for eksempel: h1 redColor ();.

Stylus på første øjekast kan synes uforståeligt. Hvor er de "indfødte" beslag og semikoloner? Men det er nødvendigt at kaste sig ud i det, bliver alt meget klarere. Husk dog, at den langsigtede udvikling af denne præprocessoren kan "vænne" du bruger den klassiske CSS syntaks. Dette medfører nogle gange problemer, når at skulle arbejde med en "ren" stil.

Hvad præprocessor vælge?

I virkeligheden er det ... det er ligegyldigt. Alle versioner giver om de samme funktioner blot syntaksen for hver er anderledes. Vi anbefaler at gå frem som følger:

• hvis du - programmør og ønsker at arbejde med stilarter både i kode, skal du bruge Sass;
• Hvis du - en koder og ønsker at arbejde med stilarter som med det konventionelle layout, være opmærksom på mindre;
• hvis du kan lide minimalisme, brug Stylus.

For alle varianter af en endeløs række interessante biblioteker, der endnu længere kan forenkle udvikling. Brugere Sass anbefales at være opmærksom på Kompas - et stærkt værktøj med mange indbyggede funktioner. For eksempel, når du har installeret det vil du aldrig behøver at bekymre sig om sælgeren versionen præfiks. Forenkler arbejde med gitre. Der er værktøjer til at arbejde med blomster, sprites. En række allerede annonceret slimål. Giv dette værktøj et par dage - og dermed vil du spare en masse tid og kræfter i fremtiden.