Preprocessador CSS: visió general, la selecció, l'aplicació

Absolutament tots els dissenyadors web experimentats utilitzen el preprocessador. No hi ha excepcions. Si vostè vol tenir èxit en aquesta activitat, no us oblideu d'aquests programes. A primera vista, poden causar un horror tranquil·la novell - és massa similar a la programació! De fet, es pot tractar amb totes les característiques del preprocessador CSS durant un dia, i si s'intenta, a continuació, un parell d'hores. En el futur, van a simplificar significativament la seva vida.

Com CSS preprocessador

Per entendre millor les característiques d'aquesta tecnologia, aprofundir breument en la història de la presentació visual de les pàgines web.

Quan acaba de començar l'ús massiu d'Internet, no hi ha fulls d'estil. L'execució dels documents depenia per complet al navegador. Cada un d'ells tenia el seu propi estil, que han estat utilitzats per al tractament de certes etiquetes. En conseqüència, les pàgines es veuen diferents en funció de l'ordre en què el navegador d'obrir-los. El resultat - el caos, confusió, problemes per als desenvolupadors.

El 1994, el científic noruec Håkon Lie va desenvolupar un full d'estil que es podria utilitzar per a l'aparició de les pàgines per separat de l'HTML-document. La idea priglanulas membres del W3C, que immediatament es va disposar a la seva finalització. Uns anys més tard va publicar una primera versió de l'especificació CSS. Llavors ella s'ha millorat constantment, està acabant ... Però el concepte segueix sent el mateix: cada estil establert certes propietats.

Ús de taules CSS sempre ha estat problemàtic. Per exemple, els dissenyadors web sovint tenien problemes amb la classificació i agrupació de característiques, i l'herència no és tan simple.

I llavors va arribar el segon mil·lenni. Les marques es van començar cada vegada més a participar en els desenvolupadors d'aplicacions per usuari professional, la qual cosa és important ser estils de treball flexibles i dinàmics. Existit en la col·locació de temps exigit prefixos CSS i suport de seguiment de les noves capacitats del navegador. Després, mitjançant JavaScript, i els experts de Ruby van posar mans a, la creació d'un preprocessador - superestructura de CSS, s'afegeixen noves funcions a la mateixa.

CSS per a principiants: característiques del preprocessador

Tenen diverses funcions:

• unificar els prefixos de navegador i de color caqui;

• simplificar la sintaxi;

• donarà l'oportunitat de treballar amb selectors niats sense errors;

• millorar l'estil de la lògica.

En resum: el preprocessador afegeix capacitats de lògica de programació CSS. Ara, l'estil no es realitza a la llista habitual d'estils i amb algunes tècniques simples i enfocaments: variables, funcions, hagfish, cicles condicions. A més, la capacitat d'utilitzar les matemàtiques.

En veure la popularitat d'aquests complements, el W3C ha començat a afegir gradualment la possibilitat que en el codi CSS. Per exemple, en l'especificació de manera que la funció calc (), que està suportat per molts navegadors. S'espera que aviat serà possible establir variables i crear un peix bruixa. No obstant això, això va a succeir en un futur llunyà, i preprocesadores que ja són aquí i ja funcionar bé.

preprocesadores CSS popular. Sass

Dissenyat en 2007. Originalment un component Haml - una plantilla HTML. Noves característiques de desenvolupament elements CSS controlen va gaudir al robí en els carrils, que va començar a estendre per tot arreu. El Sass un gran nombre de característiques que s'inclouen ara en qualsevol preprocessador: variables, incrustació de selectors, (llavors, però, no es pot afegir aquests arguments) hagfish.

la declaració de variables en Sass

Les variables declarades amb el signe $. Ells poden mantenir les seves propietats i es posa, per exemple: "$ borderSolid: 1px vermell sòlid;". En aquest exemple, declarem una variable anomenada borderSolid i l'ha guardat valor de vermell 1px solid. Ara bé, si en el CSS que necessitem per crear un ample vora vermella de 1px, simplement indica que la variable després que el nom de la propietat. Després de l'anunci de les variables no es poden canviar. Hi ha diverses funcions incorporades. Per exemple, declarar una variable amb un valor de $ redcolor # FF5050. Ara, en el codi CSS en les propietats de qualsevol element, utilitzar-la per configurar el color de font: p {color: $ redcolor; }. Vols experimentar amb el color? Utilitzeu la funció d'enfosquir o aclarir. Això es fa així: p {color: enfosquir ($ redcolor, 20%); }. Com a resultat, la redcolor color serà 20% més lleuger.

