Preprocessor CSS: Iwwerbléck, Selektioun, Applikatioun

Absolut all erlieft Web Designer benotzen der preprocessor. Et gi keng Ausnamen. Wann Dir an dëser Aktivitéit ze gelengt wëllt, vergiesst net iwwer dës Programmer. Op den éischte Bléck, kann se e onerfueren roueg Horror Ursaach - et dem programméiere ze ähnlech ass! An Tatsaach, kënnt Dir mat all de Fonctiounen vun CSS preprocessor fir ronn engem Dag vill, a wann dir probéieren, dann e puer Stonnen. An Zukunft, wäert se Ärem Liewen vill méi einfach.

Wéi hutt CSS preprocessor

Fir besser d'Charakteristiken vun dëser Technik verstoen, verdéiwen kuerz an d'Geschicht vun der visuell Presentatioun vun Web Säiten.

Wann nëmmen just de massive Gebrauch vum Internet ugefaangen, existéieren kee Stil Blieder rauszesichen. Ausféierung vun Dokumenter Ofhängegkeet ganz op de Browser. Jiddereng vun hinnen hir eege Stiler Équipe, déi fir den Traitement vun bestëmmte Tags benotzt goufen. Anere Wierder, kucken d'Säiten verschidde je d'Uerdnung an deem de Browser Dir hinnen oppen. D'Resultat - de Chaos, Duercherneen, Problemer fir Entwéckler.

1994, entwéckelt norwegesche Wëssenschaftler Håkon Lie engem Stil Blat, datt fir d'Ausgesin vun der Säiten getrennt vun der HTML-Dokument benotzt ginn hätt. D'Iddi priglanulas Membere vun der W3C, déi direkt un d'Réalisatioun Formatioun aus. E puer Joer méi spéit publizéiert hien eng éischt Versioun vun der CSS Spezifizéierung. Dunn huet si permanent verbessert, ginn finaliséiert ... Mee d'Konzept nach all déi selwecht: all Stil verschidden Eegeschaften Formatioun.

CSS Dëscher benotzt huet ëmmer Problemstoffer ginn. Zum Beispill, Web Designer hu oft Problemer mat Zortéieren an Glidderung Fonctiounen, an Ierfschaft ass net sou einfach.

An dann huet der zwee dausendsten. Marquage sinn ëmmer méi ugefaang zu berufflech virun-Enn Entwéckler ze engagéieren, wat wichteg ass flexibel an dynamesch Aarbecht ze ënnerstëtzen gin. Gouf an der Zäit CSS opgehuewen Openthalt verlaangt an Tracking Ënnerstëtzung déi nei Méiglechkeeten vun der Browser. Dunn, vun Javascript, an Rubin Experten an Ugrëff ze Betrib, e preprocessor schafen - superstructure fir CSS, sinn nei Funktiounen bis et dobäi.

CSS fir Ufänger: preprocessor Fonctiounen

Si hunn e puer Funktiounen:

• Droit Browser opgehuewen an khaki;

• Vereinfachung Siwebiergen;

• ginn d'Geleeënheet mat gemaach selectors ouni Feeler ze schaffen;

• Logik kanns verbesseren.

An kuerz: de preprocessor gëtt Kënnen programméiere Logik CSS. Verännerlechen, Funktiounen, hagfish, kreesleef Konditiounen: Elo, ass integréiert net am üblechen Oplëschte vun Stiler a mat e puer einfache Techniken an Approche gesuergt. Zousätzlech, an d'Fähegkeet Mathematik benotzen.

Geknackt der Popularitéit vun dësen Artikel-ins, hunn d'W3C huet d'Méiglechkeet vun hinnen am CSS Code lues ze sëtzen. Zum Beispill, am Spezifizéierung sou do ID! () Funktioun, déi vun villen Browser'en ënnerstëtzt gëtt. Et gëtt erwaart, datt geschwënn wäert et méiglech ginn Verännerlechen ze setzen an e hagfish schafen. Allerdéngs wäert dëst am wäiter Zukunft geschéien, an preprocessors schonn hei an schon gutt Aarbecht.

Populär preprocessors CSS. Sass

am Joer 2007 entworf. Ursprénglech eng Komponent Haml - e Skelett HTML. Neie Fonctiounen fir CSS Elementer Kontroll -Optioun Entwéckler op der Rubin op Rails, déi et iwwerall ugefaang breetmaachen. D'Sass eng grouss Zuel vun de Fonctiounen, déi elo an all preprocessor abegraff sinn: Verännerlechen, vun selectors embedding, hagfish (dann Ee, kann dës Argumenter net derbäi ginn).

Hirt Verännerlechen an Sass

Verännerlechen mat der $ Zeechen deklaréiert. Si kënnen hir Eegeschaften a baut, zum Beispill affirméieren: "$ borderSolid: 1px staark rout;". An dësem Beispill, deklaréiert mir eng Variabel genannt borderSolid a gerett et 1px staark rout Wäert. Elo, wann am CSS mir e roude Grenz Breet vun 1px ze schafen brauchen, weist einfach dat ofwiesselnd no der Propriétéit Numm. No der Ukënnegung vun der Verännerlechen kann net geännert ginn. Et ginn e puer gebaut-an Funktiounen. Zum Beispill, eng Variabel mat engem Wäert vun $ redcolor # FF5050 erklären. Elo, am CSS Code an d 'Eegeschafte vun all Element, benotzen se d'Schrëft Faarf ze setzen: p {Faarf: $ redColor; }. Wëllt Dir mat der Faarf un Experimenter? Benotzen Funktioun darken oder lighten. Dat ass gemaach sou: p {Faarf: darken ($ redColor, 20%); }. Als Resultat, gëtt d'Faarf redColor 20% hell ginn.

