CSS-preprocesilo: superrigardo, elekto, apliko

Absolute, ĉiuj spertaj aranĝaj diseñistoj uzas antaŭprocesojn. Ne estas esceptoj. Se vi volas sukcesi ĉi tiun agadon, ne forgesu pri ĉi tiuj programoj. Al unua vido, ili povas kaŭzi komencantan kvieta teruro - ĝi estas tro multe kiel programado! Fakte, vi povas kompreni ĉiujn kapablojn de la CSS-preprocesiloj en ĉirkaŭ unu tago, kaj se vi provos, tiam dum kelkaj horoj. En la estonteco, ili signife simpligos vian vivon.

Kiel CSS-preprocesiloj aperis

Por pli bone kompreni la karakterizaĵojn de ĉi tiu teknologio, mallonge mergu nin en la historio de la evoluo de vida reprezento de retpaĝoj.

Kiam la maso interreta apliko ĵus komenciĝis, ne estis stilfolioj. La dezajno de dokumentoj dependis nur de retumiloj. Ĉiu el ili havis siajn proprajn stilojn, kiuj estis uzataj por procesi iujn etikedojn. Sekve, la paĝoj aspektis malsame laŭ kiu retumilo vi malfermis ilin. La rezulto estas kaoso, konfuzo, problemoj por programistoj.

En 1994, la norvega sciencisto Haakon Lee evoluigis stilon, kiu povus esti uzata por desegni la aperon de la paĝo aparte de la HTML-dokumento. La ideo estis invitita al reprezentantoj de la W3C-konsorcio, kiu tuj komencis labori pri ĝi. Kelkajn jarojn poste, la unua versio de la CSS-specifaĵo estis publikigita. Tiam ĝi estis konstante plibonigita, plibonigita ... Sed la koncepto restis same: ĉiu stilo donas iujn proprietojn.

La uzo de CSS-tabloj ĉiam kaŭzis iujn problemojn. Ekzemple, kodisto ofte havis malfacilaĵojn vari kaj grupigi propraĵojn, kaj heredaĵo ne estas tiel simpla.

Kaj tiam venis la du mil. La profesiaj frontaj programistoj komencis fari markon pli ofte, por kiu fleksebla kaj dinamika laboro kun stiloj estis grava. La CSS kiu ekzistis samtempe postulis prefiksadon kaj spuran subtenon por novaj retumiloj. Poste la fakuloj de Javascript kaj Rubio falis en komercadon, kreante antaŭprocesojn - aldonojn por CSS, aldonante novajn trajtojn al ĝi.

CSS por komencantoj: trajtoj de preprocesiloj

Ili plenumas plurajn funkciojn:

• Unigi retumilojn kaj hakojn de retumilo;

• Simplifi la sintakson;

• Permesu labori kun nestaj elektiloj sen eraroj;

• Plibonigu la logikon de stilo.

En resumo: la preprocesilo aldonas programadikon al CSS-kapabloj. Nun la stilo estas farita ne per la kutima enumerado de stiloj, sed kun helpo de pluraj simplaj lertaĵoj kaj aliroj: variabloj, funkcioj, miksoj, cikloj, kondiĉoj. Krome, ĝi eblis uzi matematikon.

Vidante la popularecon de tia aldonilo, la W3C komencis iom post iom aldoni trajtojn al la CSS-kodo. Ekzemple, la funkcio calc () aperis en la specifaĵo, kiu estas subtenata de multaj retumiloj. Oni atendas, ke baldaŭ ĝi povos agordi variablojn kaj krei miksojn. Tamen, tio okazos en la malproksima estonteco, kaj preprocesoroj jam estas ĉi tie kaj jam laboras perfekte.

Popularaj CSS-preprocesiloj. Sass

Ĝi estis disvolvita en 2007. Ĝi estis origine komponanto de Haml, la HTML-ŝablono-motoro. Novaj trajtoj por administrado de CSS-elementoj venis al la gusto de programistoj pri Ruby on Rails, kiuj komencis diskonigi ĝin ĉie. En Sass aperis multajn ŝancojn, kiuj nun estas inkluzivitaj en ajna preprocesilo: variabloj, enigo de elektiloj, miksaĵoj (tamen vi ne povas aldoni al ili argumentojn).

Vokanta variablojn en Sass

Variabloj estas deklaritaj per la signo $. En ili, vi povas konservi propraĵojn kaj iliajn arojn, ekzemple: "$ borderSolid: 1px solid red;". En ĉi tiu ekzemplo, ni deklaris variablo nomita borderSolid kaj stokis la valoron 1px solida ruĝa en ĝi. Nun, se en CSS ni devas krei ruĝan limon kun larĝa de 1px, simple specifas ĉi tiun variablon post la nomo de la posedaĵo. Post la deklaro, la variabloj ne povas esti ŝanĝitaj. Pluraj korpigitaj funkcioj estas haveblaj. Ekzemple, deklaru variablo $ redColor kun la valoro # FF5050. Nun, en la CSS, en la propraĵoj de elemento, ni uzas ĝin por agordi la tiparon koloro: p {color: $ redColor; }. Ĉu vi ŝatus eksperimenti kun koloro? Uzu la funkciojn mallumigi aŭ malpezigi. Ĉi tio fariĝas tiel: p {koloro: malluma ($ redColor, 20%); }. Kiel rezulto, la koloro de redColor estos 20% pli malpeza.

