Preprocesa tu estilo con SASS

En los últimos años, el lenguaje CSS ha sido equipado con toda clase de funcionalidades. El uso de media queries o colores con transparencia ya es algo habitual en el desarrollo web. Y funcionalidades como las transformaciones 3D o los filtros en webkit nos animan a experimentar y re-definir el diseño web.

Sin embargo, no se han hecho apenas avances en cuanto mantenibilidad y agilidad del código. Y por eso han surgido herramientas que nos permiten usar una sintaxis ampliada, que luego es convertida a CSS de toda la vida. Actualmente los dos principales preprocesadores de este tipo son LESS y SASS. El primero usa JavaScript y puede ser compilado en el lado del cliente. El segundo usa Ruby y dispone de una librería externa llamada Compass, que puede agilizar aún más el desarrollo. Hay varios aspectos en los que se diferencian y en esta comparativa SASS sale victorioso. Por eso he acabado usándolo en mis proyectos y la verdad es que ya no quiero escribir estilos sin usar un preprocesador. Veamos pues cómo usarlo.

Rubíes, gemas y apps

Para usar SASS es necesario tener instalado Ruby. En OS X viene instalado por defecto e instalarlo en Windows o Linux es bastante sencillo.
La instalación y el uso de SASS se hace a través de la línea de comandos (pero existen aplicaciones que hacen que no sea necesario).

gem install sass

Ahora puedes crear un archivo con la extensión .scss y empezar a escribir reglas. Cualquier código CSS3 funcionará, ya que SCSS es una extensión de CSS3.

Para indicarle a SASS que convierta el archivo a CSS y que se mantenga al tanto de los cambios que vayas haciendo, usa este comando en el directorio donde se encuentre el archivo:

sass --watch style.scss:style.css

Si tienes varios archivos en un directorio el comando es parecido:

sass --watch stylesheets/sass:stylesheets/css

Existen unos cuantos comandos más, pero si prefieres evitar la línea de comandos, como yo, puedes usar alguna de las siguientes aplicaciones:

Siendo usuario de Windows, he probado Scout.app, pero al final he decidido comprar Compass.app que funciona un poco mejor y ofrece refresco automático del navegador. Además, con este último, no es necesario tener instalado Ruby e incluye el framework Compass.
Su uso es bastante sencillo, tan sólo hay que elegir los directorios para los archivos de entrada y los de salida, elegir si queremos el CSS legible o minimizado y configurar el refresco automático.

¡Ese CSS pásalo a SCSS!

Vamos a ver algunas de las posibilidad que nos ofrece SASS.

Variables

Una de las cosas que siempre me ha sorprendido de CSS es la ausencia de variables. Es algo tan básico y útil que no me explico cómo han tardado tanto en decidir introducirlo. De todas formas las variables CSS todavía están en fase experimental así que veamos cómo usarlas con SASS:

$azul: #82C1FF;
$paragraph: 20px;

p {
    color: $azul;
    font-size: $paragraph;
}

CSS resultante:

p {
    color: #82C1FF;
    font-size: 20px;
}

Operaciones y funciones

Otra de mis funcionalidades favoritas es la posibilidad de usar operaciones matemáticas básicas (+, -, *, / y %). Me resultan especialmente útiles a la hora de crear estructuras flexibles, en las que hace falta dividir el tamaño deseado entre el contexto (tamaño del elemento padre) y multiplicar por 100 para sacar el porcentaje.

width: 100% * (1152 / 1312); // Resultado = 87,80487804878049%

De esta forma no necesito pre-calcular los valores y siempre tengo una referencia a los tamaños en píxeles. También estaría bien poder hacer lo mismo con valores en em, pero SASS dice que px y em son unidades incompatibles. Quizás en próximas versiones lo implementen.

font-size: 1em * (20 / 16); // ERROR

Si lo que necesitas es modificar un color, puedes usar las funciones integradas en el lenguaje.

background-color: lighten($azul, 20%); // Resultado = #e8f4ff

Hay un monton de funciones definidas para trabajar con color, texto, números, condicionales y más. Además, también puedes definir tus propias funciones, si el repertorio de SASS no satisface tus necesidades.

Anidando

Si te gusta que tu código sea DRY (Don’t Repeat Yourself) creo que esta forma de escribir tus reglas CSS no te va a dejar indiferente:

