Share
Manejar el verdadero poder de un preprocesador CSS es una aventura. Hay innumerables idiomas, sintaxis y características, todo listo para usar ahora mismo.
En este artículo, cubriremos las diversas características y beneficios de usar tres preprocesadores diferentes: Sass, LESS y Stylus.
Los preprocesadores producen CSS que funciona en todos los navegadores.
Los preprocesadores CSS3 son lenguajes escritos con el único propósito de agregar características geniales e inventivas a CSS sin romper la compatibilidad del navegador. Hacen esto compilando el código que escribimos en CSS regular que se puede usar en cualquier navegador hasta la edad de piedra. Hay miles de características que los preprocesadores traen a la mesa, y en este artículo cubriremos algunas de las publicitadas, y algunas de las no tan publicitadas. Empecemos.
La parte más importante de escribir código en un preprocesador CSS es comprender la sintaxis. Afortunadamente para nosotros, la sintaxis es (o puede ser) idéntica a la CSS normal para los tres preprocesadores.
Sass y LESS usan la sintaxis CSS estándar. Esto hace que sea extremadamente fácil convertir un archivo CSS existente a cualquiera de los preprocesadores. Sass usa el .scss extensión de archivo y LESS utiliza el .Menos extensión. El archivo básico Sass o LESS se puede configurar como a continuación:
/ * style.scss o style.less * / h1 color: # 0982C1;
Como habrás notado, esto es solo CSS regular, que se compila perfectamente tanto en Sass como en MENOS.
Es importante tener en cuenta que Sass también tiene una sintaxis más antigua, que omite el punto y coma y los corchetes. Aunque esto sigue existiendo, es antiguo y no lo usaremos más allá de este ejemplo. La sintaxis utiliza la .hablar con descaro a extensión de archivo y se ve así:
/ * style.sass * / h1 color: # 0982c1
La sintaxis de Stylus es mucho más detallada. Utilizando la .estilo extensión de archivo, Stylus acepta la sintaxis CSS estándar, pero también acepta algunas otras variaciones donde los corchetes, los dos puntos y los puntos y coma son todos opcionales. Por ejemplo:
/ * style.styl * / h1 color: # 0982C1; / * omitir los corchetes * / h1 color: # 0982C1; / * omitir los dos puntos y punto y coma * / h1 color # 0982C1
El uso de diferentes variaciones en la misma hoja de estilo también es válido, por lo que lo siguiente se compilará sin errores.
h1 color # 0982c1 h2 tamaño de letra: 1.2em
Las variables se pueden declarar y utilizar a lo largo de la hoja de estilo. Pueden tener cualquier valor que sea un valor CSS (por ejemplo, colores, números [unidades incluidas] o texto.), Y pueden ser referenciados en cualquier lugar a lo largo de nuestra hoja de estilo..
Las variables Sass se anteponen con la PS el símbolo y el valor y el nombre están separados por un punto y coma, al igual que una propiedad CSS.
$ mainColor: # 0982c1; $ siteWidth: 1024px; $ borderStyle: punteado; cuerpo color: $ mainColor; border: 1px $ borderStyle $ mainColor; ancho máximo: $ siteWidth;
Las variables LESS son exactamente las mismas que las variables Sass, excepto que los nombres de las variables están precedidos por la @ símbolo.
@mainColor: # 0982c1; @siteWidth: 1024px; @borderStyle: punteado; cuerpo color: @mainColor; borde: 1px @borderStyle @mainColor; ancho máximo: @siteWidth;
Las variables del lápiz óptico no requieren que se les anteponga nada, aunque permite PS símbolo. Como siempre, el punto y coma final no es obligatorio, pero sí lo es un signo de inicio de sesión igual entre el valor y la variable. Una cosa a tener en cuenta es que Stylus (0.22.4) compila si le @ símbolo a un nombre de variable, pero no aplicará el valor cuando se hace referencia. En otras palabras, no hagas eso.
mainColor = # 0982c1 siteWidth = 1024px $ borderStyle = color de cuerpo punteado mainColor border 1px $ borderStyle mainColor max-width siteWidth
Cada uno de los archivos anteriores se compilará en el mismo CSS. Puedes usar tu imaginación para ver qué tan útiles pueden ser las variables. Ya no tendremos que cambiar un color y volver a escribirlo veinte veces, o desearemos cambiar el ancho de nuestro sitio y buscar para encontrarlo. Aquí está el CSS después de la compilación:
cuerpo color: # 0982c1; borde: 1px punteado # 0982c1; ancho máximo: 1024px;
Si necesitamos hacer referencia a varios elementos con el mismo padre en nuestro CSS, puede ser tedioso seguir escribiendo al padre una y otra vez.
sección margen: 10px; sección nav altura: 25px; sección nav a color: # 0982C1; section nav a: hover text-decoration: underline;
En su lugar, utilizando un preprocesador, podemos escribir los selectores secundarios dentro de los corchetes de los padres. También el Y símbolo hace referencia al selector padre.
Los tres preprocesadores tienen la misma sintaxis para los selectores de anidamiento.
sección margen: 10px; nav altura: 25px; a color: # 0982C1; &: hover text-decoration: underline;
Este es el CSS compilado del código anterior. Es exactamente lo mismo que cuando empezamos, lo conveniente!
sección margen: 10px; sección nav altura: 25px; sección nav a color: # 0982C1; section nav a: hover text-decoration: underline;
Las mezclas son funciones que permiten la reutilización de propiedades en nuestra hoja de estilos. En lugar de tener que revisar nuestra hoja de estilos y cambiar una propiedad varias veces, ahora podemos cambiarla dentro de nuestra mezcla. Esto puede ser realmente útil para el estilo específico de elementos y prefijos de proveedores. Cuando se llaman mixins desde un selector CSS, los argumentos de la mezcla se reconocen y los estilos dentro de la mezcla se aplican al selector.
/ * Error de mezcla de Sass con el argumento (opcional) $ borderWidth que por defecto es 2px si no se especifica * / error @mixin ($ borderWidth: 2px) border: $ borderWidth solid # F00; color: # F00; .generic-error padding: 20px; margen: 4px; @include error (); / * Aplica estilos de error de mezcla * / .login-error left: 12px; posición: absoluta; superior: 20px; error @include (5px); / * Aplica estilos de error de mezcla con el argumento $ borderWidth igual a 5px * /
/ * MENOS error de mezcla con el argumento (opcional) @borderWidth que por defecto es 2px si no se especifica * / .error (@borderWidth: 2px) border: @borderWidth solid # F00; color: # F00; .generic-error padding: 20px; margen: 4px; .error(); / * Aplica estilos de error de mezcla * / .login-error left: 12px; posición: absoluta; superior: 20px; .error (5px); / * Aplica estilos de error de mezcla con el argumento @borderWidth igual a 5px * /
/ * Error de combinación de lápiz con el argumento (opcional) borderWidth que por defecto es 2px si no se especifica * / error (borderWidth = 2px) border: borderWidth solid # F00; color: # F00; .generic-error padding: 20px; margen: 4px; error(); / * Aplica estilos de error de mezcla * / .login-error left: 12px; posición: absoluta; superior: 20px; error (5px); / * Aplica estilos de error de mezcla con el argumento borderWidth igual a 5px * /
Todos los preprocesadores se compilan en el mismo código a continuación:
.genérico-error relleno: 20px; margen: 4px; borde: 2px solid # f00; color: # f00; .login-error izquierda: 12px; posición: absoluta; superior: 20px; borde: 5px solid # f00; color: # f00;
Cuando escribimos CSS a la manera antigua, podríamos usar el siguiente código para aplicar los mismos estilos a varios elementos a la vez:
p, ul, ol / * estilos aquí * /
Eso funciona muy bien, pero si necesitamos un estilo adicional de los elementos individualmente, se debe crear otro selector para cada uno y se puede volver más complicado y difícil de mantener. Para contrarrestar esto, se puede utilizar la herencia. La herencia es la capacidad de otros selectores de CSS para heredar las propiedades de otro selector..
.bloque margen: 10px 5px; relleno: 2px; p @extender .block; / * Heredar estilos de '.block' * / border: 1px solid #EEE; ul, ol @extender .block; / * Heredar estilos de '.block' * / color: # 333; transformación de texto: mayúsculas;
.bloque, p, ul, ol margen: 10px 5px; relleno: 2px; p border: 1px solid #EEE; ul, ol color: # 333; transformación de texto: mayúsculas;
LESS no admite realmente estilos heredados como Sass y Stylus. En lugar de agregar varios selectores a un conjunto de propiedades, trata la herencia como una mezcla sin argumentos e importa los estilos a sus propios selectores. La desventaja de esto es que las propiedades se repiten en su hoja de estilo compilada. Así es como lo configurarías:
.bloque margen: 10px 5px; relleno: 2px; p .block; / * Heredar estilos de '.block' * / border: 1px solid #EEE; ul, ol .bloque; / * Heredar estilos de '.block' * / color: # 333; transformación de texto: mayúsculas;
.bloque margen: 10px 5px; relleno: 2px; p margen: 10px 5px; relleno: 2px; borde: 1px sólido #EEE; ul, ol margen: 10px 5px; relleno: 2px; color: # 333; transformación de texto: mayúsculas;
Como puedes ver, los estilos de .bloquear Se insertaron en los selectores a los que queríamos darles la herencia. Es importante tener en cuenta que la prioridad puede convertirse en un problema aquí, así que tenga cuidado.
En la comunidad CSS, importar CSS está mal visto porque requiere múltiples solicitudes HTTP. Sin embargo, la importación con un preprocesador funciona de manera diferente. Si importa un archivo de cualquiera de los tres preprocesadores, literalmente incluir La importación durante la compilación, creando solo un archivo. Tenga en cuenta que la importación regular .css archivos compila con el predeterminado @import "file.css"; código. Además, las variables y las variables se pueden importar y usar en su hoja de estilos principal. La importación hace que valga la pena crear archivos separados para la organización..
/ * archivo. tipo * / cuerpo fondo: #EEE;
@import "reset.css"; @import "archivo. tipo"; p background: # 0982C1;
@import "reset.css"; cuerpo fondo: #EEE; p background: # 0982C1;
Las funciones de color están integradas en funciones que transformarán un color en la compilación. Esto puede ser extremadamente útil para crear degradados, colores oscuros y mucho más..
aclarar ($ color, 10%); / * devuelve un color 10% más claro que $ color * / más oscuro ($ color, 10%); / * devuelve un color 10% más oscuro que $ color * / saturate ($ color, 10%); / * devuelve un color 10% más saturado que $ color * / desaturar ($ color, 10%); / * devuelve un color 10% menos saturado que $ color * / escala de grises ($ color); / * devuelve la escala de grises de $ color * / complemento ($ color); / * devuelve el color complementario de $ color * / invert ($ color); / * devuelve el color invertido de $ color * / mix ($ color1, $ color2, 50%); / * mezcla $ color1 con $ color2 con un peso del 50% * /
Esta es solo una breve lista de las funciones de color disponibles en Sass, se puede encontrar una lista completa de las funciones de color disponibles de Sass leyendo la documentación de Sass..
Las funciones de color se pueden usar en cualquier lugar donde un color sea CSS válido. Aquí hay un ejemplo:
$ color: # 0982C1; h1 fondo: $ color; borde: 3px sólido se oscurece ($ color, 50%);
aclarar (@color, 10%); / * devuelve un color un 10% más claro que @color * / darken (@color, 10%); / * devuelve un color 10% más oscuro que @color * / saturate (@color, 10%); / * devuelve un color 10% más saturado que @color * / desaturate (@color, 10%); / * devuelve un color 10% menos saturado que @color * / spin (@color, 10); / * devuelve un color con un tono 10 grados mayor que @color * / spin (@color, -10); / * devuelve un color con un tono 10 grados menor que @color * / mix (@ color1, @ color2); / * devuelve una mezcla de @ color1 y @ color2 * /
Puede encontrar una lista de todas las funciones de LESS leyendo la documentación de LESS.
Aquí hay un ejemplo de cómo usar una función de color en MENOS:
@color: # 0982C1; h1 fondo: @color; borde: 3px sólido se oscurece (@color, 50%);
aclarar (color, 10%); / * devuelve un color 10% más claro que 'color' * / darken (color, 10%); / * devuelve un color 10% más oscuro que 'color' * / saturate (color, 10%); / * devuelve un color 10% más saturado que 'color' * / desaturate (color, 10%); / * devuelve un color 10% menos saturado que 'color' * /
Puede encontrar una lista completa de todas las funciones de color de Stylus leyendo la documentación de Stylus.
Aquí hay un ejemplo usando las funciones de color de Stylus:
color = # 0982C1 h1 borde de color de fondo 3px sólido oscuro (color, 50%)
Hacer matemáticas en CSS es bastante útil, y ahora es completamente posible. Es simple y así es como se hace:
cuerpo margen: (14px / 2); arriba: 50px + 100px; derecha: 100px - 50px; izquierda: 10 * 10;
Hemos cubierto muchas de las características y cosas nuevas que pueden hacer los preprocesadores, pero no hemos cubierto nada práctico o práctico. Aquí hay una breve lista de aplicaciones del mundo real donde usar un preprocesador es un salvavidas.
Esta es una de las razones exageradas para usar un preprocesador y por una muy buena razón: ahorra mucho tiempo y lágrimas. Crear una mezcla para manejar los prefijos de los proveedores es fácil y ahorra mucha repetición y una edición dolorosa. Aquí está cómo hacerlo:
@mixin border-radius ($ valores) -webkit-border-radius: $ valores; -moz-border-radius: $ valores; radio del borde: $ valores; div @include border-radius (10px);
.border-radius (@values) -webkit-border-radius: @values; -moz-border-radius: @values; radio del borde: @values; div .border-radius (10px);
border-radius (valores) -webkit-border-radius: valores; -moz-border-radius: valores; radio del borde: valores; div radio del borde (10px);
div -webkit-border-radius: 10px; -moz-border-radius: 10px; radio del borde: 10px;
Falsea texto en 3D usando múltiples sombras de texto Es una idea inteligente. El único problema es que cambiar el color después del hecho es difícil y engorroso. Usando mixins y funciones de color, podemos crear texto 3D y cambiar el color sobre la marcha!
@mixin text3d ($ color) color: $ color; text-shadow: 1px 1px 0px se oscurece ($ color, 5%), 2px 2px 0px se oscurece ($ color, 10%), 3px 3px 0px se oscurece ($ color, 15%), 4px 4px 4px 0px se oscurece ($ color, 20% ), 4px 4px 2px # 000; h1 font-size: 32pt; @include text3d (# 0982c1);
.text3d (@color) color: @color; text-shadow: 1px 1px 0px darken (@color, 5%), 2px 2px 0px darken (@color, 10%), 3px 3px 0px darken (@color, 15%), 4px 4px 0px darken (@color, 20% ), 4px 4px 2px # 000; span font-size: 32pt; .text3d (# 0982c1);
text3d (color) color: color text-shadow: 1px 1px 0px darken (color, 5%), 2px 2px 0px darken (color, 10%), 3px 3px 0px darken (color, 15%), 4px 4px 0px darken (color , 20%), tamaño de fuente de 4px 4px 2px # 000 span: 32pt text3d (# 0982c1)
Elegí escribir el Stylus sombras de texto en una línea porque omití los corchetes.
span font-size: 32pt; color: # 0982c1; text-shadow: 1px 1px 0px # 097bb7, 2px 2px 0px # 0875ae, 3px 3px 0px # 086fa4, 4px 4px 0px # 07689a, 4px 4px 2px # 000;
Usar operaciones de números y variables para columnas es una idea que se me ocurrió cuando estaba jugando por primera vez con los preprocesadores de CSS. Al declarar el ancho deseado en una variable, podemos cambiarlo fácilmente por el camino sin ningún tipo de cálculo mental. Así es como se hace:
$ siteWidth: 1024px; $ gutterWidth: 20px; $ sidebarWidth: 300px; cuerpo margen: 0 auto; ancho: $ sitewidth; .content float: left; width: $ siteWidth - ($ sidebarWidth + $ gutterWidth); .sidebar float: left; margen izquierdo: $ gutterWidth; ancho: $ sidebarWidth;
@siteWidth: 1024px; @gutterWidth: 20px; @sidebarWidth: 300px; cuerpo margen: 0 auto; ancho: @siteWidth; .content float: left; ancho: @siteWidth - (@ sidebarWidth + @ gutterWidth); .sidebar float: left; margen izquierdo: @gutterWidth; ancho: @sidebarWidth;
siteWidth = 1024px; gutterWidth = 20px; sidebarWidth = 300px; cuerpo margen: 0 auto; ancho: sitio ancho; .content float: left; width: siteWidth - (sidebarWidth + gutterWidth); .sidebar float: left; margen izquierdo: gutterWidth; ancho: barra lateral Ancho;
cuerpo margen: 0 auto; ancho: 1024px; .content float: left; ancho: 704px; .sidebar float: left; margen izquierdo: 20px; ancho: 300px;
El uso de un preprocesador de CSS tiene algunos inconvenientes. Voy a repasar algunos de los divertidos, pero si está realmente interesado en encontrarlos todos, le recomiendo que revise la documentación o, mejor aún, simplemente comience a usar un preprocesador en su codificación diaria..
Si ha escrito CSS por un período de tiempo decente, estoy seguro de que llegó a un punto en el que tuvo un error en algún lugar y simplemente no pudo encontrarlo. Si eres como yo, probablemente pasaste la tarde sacándote el pelo y comentando varias cosas para cazar el error..
Los preprocesadores de CSS reportan errores. Es así de simple. Si hay algo mal con tu código, te dice dónde y si tienes suerte: por qué. Puede consultar esta publicación del blog si está interesado en ver cómo se informan los errores en los diferentes preprocesadores..
Al compilar con un preprocesador CSS, se elimina cualquier comentario de doble barra (por ejemplo,. //comentario) y cualquier comentario de barra / asterisco permanece (por ejemplo,. / * comentario * /). Dicho esto, use la barra doble para los comentarios que desee en el lado no compilado y la barra con asterisco para los comentarios que desee ver después de la compilación.
Solo una nota: si compilas minified, todos los comentarios son eliminados.
Cada preprocesador de CSS que cubrimos (Sass, LESS y Stylus) tiene su propia forma única de realizar la misma tarea, lo que brinda a los desarrolladores la capacidad de usar funciones útiles y no compatibles, a la vez que mantiene la compatibilidad del navegador y la limpieza del código..
Si bien no es un requisito para el desarrollo, los preprocesadores pueden ahorrar mucho tiempo y tener algunas características muy útiles.
Los aliento a que prueben la mayor cantidad posible de preprocesadores para poder elegir un favorito de manera efectiva y saber por qué se favorece a los demás. Si aún no ha intentado usar un preprocesador para escribir su CSS, le recomiendo que lo pruebe.
¿Tiene una función de preprocesador de CSS favorita que no mencioné? ¿Hay algo que uno pueda hacer que otro no pueda? Háganos saber en los comentarios a continuación.!
Un agradecimiento especial a Karissa Smith, una super talentosa amiga mía que creó la vista previa en miniatura de este artículo.
Accentsconagua