Sass: Introduccion

Cuando trabajamos con sitios web y nos toca trabajar con las hojas de estilo vemos que muchas veces se nos hace difícil de entender como esta organizado o si no tenemos atributos repetidos dentro de la misma, por lo cual tenemos que buscar a lo largo del archivo hasta comprobar si existe o no.

Mas allá de esto cuantas veces nos ha pasado que tenemos propiedades que son comunes a varias clases y por no tener en claro como hacerlo simplemente duplicamos el código.

Sass viene a resolver todos estos problemas haciendo que los estilos sean fácilmente modificables como así también entendibles a los ojos de cualquier persona.

¿Que es?

Sass (“Syntactically Awesome Stylesheets”) es una extensión de CSS que le añade nuevas funcionalidades permitiéndonos mayor legibilidad de las hojas de estilo y reutilización del código escrito. Sass nos ayuda a tener organizadas y separadas las clásicas hojas de estilo de forma que no sean muy grandes.

compilar-sass

Partimos de uno o varios archivos Sass lo que nos permite generar un archivo css

Ventajas

Entre algunas de las ventajas que nos da Sass se encuentran:

  • Compatible con CSS3
  • Soporta la creación y uso de variables
  • Permite el uso de directivas de control (if, for, while)
  • Posee multiples funciones, algunas de las cuales relacionadas con colores.
  • Nos brinda un documento legible y con un archivo de salida customizable

¿Como lo instalo?

Para poder usar Sass previamente tenemos que tener instalado en nuestra pc Ruby, lo cual es bastante sencillo de hacer ya que por ejemplo para Windows existe un instalador que nos configura todo con unos simples clicks. Para el caso de Linux bajo la la distribución Debian es tan solo sudo apt-get install ruby1.9.3.

Una vez instalado Ruby, procederemos a instalar la gema (nombre que se le da a cada uno de los componentes de Ruby) de Sass que sera la encargada de compilar todos nuestros archivos Sass y generarnos los correspondientes archivos css. Para poder realizar esto deberemos hacer lo siguiente:

  1. Abrir una terminal de nuestro sistema operativo
  2. Ejecutar el siguiente comando gem install sass. En Linux quizás sea necesario anteponer la palabra sudo para darle permisos para que haga todas las operaciones necesarias.
  3. Por ultimo ejecutamos dentro de la terminal el comando sass -v y si todo se instalo correctamente nos debería mostrar un mensaje como este Sass 3.4.6 (Selective Steve). Este mensaje corresponde al numero de versión que se instalo el cual puede variar ya que esta en constante actualización.

¿Como lo uso?

Para usar Sass primero debemos crear un archivo con la extensión .scss el cual contendrá todo el código. Una vez hecho eso veamos algunas de las funcionalidades básicas en detalle:

  • Comentarios

La forma de colocar comentarios a nuestro archivo es bastante sencilla y es bastante similar a otros lenguajes de programación.

  • Importar hojas de estilo

La idea de esto es que cuando generemos nuestro archivo css se haga todo en un solo archivo evitando de esta forma tener que descargar ambos archivos. La forma de realizar esta tarea es colocar en la parte superior del archivo @import “nombreArchivo”. Algo importante a mencionar es que la extensión del archivo es opcional.

  • Selectores de anidación

Este tipo de selectores nos permite mostrar en forma de jerarquía como estan relacionados los selectores. Para ver esto de forma mas clara veamos como seria el código en Sass y el equivalente en css.

SASS CSS
.content {

padding: 20px;

border: 1px solid #ccc;

h2 {

font-size: 3em;

}

}

.content {

padding: 20px;

border: 1px solid #ccc;

}

.content  h2 {

font-size: 3em;

}

Como se puede observar en el ejemplo dentro de lo que es el mundo de Sass los estilos que son anidados se colocan dentro del principal a diferencia de lo que es css en donde se colocan como parte del prefijo. Cabe mencionar que una vez que se compile el archivo Sass se genera el código que se encuentra a la derecha.

Algo a tener en cuenta con este tipo de selectores es que no es recomendado tener mas de 3 o 4 niveles de anidacion (en nuestro ejemplo hay 1 nivel de anidacion), en caso de superar esa cantidad debería considerar refactorizar el código.

  • Pseudo-clases

Las pseudo-clases o parent selector son aquellas que se unen a cada unas de clases por medio de dos puntos (:), algunos ejemplos de este tipo son hover, active, link. La forma de hacerlo en Sass es &:pseudoClase, el & lo que hace es concatenar sin dejar espacio alguno con la clase padre. Veamoslo con un ejemplo:

SASS CSS
a {

color: #999;

&:hover {

color: #777;

}

}

a {

color: #999;

}

a:hover {

color: #777;

}

¿Como genero el css?

Para generar el archivo css apartir de un Sass deberíamos ejecutar el siguiente comando por consola:

Ahora bien supongamos que estamos trabajando en un sitio web y necesitamos modificar los estilos para corregir unos pequeños detalles. Seria incomodo tener que ejecutar este comando cada vez que corregimos algo, por lo cual Sass ya nos brinda una opción para este tipo de casos, para esto se queda viendo si guardamos alguna modificación dentro de nuestro archivo y en caso de hacerla Sass nos genera nuevamente el archivo css sin que tengamos que indicarle nada. El comando para hacer esto posible es:

Conclusión

Como se ha visto a lo largo de este post, Sass nos provee la posibilidad de hacer el código css mas legible al ojo humano. Ademas de esto nos permite la vinculación de hojas de estilos entre si, por lo cual hace que no sea necesario tener todo en un mismo lugar y nos permite una mejor organización.

You may also like...

1 Response

  1. Muy buena introducción, un aporte, para los que quieran algo mas visual que la terminal, les recomiendo http://koala-app.com/ ( gratis) y muy buena, o si pueden también tienen https://prepros.io/ (de pago)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *