23/09/2015
Mini-tutorial Sass: hojas de estilo con superpoderes
Por Marq Martí @marqmarti
Si hay algo que de verdad nos gustaría en Sitelabs, es que los navegadores interpretaran estilos en lenguaje Sass de forma nativa. Hasta que eso ocurra, Sass es y será un preprocesador de CSS que nos permite mantener nuestro código CSS limpio, ordenado y compacto.
En los siguientes párrafos haremos un pequeño recorrido de sus capacidades y como estas contribuyen a un proceso de desarrollo más productivo, sobre todo i estamos trabajando sobe un proyecto.
Las variables
Comencemos por lo más elemental: las variables. El estándar CSS ha incorporado hace poco las variables, donde podemos guardas colores, tamaños, distancias, porcentajes… El problema es que el soporte de esta funcionalidad es inconsistente entre navegadores, debido a que aún es muy reciente.
Una de las funcionalidades básicas de Sass son las variables, que funciona de tal forma que al compilar a CSS plano se sustituye cada instancia de la variable por el valor que le hemos asignado, para que todos los navegadores lo entiendan sin problemas. Declarar una variable y asignarla a una propiedad de un elemento es muy sencillo, sigue una sintaxis muy clara:
$gris_oscuro: #111
$mitad: 50%
.algunElemento
background-color: $gris_oscuro
width: $mitadPara una pequeña porción de código como esta no veremos una gran diferencia, pero cuando nuestro código este compuesto de muchas líneas es una funcionalidad que agradeceremos.
Nesting o ‘anidación’
Otra feature muy útil es la anidación (nesting) de selectores del DOM. Podemos declaras selectores dentro de otros selectores, para definir los estilos de un elemento dentro de otro elemento concreto. Esto nos ayudará a mantener el código más ordenado y nos ahorrará tiempo al escribir selectores que estén anidados numerosas veces. Podemos ver esta funcionalidad muy clara en el siguiente fragmento de código:
ul
list-style-type:none
a
color: red
text-decoration: none
li
display: inline
background: green
Estructurar el código de manera que podemos anidar etiquetas permite escribir un código más limpio y con menos redundancias. Otra de las formas que nos brinda SASS de organizar mejor el código es mediante su implementación de parciales: podemos importar una hoja de estilos externa de una manera intuitiva, usando su orden @import ‘externo’. Esto importará el archivo externo.sass del mismo directorio donde se encuentra nuestro archivo SASS. La ventaja de las parciales de SASS con respecto a las de CSS nativo es que concatena todos los contenidos en un mismo archivo, a diferencia de CSS, que genera una petición por cada archivo CSS por separado.
Los mixins
Otra funcionalidad muy interesante es la de los mixins, que nos permiten agrupar varios atributos CSS en una especie de función. Esto es especialmente para los atributos que requieren de prefijos específicos para cada navegador. Existen numerosos mixins públicos en repositorios Git, listos para usar e implementar en tu proyecto. Veamos como es la anatomía de un mixin:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
De esta forma, solo tendremos que escribir una línea cuando queramos aplicar el atributo border-radius a algún elemento, si queremos tener en cuenta todos los navegadores. Otra funcionalidad similar a esta es la orden @extend .clase. Cuando la usemos dentro de un selector CSS, importará todos los atributos del selector que le indicamos.
Cálculos matemáticos
Por último, SASS también permite realizar cálculos matemáticos en cualquier atributo numérico, con soprte también a los valores basados en porcentajes. De esta forma se pueden hacer cálculos de anchura de un contenedor responsivo (responsive!), por poner un ejemplo, de una manera directa y fácil.
De la mano de Sass va Less, un prepocesador CSS con una sintaxis similar a la de su hermano, pero que mantiene las llaves para definir los atributos de un selector como hace CSS. A parte de esto, la funcionalidad y sintaxis son prácticamente idénticas.
Hasta aquí llega toda la sintaxis de SASS. Empezar a usar SASS es muy sencillo: existen compiladores para casi cualquier plataforma. Integrarlo en tu flujo de trabajo es muy fácil si usas Gulp, Grunt, Webpack o algún software similar. También existen compiladores de escritorio, como Koala, que ofrecen una interfaz gráfica para compilar nuestros assets. En Sitelabs nuestro framework frontend de cabecera es Bootstrap, que hace poco anunció que se basaría en Sass, por lo que estamos decididos a apostar por ambas tecnologías.