nav {
    width: 80%;
    height: 23px;
    ul { list-style-type: none; 
    }
    li {
        float: left;
        a { font-weight: bold; 
        }
    }
}

CSS:

nav {
    width: 80%;
    height: 23px; 
}
nav ul {
    list-style-type: none; 
}
nav li {
    float: left; 
}
nav li a {
  font-weight: bold; 
}

Todo en uno

Si decides separar tus hojas de estilos en varios archivos, para mantenerlas organizadas, puedes usar la función @import para intagrarlas en un sólo archivo CSS. Esto hará que tu página cargue más rápido, al haber menos HTTP requests. Si quieres incluir los archivos «_reset.scss» y «_variables.scss«, puedes hacerlo con la siguiente línea:

@import "reset", "variables";

Estilos precocinados

Si vas a usar una combinación de estilos en más de una ocasión, puedes crear un mixin que luego puedes incluir en cualquier selector.

@mixin izquierda-radical {
    position: absolute;
    left: 0;
}

#footer { @include izquierda-radical; }

CSS:

#footer {
    position: absolute;
    left: 0; 
}

Los mixins también se pueden definir con argumentos, lo cual viene muy bien para simplificar las propiedades que requieren prefijos de navegadores.

@mixin redondeado($lado, $radio: 10px) { // El radio será 10px si no se especifica al incluir el mixin
    border-#{$lado}-radio: $radio;
    -moz-border-radius-#{$lado}: $radio;
    -webkit-border-#{$lado}-radius: $radio;
}

#footer { @include redondeado(top); }

CSS:

#footer {
    border-top-radius: 10px;
    -moz-border-radius-top: 10px;
    -webkit-border-top-radius: 10px; }

Y en la última versión (3.2) han añadido una funcionalidad especialmente útil para definir los breakpoint de los media queries en un sitio y aplicar los estilos directamente en contexto.

@mixin breakpoint($point) {
    @if $point == grande {
        @media (max-width: 960px) { @content; }
}
    @else if $point == pequeño {
        @media (max-width: 640px) { @content; }
    }
}

#wrap {
    height: auto;
    min-height: 100%;
    width: 800px;
    @include breakpoint(grande) { 
        width: 80%;
    }
    @include breakpoint(pequeño) { 
        width: 100%;
        margin: 0 auto;
    }
}

CSS:

#wrap {
    height: auto;
    min-height: 100%;
    width: 800px; 
}
@media (max-width: 960px) {
    #wrap {
    width: 80%; 
    } 
}
@media (max-width: 640px) {
    #wrap {
        width: 100%;
        margin: 0 auto;
    }
}

No pierdas el Norte

Una de las grandes ventajas de SASS es la existencia de un framework que básicamente constituye una gran biblioteca de mixins. Estoy hablando de Compass. Su instalación es innecesaria si usas Compass.app, y con la línea de comandos es muy sencillo.

Una vez calibrada la brújula, el siguiente paso es elegir el mixin que necesitas en su extensa referencia. Para poder usarlo, tendrás que importarlo. Por ejemplo, para usar el mixin “box” de la categoría CSS3, añadirías: @import "compass/css3/box" Si vas a usar varios mixins de una categoría no especifiques el mixin, o si quieres importar Compass entero, escribe sólo «compass».

La verdad es que yo sólo lo uso con propiedades que requieren prefijos de navegador, pero quizás encuentre la forma de aprovecharlo más a medida que vaya explorando la referencia.

Una cosa que hay que tener en cuenta es que probablemente es mejor usar -prefix-free si usas muchas propiedades que lo requieran. Como bien señala @LeaVerou en su artículo, cuando llegue el día en que no hagan falta los prefijos, con una solución como -prefix-free será más facil eliminar los prefijos simplemente quitando la biblioteca de la página.

Colorín colorado, este tutorial se ha acabado

Como habeis visto, SASS hace que escribir CSS sea más agradable e intuitivo, aunque no profundices mucho en sus capacidades. Y siendo tan sencillo de instalar y usar, no creo que haya razones para no probarlo.

¿Habéis probado algún preprocesador? ¿Cuál ha sido vuestra experiencia?

WordPress › Error

Ha habido un error crítico en esta web.

Aprende más sobre el diagnóstico de WordPress.