Cuando estás ante un proyecto medianamente grande, o repetitivo, nos encontramos con código que fácilmente se vuelve susceptible de convertirse en una maraña de líneas que en meses vas a ser incapaz de descifrar. Si además ese código, lo estás usando en otras páginas con pequeñas variaciones, nos encontramos que cualquier cambio provocará que tengas que perder más tiempo del estrictamente necesario, para solventar estas situaciones aparece SASS.
SASS (Syntactically Awesome StyleSheets) es una herramienta externa a tu aplicación WEB que nos permitirá disfrutar de las CSS’s extendidas con las que siempre hemos soñado, añadiendo anidamiento de elementos, variables, extensión de selectores y muchas cosas más. Sin duda nos permite trabajar con las CSS’s a otro nivel.
/* Variables */
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue; /* Usamos la variable */
color:
darken($blue, 9%); /* Usamos la variable */
}
.border {
padding: $margin / 2; /* Usamos la variable */
margin: $margin / 2; /* Usamos la variable */
border-color: $blue; /* Usamos la variable */
}¿Como funciona?
A simple vista podemos ver que el código CSS que estamos escribiendo no es para nada estándar y si lo pruebas en tu navegador hará caso omiso de él, por eso debemos hacerlo pasar previamente por SASS para que convierta dicho código en algo que el navegador pueda comprender.
sass style.scss:style.cssCon este pequeño comando, que ejecutaremos desde nuestra consola (o script destinado a poner nuestras aplicaciones en LIVE), obtendremos un código CSS estándar y listo para que se use en tu aplicación.
¿Que podemos hacer con SASS?
Lo conocí hace un año y algo y la verdad es que aparte del uso académico que le dí en su momento no he vuelto a hacer nada con él, pero bueno, tampoco estaba haciendo nada con nada 😀
Entre las funcionalidades que nos ofrece hay que destacar las 4 más importantes (para mi):
- Variables (POR FIN!! :D)
- Anidamiento
- Funciones
- Herencia de selectores
Variables
El uso de variables, nos permite preparar el código para realizar cambios rápidos en caso de necesitarlo, y poder cambiar en un sitio un valor que usaremos en muchos lugares de nuestro código. Vamos, que nos permite convertir un lenguaje de marcado por uno de programación, esto a los más puristas no les gusta, pero a mi me encanta poder facilitarme el trabajo de dentro de unos meses 😀
// Variable Definitions
$page-width: 800px;
$primary-color: #eeeeee;
body {
width: $page-width;
color: $primary-color;
}Anidamiento
El anidamiento es algo más personal, a mi particularmente me gusta por que visualmente el fichero de trabajo nos permite ver el código de forma más cómoda y clara, además si quiero aplicar un estilo concreto para un submódulo dentro de un módulo, lo tengo más sencillo a la hora de buscar la línea dentro del código y así incluirlo.
body {
font: {
family: sans-serif;
size: 30em;
weight: bold;
}
}
#contents {
width: $page-width;
#sidebar {
float: right;
width: $sidebar-width;
}
#main {
width: $page-width - $sidebar-width;
background: $primary-color;
h2 { color: blue; }
}
}
#footer {
height: 200px;
}Funciones
En la página oficial, los llaman mixins, pero vamos que son funciones de toda vida que defines previamente y cuando los necesitas los añades dentro de un selector, al igual que las variables las definimos previamente y las tenemos disponibles en todo nuestro código, la principal diferencia con la variables es que estas permiten recibir parámetros y así alterarse en función de ellos.
// Definimos table-base
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
// Definimos left
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px); // Cargamos left() con parámetro
@include table-base; // Cargamos table-base
}Herencia de selectores
El nombre de herencia de selectores, es mio, quizás no sea el más apropiado, pero me recuerda mucho a la jerarquia de plantillas de lenguajes como Django, pero en versión lite y CSS. Se basa en la capacidad de definir nuevas selectores CSS e indicar fácilmente que deben compartir los estilos CSS del selector que indicamos, vamos que creamos un selector «hijo» que nos indica quien es su «padre» al que se parece salvo algunas pecualiaridades.
// Definimos los estilos para .error
.error {
border: 1px #f00;
background: #fdd;
}
// Definimos los estilos de .badError
.badError {
@extend .error; // Indicamos que use los estilos de .error
border-width: 3px;
}¿Como instalarlo?
SASS, está desarrollado en Ruby, por lo que necesitarás disponer de él en tu sistema, y mediante el sistema gem es tan sencillo como ejecutar el siguiente comando:
gem install sass
¿Como usarlo?
Para diferenciar los ficheros .css que usará nuestra versión final de los ficheros de código que usaremos para desarrollar nuestra aplicación web, se propone un estándar con la extensión .scss. De esta forma, dispondremos de una versión de desarrollo para nosotros completamente independiente de la que usaremos en nuestro entorno de producción, y ahí ya podremos comprimirlo y convertirlo en una maraña de letras ilegible 😀
Mediante el comando sass de nuestro sistema convertiremos un fichero .scss a .css con la siguiente estructura:
sass --watch style.scss:style.cssMás Información
Si te apetece conocer más sobre esta herramienta te recomiendo que revises la siguiente información:
9 comentarios, 2 referencias
+
#