Un preprocesador CSS nos hace mucho más fácil resolver estos problemas. El preprocesador CSS tiene su propia sintaxis, su propia estructura y no respeta el estándar de CSS.
Para que su código no estándar funcione lo que hace es generar un fichero CSS compatible con todos los navegadores basándose en el código del preprocesador. Tú trabajas en su lenguaje y luego la web integra el fichero generado.
Hay diferentes preprocesadores: Sass, Less and Stylus. El más utilizado con diferencia es Sass. La tercera versión de Sass se llama SCSS y también es muy utilizada.
¿Cuales son las ventajas de Sass?
Variables
Permiten almacenar valores para reutilizarlos luego.
$box-width: 200px; // asignamos valor de 200px
$box-height: 200px; // asignamos valor de 200px
.box-1 {
width: $box-width; // usamos las variables
height: $box-height;
background: red;
}
.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}
Anidación
Permite agrupar las propiedades de una manera más eficiente. No es bueno tener más de tres niveles.
.container {
background:red;
color:white;
.hello {
padding-left:50px;
}
}
Mixins
Agrupan declaraciones de CSS para poder luego reutilizarlas.
$font-color: red;
@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
p {
@include my-font;
}
Importaciones
Permite importar CSS desde ficheros.
// Tu fichero principal de Sass
@import 'fichero';
@import 'otrofichero';
.class {
// Tú código
}
En fin, como podéis ver todo son ventajas, pero siempre que tengáis muchos estilos, para una web pequeña no merece la pena.
Comentarios