Preprocessor CSS: visión xeral, selección, aplicación

Absolutamente todos os web deseñadores experimentados usar o pre-procesador. Non hai excepcións. Se quere ter éxito nesta actividade, non se esqueza sobre estes programas. A primeira vista, poden causar un horror tranquila novato - que é moi semellante á programación! En realidade, pode tratar con todos os recursos do pre-procesador CSS por preto de un día, e se tentar, a continuación, un par de horas. No futuro, eles van simplificar significativamente a súa vida.

Como fixo CSS pre-procesador

Para entender mellor as características desta tecnoloxía, afondar brevemente sobre a historia da presentación visual das páxinas web.

Cando só comezando a utilización masiva de Internet, hai follas de estilo non existía. Formación de documentos dependía totalmente do navegador. Cada un deles tiña os seus propios estilos, que foron utilizados para o tratamento de certos etiquetas. Así, as páxinas parecer diferente dependendo da orde en que o navegador que abri-los. O resultado - o caos, confusión, problemas para os desenvolvedores.

En 1994, o científico noruegués Hakon Lie desenvolveu unha folla de estilo que podería ser usado para a aparición das páxinas por separado do HTML-documento. A idea priglanulas membros do W3C, que partiu inmediatamente para a conclusión. Algúns anos despois, el publicou unha primeira versión da especificación CSS. Logo foi constantemente mellorado, sendo finalizado ... Pero o concepto permaneceu todos iguais: cada estilo definir determinadas propiedades.

Usando táboas CSS sempre foi problemático. Por exemplo, os deseñadores web a miúdo tivo problemas coa clasificación e agrupación de recursos e herdanza non é tan sinxelo.

E entón veu a dous mil. Marcas están cada vez máis comezou a se involucrar en desenvolvedores front-end profesional, o que é importante estar estilos de traballo flexibles e dinámicas. Existía na colocación de tempo esixiu CSS prefixos e seguimento de apoio ás novas capacidades do navegador. Entón, por JavaScript, e especialistas de Ruby foi directo ao asunto, creando un pre-procesador - superestrutura para CSS, novos recursos son engadidos a el.

CSS para principiantes: características pre-procesador

Teñen varias funcións:

• unificar prefixos navegador e caqui;

• simplificar sintaxe;

• dar a oportunidade de traballar con selectores aniñados sen erros;

• mellorar styling lóxica.

En suma: o pre-procesador engade capacidades de lóxica de programación CSS. Agora, estilo non se realiza na lista de costume de estilos e con algunhas técnicas simples e enfoques: variables, funcións, hagfish, ciclos condicións. Ademais, a capacidade de usar as matemáticas.

Vendo a popularidade destes add-ins, o W3C xa comezaron a engadir gradualmente a posibilidade de que o código CSS. Por exemplo, na especificación de xeito función non Calc (), que está soportado por moitos navegadores. Espérase que en breve será posible establecer variables e crear un hagfish. Con todo, iso vai ocorrer no futuro distante, e preprocessors xa está aquí e xa funcionan ben.

preprocessors CSS popular. insolencia

Deseñado en 2007. Orixinalmente un Haml compoñente - un HTML modelo. Novas características para elementos CSS controlar desenvolvedores saboreado no Ruby on Rails, que comezou a estenderse por toda a parte. O Sass un gran número de recursos que son agora incluídos en calquera condición procesador: variables, a incorporación de selectores, (entón, con todo, non se pode engadir estes argumentos) hagfish.

Declarando variables en Sass

Variables declaradas co sinal $. Poden manter as súas propiedades e conxuntos, por exemplo: "$ borderSolid: 1px vermello sólido;". Neste exemplo, declaramos unha variable chamada borderSolid e salva-lo valorar vermello 1px solid. Agora, se o CSS, cómpre crear un ancho de borde vermello de 1px, simplemente indica que variable despois do nome da propiedade. Tras o anuncio das variables non se pode cambiar. Existen varias funcións embutidas. Por exemplo, declarar unha variable cun valor de US $ redcolor # FF5050. Agora, no código CSS nas propiedades de calquera elemento, usalo para definir a cor da fonte: p {color: $ RedColor; }. Queres probar coa cor? Use a función escurecer ou clara. Isto faise a: p {color: escurecer ($ RedColor, 20%); }. Como resultado, o RedColor cor será un 20% máis lixeiro.