D'Sass vill gebaut-an Funktiounen. Wäert op d'mannst liest hinnen, mee besser - ze léieren.

gären

Virdrun, gären un weg no enger laanger a onwuel Design ze benotzen. Virstellen, datt mir eng Divisiounen hunn, déi p ass, an dat, am Tour, Formatioun span. Fir d'Divisiounen, brauche mir d'Schrëft Faarf rout, fir p ze setzen - Giel, fir d'span - rosa. An enger typescher CSS géif et gemaach ginn wéi follegt:

Divisiounen {

Faarf: rout;

}

Divisiounen p {

Faarf: giel;

}

Divisiounen p span {

Faarf: rosa;

}

Mat CSS preprocessor gëtt alles méi einfach a méi kompakt:

Divisiounen {

Faarf: rout;

p {

Faarf: giel;

.span {

Faarf: rosa;

}

}

}

Elementer wuertwiertlech "investéiert" een aneren.

preprocessor Direktiven

Benotzt @import Direktiven kann Fichieren Import. Zum Beispill, hunn mir fonts.sass Fichier datt de Stiler fir Policen seet. Connect et zu der Haaptrei Fichier style.sass: @import "Policen". Gemaach! Amplaz vun engem eenzege grousse Fichier mat der Stiler hu mir e puer datt fir quick an einfach Zougang zu der néideg Eegeschafte benotzt ginn.

hagfish

Ee vun de stäerkste interessant Iddien. Dat erlaabt eng Linn eng Formatioun vun Eegeschaften ze froen. Bedreiwen wéi follegt:

@mixin largeFont {

Schrëftgréisst-Famill: "Times New Roman";

Schrëftgréisst-Gréisst: 64px;

Linn-Héicht: 80px;

Schrëftgréisst-Gewiicht: fett;

}

Hagfish dem Element op der Säit ze gëllen, benotzen d'Direktiv @include. Zum Beispill, wëlle mir dat dem H1 Wénkel ze gëllen. Mir hunn dëse Struktur: H1 {@include: largeFont; }

All d 'Eegeschafte vun hagfish sinn eng H1 Element zougewisen.

preprocessor Manner

Siwebiergen Sass rappeléiert programméiere. Wann Dir fir eng Optioun sicht ass dat méi gëeegent fir Ufänger CSS studéiert, fir Manner Wanterschlof war. Et war am Joer 2009 gegrënnt. D'Haaptrei Fonktioun - Ënnerstëtzung fir CSS gebierteg Siwebiergen, sou gemenkerhand mat programméiere Imposer ass et méi einfach ze léieren ginn.

D'Verännerlechen sinn deklaréiert der @ Symbol benotzt. Zum Beispill: @fontSize: 14px;. Gären Wierker op déi selwecht Prinzipien wéi an Sass. Hagfish sinn annoncéiert wéi follegt: .largeFont () {Schrëftgréisst-Famill: "Times New Roman"; Schrëftgréisst-Gréisst: 64px; Linn-Héicht: 80px; Schrëftgréisst-Gewiicht: fett; }. Ze konnektéieren et net néideg ass preprocessor Direktiven ze benotzen - just Foto der nei geschafen hagfish am Eegeschafte vun der gewielter Element. Zum Beispill: H1 {.largeFont; }.

stylus

Aner preprocessor. Hunn an 2011 vum selwechten Auteur, datt d'Welt d'Jade, Express an aner nëtzlech Produiten huet.

Verännerlechen kann an zwou Méiglechkeeten deklaréiert ginn - entweder explizit oder implizit. Zum Beispill: Schrëftgréisst = "Times New Roman"; - impliziten Optioun. Mee $ Schrëftgréisst = "Times New Roman" - kloer. Hagfish sinn deklaréiert an implizit ugeschloss. D'Siwebiergen ass wéi follegt: redColor () Faarf rout. H1 redColor ();: Elo kënne mer de Punkt, zum Beispill Foto.

Stylus op den éischte Bléck vläicht et onlieserleche schéngen. Wou ass den "gebierteg" Klammeren an semicolons? Mä et ass néideg an et zu kalem, all gëtt vill méi kloer. Erënneren, awer, datt laangfristeg Entwécklung vun dëser preprocessor kann "wean" Dir d'klassesch CSS Siwebiergen benotzen. Dëst bewierkt heiansdo Problemer wéi mat engem "reng" Stil ze schaffen mussen.

Wat preprocessor wielen?

An Tatsaach, ass et ... et egal net. All Versiounen Offer iwwer déi selwecht Funktiounen just d'Siwebiergen vun all verschidden ass. Mir recommandéieren ze virugoe wéi follegt:

• wann Dir - Programméierer a wëlle mat ënnerstëtzen souwuel am Code ze schaffen, benotzen d'Sass;
• wann Dir - e ewech a wëlle mat ënnerstëtzen, well mat der konventionell Layout ze schaffen, oppassen op de Manner;
• wann Dir minimalism wëll, benotzt d'stylus.

Fir all Varianten vun Léiwt Zuel vun interessant Bibliothéiken datt souguer Weiderentwécklung Fondamental kënnen. Benotzer Sass recommandéiert ze bezuelen Opmierksamkeet op d'Compass - e mächtege Instrument mat ville gebaut-an Fonctiounen. Zum Beispill, an der Dir se installéiert Dir wäert ni un de Verkeefer Versioun Préfixe ze Suergen hunn. Simplifies Aarbecht mat GRIDS. Et ginn Instrumenter fir schaffen mat Blummen, sprites. Verschidden annoncéiert schonn hagfish. Gëff dëst Instrument e puer Deeg - also Iech vill Zäit an Effort an Zukunft retten.