Els Sass moltes funcions integrades. Val la pena almenys llegir-los, però millor - per aprendre.

implantació

Anteriorment, per indicar nidificació va haver d'usar un disseny llarg i incòmode. Imaginem que tenim un div, que és p, i en ell, al seu torn, el període establert. Per al div, que necessitem per establir el color de font vermell, per p - groc, pel lapse - rosa. En una típica CSS es faria de la següent manera:

div {

color: xarxa;

}

div p {

Color: groc;

}

lapse div p {

Color: rosa;

}

Amb preprocessador CSS tot es torna més fàcil i més compacta:

div {

color: xarxa;

p {

Color: groc;

.span {

Color: rosa;

}

}

}

Elements literalment "invertit" entre si.

directives del preprocessador

Ús de les directives @import pot importar arxius. Per exemple, tenim l'arxiu fonts.sass que declara els estils de fonts. Connectar-lo a la style.sass arxiu principal: 'fonts' @import. Fet! En lloc d'un sol fitxer gran amb els estils que tenim uns quants que es pot utilitzar per a un accés ràpid i fàcil a les propietats requerides.

llamprees

Una de les idees més interessants. Permet una línia de demanar un conjunt de propietats. Operar de la següent manera:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish que s'aplicarà a l'element de la pàgina, utilitzi el @include Directiva. Per exemple, volem aplicar-lo a la capçalera h1. Tenim la següent estructura: H1 {@include: largeFont; }

Totes les propietats de hagfish se'ls assigna un element h1.

menys preprocessador

Sintaxi Sass recorda programació. Si vostè està buscant una opció que és més adequat per als principiants que estudien CSS, ves per menys. Va ser creat en 2009. La principal característica - el suport a la sintaxi nativa CSS, de manera que no estan familiaritzats amb la programació Imposer que serà més fàcil d'aprendre.

Les variables es declaren mitjançant el símbol @. Per exemple: @fontSize: 14px ;. obres d'implantació en els mateixos principis que en Sass. Hagfish s'anuncien de la següent manera: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. Per a connectar no és necessari l'ús de directives de preprocessador - només ha d'afegir el peix bruixa de nova creació en les propietats de l'element seleccionat. Per exemple: h1 {.largeFont; }.

agulla

Una altra preprocessador. Creat el 2011 pel mateix autor, que va donar al món de Jade, Express i altres productes útils.

Les variables poden ser declarades de dues maneres - ja sigui explícitament o implícitament. Per exemple: font = 'Times New Roman'; - una opció implícita. Però $ font = 'Times New Roman' - clar. Hagfish es declaren i implícitament connectat. La sintaxi és la següent: redcolor () de color vermell. Ara podem afegir l'article, per exemple: redcolor h1 () ;.

Stylus a la primera vista pot semblar incomprensible. On està els suports "natius" i punt i coma? Però és necessari per submergir-se en ella, tot es torna molt més clar. Recordeu, però, que el desenvolupament a llarg termini d'aquest preprocessador pot "deslletar" s'utilitza la sintaxi CSS clàssic. Això de vegades causa problemes en haver de treballar amb un estil "pur".

El preprocessador triar?

De fet, és ... no importa. Totes les versions ofereixen sobre les mateixes característiques només la sintaxi de cada un és diferent. Recomanem procedir de la següent manera:

• si - programador i voler treballar amb estils tant en codi, utilitzeu el Sass;
• si - un codificador i volen treballar amb estils com passa amb el disseny convencional, prestar atenció als menys;
• si t'agrada el minimalisme, utilitzeu el llapis.

Per a totes les variants d'una infinitat de biblioteques interessants que poden simplificar encara més el desenvolupament. Els usuaris Sass recomana prestar atenció a la brúixola - una poderosa eina amb moltes característiques incorporades. Per exemple, després d'instal·lar-lo vostè no haurà de preocupar per la versió proveïdor prefix. Simplifica el treball amb reixetes. Hi ha eines per treballar amb flors, sprites. Una gamma ja va anunciar llamprees. Donar a aquesta eina d'un parell de dies - d'aquesta manera s'estalviarà molt de temps i esforç en el futur.