Sass havas multajn enkonstruitajn funkciojn. Ni rekomendas, ke vi almenaŭ konatiĝu kun ili kaj pli bone - lernu.

Nestado

Antaŭe, por indiki neston, ni devis uzi longajn kaj malkomfortajn dezajnojn. Imagu, ke ni havas div en kiu p mensogas, kaj en ĝi, siavice, estas amplekso. Por div, ni devas agordi la tiparon al ruĝa, por p-flava, por rozkolora. En ordinara CSS, ĉi tio fariĝus kiel ĉi tio:

Div {

Koloro: ruĝa;

}

Div p {

Koloro: flava;

}

Div p span {

Koloro: rozkolora;

}

Kun la CSS-preprocesilo, ĉio fariĝas pli facila kaj pli kompakta:

Div {

Koloro: ruĝa;

P {

Koloro: flava;

.span {

Koloro: rozkolora;

}

}

}

Elementoj laŭvorte "metas" unu al alia.

Direktoroj preprocesoraj

Kun la @import-directiva, vi povas importi dosierojn. Ekzemple, ni havas dosieron nomitan fonts.sass, en kiuj stiloj por tiparoj estas deklaritaj. Ni konektas ĝin al la ĉefa stilo.sass-dosiero: @import 'tiparoj'. Farita! Anstataŭ unu granda dosiero kun stiloj, ni havas plurajn, kiujn vi povas uzi por rapide kaj facile aliri la bezonajn proprietojn.

Miksaĵoj

Unu el la plej interesaj zadumok. Ĝi permesas unu aro de propraĵoj esti specifita en unu linio. Labori jene:

@mixin largeFont {

Tipara familio: 'Times New Roman';

Tiparo-grandeco: 64px;

Linio alteco: 80px;

Font-pezo: aŭdaca;

}

Por apliki miksaĵon al elemento sur paĝo, uzu la @include-directive. Ekzemple, ni volas apliki ĝin al la h1-kaplinio. La sekva konstruo estas akirita: h1 {@include: largeFont; }

Ĉiuj proprietoj de la miksaĵo estos atribuitaj al la elemento h1.

Malpli Preprocesora

La sintakso de Sass rememoras programadon. Se vi serĉas opcion, kiu estas pli taŭga por studentoj lernantaj CSS por komencantoj, rigardu Malpli. Ĝi estis establita en 2009. La ĉefa ĉefaĵo estas la subteno de la denaska CSS-sintakso, do estas pli facile lerni ĝin kun fremduloj, kiuj ne konas la programadon de la kodisto.

Variabloj estas deklaritaj per la @ simbolo. Ekzemple: @fontSize: 14px; Nestado funkcias sur la samaj principoj kiel en Sass. Miksaĵoj estas deklaritaj kiel sekvas: .largeFont () {font-familio: 'Times New Roman'; Tiparo-grandeco: 64px; Linio alteco: 80px; Font-pezo: aŭdaca; }. Por konekto, vi ne bezonas uzi preprocesorajn direktojn - nur aldonu novan kreitan mixin al la propraĵoj de la elektita elemento. Ekzemple: h1 {.largeFont; }.

Stilo

Alia preprocesador. Kreita en 2011 de la sama aŭtoro, kiu donis al la mondo Jade, Express kaj aliajn utilajn produktojn.

Variabloj povas esti deklaritaj en du manieroj - eksplicite aŭ implicite. Ekzemple: font = 'Times New Roman'; Estas implicita opcio. Sed $ font = 'Times New Roman' - eksplicite. Miksaĵoj estas deklaritaj kaj konektitaj implicite. La sintakso estas: redColor () koloro ruĝa. Nun ni povas aldoni ĝin al la elemento, ekzemple: h1 redColor ();

Al unua vido, Stylus ŝajnas nekomprenebla. Kie estas la "indiĝenaj" krampoj kaj semikolonoj? Sed se vi nur plonĝos en ĝin, ĉio fariĝas multe pli klara. Tamen, memoru, ke longa evoluo kun ĉi tiu preprocesilo povas "manĝi" vi uzi la klasikan CSS-sintakson. Ĉi tio kelkfoje kaŭzas problemojn kiam vi devas labori per "puraj" stiloj.

Kiun preprocesilon mi devas elekti?

Fakte, ĝi ... ne gravas. Ĉiuj opcioj provizas proksimume la samajn eblojn, nur la sintakso de ĉiu estas malsama. Ni rekomendas, ke vi sekvu:

• Se vi estas programisto kaj volas labori kun stiloj kiel kodo, uzu Sass;
• Se vi estas aranĝo-desegnisto kaj volas labori kun stiloj kiel kun la kutima aranĝo, atentu Min;
• Se vi ŝatas minimalismo, uzu Stylus.

Por ĉiuj ebloj disponeblas multajn interesajn bibliotekojn, kiuj povas plibonigi la disvolviĝon. Uzantoj de Sass konsilas prunti atenton al Kompaso - potenca ilo kun multaj korpigitaj trajtoj. Ekzemple, post instali ĝin, vi neniam devos maltrankviliĝi pri prefiksoj de vendisto. Simpla laboro kun kradoj. Estas utilecoj por labori kun koloroj, spritoj. Kelkaj jam deklaritaj miksoj estas haveblaj. Donu ĉi tiun ilon dum kelkaj tagoj - tiel savante vin multe da tempo kaj energio en la estonteco.