Os Sass moitos built-in funcións. Worth polo menos lelos, pero mellor - para aprender.

nidificación

Anteriormente, para indicar asentamento tivo que usar un deseño longo e incómodo. Imaxina que temos un div, que é p, e nel, á súa vez, axustada. Ao div, cómpre configurar a cor de fonte vermella, para p - amarelo, para o período - rosa. Nun CSS típico sería feito do seguinte xeito:

div {

color: red;

}

div p {

cor: amarelo;

}

div p intervalo {

Color: Rosa;

}

Con pre-procesador CSS todo se fai máis doado e máis compacta:

div {

color: red;

p {

cor: amarelo;

.span {

Color: Rosa;

}

}

}

Elementos literalmente "investido" un ao outro.

directivas de pre-procesador

Usando directrices @import pode importar ficheiros. Por exemplo, temos ficheiro fonts.sass que declara os estilos para fontes. Póñase-o á principal style.sass file: 'fontes' @import. Feito! No canto dun único ficheiro grande cos estilos que temos algúns que poden ser usados para acceso rápido e fácil ás propiedades necesarias.

hagfish

Unha das ideas máis interesantes. Permite que unha liña para pedir un conxunto de propiedades. Operar como segue:

@mixin largeFont {

font-family: "Times New Roman";

font-size: 64px;

A liña-altura: 80px;

font-weight: bold;

}

Hagfish para aplicar ao elemento na páxina, use o @include Directiva. Por exemplo, queremos aplicala lo para a cabeceira H1. Temos a seguinte estrutura: H1 {@include: largeFont; }

Todas as propiedades de hagfish son asignados un elemento H1.

pre-procesador Menos

Sintaxe Sass lembra programación. Se está a buscar unha opción que é máis axeitado para principiantes estudando CSS, ollar para menos. Foi creado en 2009. A principal característica - soporte para CSS sintaxe nativa, tan familiarizado con Imposer programación será máis doado de aprender.

As variables son declaradas mediante o símbolo @. Por exemplo: @fontSize: 14 px ;. obras do asentamento sobre os mesmos principios que nos Sass. Hagfish anúncianse como segue: .largeFont () {font-family: "Times New Roman"; font-size: 64px; A liña-altura: 80px; font-weight: bold; }. Para liga-lo non é necesario o uso de directivas de pre-procesador - basta engadir o hagfish recén criado nas propiedades do elemento seleccionado. Por exemplo: H1 {.largeFont; }.

estilete

Outro pre-procesador. Creado en 2011 polo mesmo autor, que deu ao mundo o Xade, Express e outros produtos útiles.

As variables poden ser declaradas en dous xeitos - explícita ou implicitamente. Por exemplo: Font = 'Times New Roman "; - unha opción implícita. Pero $ font = 'Times New Roman "- claro. Hagfish son declarados e conectado de forma implícita. A sintaxe é como segue: RedColor () cor vermella. Agora podemos engadir o elemento, por exemplo: RedColor H1 () ;.

Stylus a primeira vista pode parecer incomprensible. Onde está os soportes e punto e coma "nativos"? Pero é necesario para mergullo-lo, todo se fai moito máis clara. Teña en conta que, no entanto, que o desenvolvemento a longo prazo deste pre-procesador pode "desmamados" usa a sintaxe CSS clásico. Isto ás veces causa problemas ao ter que traballar cun estilo "puro".

O pre-procesador escoller?

En realidade, é ... non importa. Todas as versións ofrecen sobre os mesmos recursos só a sintaxe de cada un é diferente. Recomendamos proceder do seguinte xeito:

• se - programador e quere traballar con estilos tanto no código, use o Sass;
• se - un codificador e quere traballar con estilos como o esquema convencional, prestar atención ao menos;
• Se che gusta de minimalismo, use a pluma.

Para todas as variantes de un número infinito de bibliotecas interesantes que poden simplificar aínda máis o desenvolvemento. Usuarios Sass recomendados para prestar atención ao Compass - unha ferramenta poderosa con moitos recursos embutidos. Por exemplo, despois da instalación vostede non terá que se preocupar coa versión provedor prefixo. Simplifica traballar con reixas. Existen ferramentas para traballar con flores, sprites. A variedade anunciou hagfish. Desta ferramenta un par de días - así, vai aforrar moito tempo e esforzo no futuro.