Preprocesador CSS: visión general, la selección, la aplicación

Absolutamente todos los diseñadores web experimentados utilizan el preprocesador. No hay excepciones. Si usted quiere tener éxito en esta actividad, no se olvide de estos programas. A primera vista, pueden causar un horror tranquila novato – es demasiado similar a la programación! De hecho, se puede tratar con todas las características del preprocesador CSS durante un día, y si se intenta, a continuación, un par de horas. En el futuro, van a simplificar significativamente su vida.

¿Cómo CSS preprocesador

Para entender mejor las características de esta tecnología, profundizar brevemente en la historia de la presentación visual de las páginas Web.

Cuando acaba de empezar el uso masivo de Internet, no existen hojas de estilo. La ejecución de los documentos dependía por completo en el navegador. Cada uno de ellos tenía su propio estilo, que han sido utilizados para el tratamiento de ciertas etiquetas. En consecuencia, las páginas se ven diferentes en función del orden en el que el navegador de abrirlos. El resultado – el caos, confusión, problemas para los desarrolladores.

En 1994, el científico noruego Håkon Lie desarrolló una hoja de estilo que se podría utilizar para la aparición de las páginas por separado del HTML-documento. La idea priglanulas miembros del W3C, que inmediatamente se dispuso a su finalización. Unos años más tarde publicó una primera versión de la especificación CSS. Entonces ella se ha mejorado constantemente, está terminando … Pero el concepto sigue siendo lo mismo: cada estilo establecido ciertas propiedades.

Uso de tablas CSS siempre ha sido problemático. Por ejemplo, los diseñadores web a menudo tenían problemas con la clasificación y agrupación de características, y la herencia no es tan simple.

Y entonces llegó el segundo milenio. Las marcas se comenzaron cada vez más a participar en los desarrolladores de aplicaciones para usuario profesional, lo cual es importante ser estilos de trabajo flexibles y dinámicos. Existido en la colocación de tiempo exigido prefijos CSS y soporte de seguimiento de las nuevas capacidades del navegador. Luego, mediante JavaScript, y los expertos de Ruby pusieron manos a, la creación de un preprocesador – superestructura de CSS, se añaden nuevas funciones a la misma.

CSS para principiantes: características del preprocesador

Tienen varias funciones:

• unificar los prefijos de navegador y de color caqui;

• simplificar la sintaxis;

• dará la oportunidad de trabajar con selectores anidados sin errores;

• mejorar el estilo de la lógica.

En resumen: el preprocesador añade capacidades de lógica de programación CSS. Ahora, el estilo no se realiza en la lista habitual de estilos y con algunas técnicas simples y enfoques: variables, funciones, hagfish, ciclos condiciones. Además, la capacidad de utilizar las matemáticas.

Al ver la popularidad de estos complementos, el W3C ha empezado a añadir gradualmente la posibilidad de que en el código CSS. Por ejemplo, en la especificación por lo que la función calc (), que está soportado por muchos navegadores. Se espera que pronto será posible establecer variables y crear un pez bruja. Sin embargo, esto va a suceder en un futuro lejano, y preprocesadores que ya están aquí y ya funcionar bien.

preprocesadores CSS popular. Sass

Diseñado en 2007. Originalmente un componente Haml – una plantilla HTML. Nuevas características para desarrolladores elementos CSS controlan disfrutó en el rubí en los carriles, que comenzó a extenderse por todas partes. El Sass un gran número de características que se incluyen ahora en cualquier preprocesador: variables, incrustación de selectores, (entonces, sin embargo, no se puede añadir estos argumentos) hagfish.

la declaración de variables en Sass

Las variables declaradas con el signo $. Ellos pueden mantener sus propiedades y se pone, por ejemplo: "$ borderSolid: 1px rojo sólido;". En este ejemplo, declaramos una variable llamada borderSolid y lo ha guardado valor de rojo 1px solid. Ahora bien, si en el CSS que necesitamos para crear un ancho borde rojo de 1px, simplemente indica que la variable después de que el nombre de la propiedad. Tras el anuncio de las variables no se pueden cambiar. Hay varias funciones incorporadas. Por ejemplo, declarar una variable con un valor de $ redcolor # FF5050. Ahora, en el código CSS en las propiedades de cualquier elemento, utilizarla para configurar el color de fuente: p {color: $ redcolor; }. ¿Quieres experimentar con el color? Utilice la función de oscurecer o aclarar. Esto se hace así: p {color: oscurecer ($ redcolor, 20%); }. Como resultado, la redcolor color será 20% más ligero.

Los Sass muchas funciones integradas. Vale la pena al menos leerlos, pero mejor – para aprender.

anidación

Anteriormente, para indicar anidación tuvo que usar un diseño largo e incómodo. Imaginemos que tenemos un div, que es p, y en él, a su vez, el período establecido. Para el div, que necesitamos para establecer el color de fuente rojo, para p – amarillo, por el lapso – rosa. En una típica CSS se haría de la siguiente manera:

div {

color: red;

}

div p {

Color: amarillo;

}

lapso div p {

Color: rosa;

}

Con preprocesador CSS todo se vuelve más fácil y más compacta:

div {

color: red;

p {

Color: amarillo;

.span {

Color: rosa;

}

}

}

Elementos literalmente "invertido" entre sí.

directivas del preprocesador

Uso de las directivas @import puede importar archivos. Por ejemplo, tenemos el archivo fonts.sass que declara los estilos de fuentes. Conectarlo a la style.sass archivo principal: 'fuentes' @import. Hecho! En lugar de un solo archivo grande con los estilos que tenemos unos cuantos que se puede utilizar para un acceso rápido y fácil a las propiedades requeridas.

lampreas

Una de las ideas más interesantes. Permite una línea que pedir un conjunto de propiedades. Operar de la siguiente manera:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish que se aplicará al elemento de la página, utilice el @include Directiva. Por ejemplo, queremos aplicarlo a la cabecera h1. Tenemos la siguiente estructura: H1 {@include: largeFont; }

Todas las propiedades de hagfish se les asigna un elemento h1.

Menos preprocesador

Sintaxis Sass recuerda programación. Si usted está buscando una opción que es más adecuado para los principiantes que estudian CSS, mira por menos. Fue creado en 2009. La principal característica – el apoyo a la sintaxis nativa CSS, por lo que no están familiarizados con la programación Imposer que será más fácil de aprender.

Las variables se declaran mediante el símbolo @. Por ejemplo: @fontSize: 14px;. obras de anidación en los mismos principios que en Sass. Hagfish se anuncian de la siguiente manera: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. Para conectar no es necesario el uso de directivas de preprocesador – sólo tiene que añadir el pez bruja de nueva creación en las propiedades del elemento seleccionado. Por ejemplo: h1 {.largeFont; }.

aguja

Otra preprocesador. Creado en 2011 por el mismo autor, que dio al mundo de Jade, Express y otros productos útiles.

Las variables pueden ser declaradas de dos maneras – ya sea explícita o implícitamente. Por ejemplo: font = 'Times New Roman'; – una opción implícita. Pero $ font = 'Times New Roman' – claro. Hagfish se declaran e implícitamente conectado. La sintaxis es la siguiente: redcolor () de color rojo. Ahora podemos añadir el artículo, por ejemplo: redcolor h1 ();.

Stylus en la primera vista puede parecer incomprensible. ¿Dónde está los soportes "nativos" y punto y coma? Pero es necesario para sumergirse en ella, todo se vuelve mucho más claro. Recuerde, sin embargo, que el desarrollo a largo plazo de este preprocesador puede "destetar" se utiliza la sintaxis CSS clásico. Esto a veces causa problemas al tener que trabajar con un estilo "puro".

Lo preprocesador elegir?

De hecho, es … no importa. Todas las versiones ofrecen acerca de las mismas características sólo la sintaxis de cada uno es diferente. Recomendamos proceder de la siguiente manera:

• si – programador y querer trabajar con estilos tanto en código, utilice el Sass;
• si – un codificador y quieren trabajar con estilos como ocurre con el diseño convencional, prestar atención a los menos;
• si te gusta el minimalismo, utilice el lápiz.

Para todas las variantes de un sin fin de bibliotecas interesantes que pueden simplificar aún más el desarrollo. Los usuarios Sass recomienda prestar atención a la brújula – una poderosa herramienta con muchas características incorporadas. Por ejemplo, después de instalarlo usted nunca tendrá que preocuparse por la versión proveedor prefijo. Simplifica el trabajo con rejillas. Hay herramientas para trabajar con flores, sprites. Una gama ya anunció lampreas. Dar a esta herramienta de un par de días – de este modo se ahorrará mucho tiempo y esfuerzo en el futuro.