Tabla de contenido
Una vez más aquí. Como primer artículo del año, vengo a dejar un pequeño artículo sobre cómo se puede instalar Sass en Ubuntu. Este es un metalenguaje de Hojas de Estilo en Cascada (CSS). Se puede decir que es un lenguaje de script que es traducido a CSS. SassScript es el lenguaje de script en sí mismo. Sass consiste en dos sintaxis. La sintaxis original, llamada indented syntax («sintaxis con sangrado») que usa una sintaxis similar al Haml. Este usa la sangría para separar los bloques de código y el carácter nueva línea para separar reglas. La sintaxis más reciente, SCSS, usa el formato de bloques como CSS. Este usa llaves para denotar bloques de código, y punto y coma para separar las líneas dentro de un bloque. La sintaxis indentada y los ficheros SCSS tienen las extensiones .sass y .scss respectivamente.
¿Que es Sass?
La implementación oficial de Sass es open-source y está escrita en Ruby, sin embargo existen otras implementaciones, incluyendo una en PHP para Drupal.
CSS3 consiste en una serie de selectores y pseudo-selectores en los que se agrupan las reglas que son aplicadas. Sass (en el amplio contexto de ambas sintaxis) extiende CSS proveyendo de varios mecanismos que están presentes en los lenguajes de programación tradicionales, particularmente lenguajes orientados a objetos, pero este no está disponible para CSS3 como tal. Cuando SassScript se interpreta, este crea bloques de reglas CSS para varios selectores que están definidos en el fichero SASS. El intérprete de SASS traduce SassScript en CSS. Alternativamente, Sass podrá monitorear los ficheros .sass o .scss y convertirlos en un fichero .css de salida cada vez que el fichero .sass o .scss se guarda.
La sintaxis indentada es un metalenguaje. SCSS es un metalenguaje anidado, lo que es válido en CSS es válido en SCSS con la misma semántica. Sass soporta la integración con la extensión de Firefox Firebug.
Este es una meta-lenguaje el cual funciona como una capa superior al CSS, permitiendo describir estilos de una forma limpia, ordenada y estructurada, permitiendo crear código más elegante y mantenible. Esto se debe a que permite la creación de variables, herencia de selectores, mixin, interpolación, nesting (anidamiento) y mucho más…
Como ya decía líneas más arriba, Sass esta implementado en Ruby y su compilación por lo general es mediante este lenguaje, es por esto que se requiere realizar una pequeña instalación al igual que otros lenguajes como CoffeeScript.
Instalar y compilar Sass en Ubuntu Linux
Para poder utilizar Sass en Ubuntu, va a ser necesario instalar en nuestra maquina Ruby, Rubygems, Sass y rb-inotify. Para ello es necesario abrir la terminal del sistema (Ctrl+Atl+T) y seguir los siguientes pasos:
Instalación de Ruby
sudo apt-get install ruby-full build-essential
Instalando Rubygems
sudo apt-get install rubygems
Instalación de Sass
SASS es un preprocesador de CSS compatible con todas sus versiones. Por lo tanto, se trata de una herramienta utilizada por los desarrolladores web para traducir un código de hojas de estilo no estándar a un código CSS estándar, legible por la mayoría de los navegadores. Para instalarlo solo tendremos que utilizar gem para instalarlo en nuestro equipo. Esto lo conseguiremos con el comando:
sudo gem install sass
Instalando rb-inotify
sudo gem install --version '~> 0.8.8' rb-inotify
Comprobar la instalación
Para terminar, solo queda comprobar si SASS se ha instalado en el sistema de forma correcta. Para ello, solo tendremos que comprobar que versión se ha instalado en nuestro sistema. Esto lo haremos escribiendo en la misma terminal el siguiente comando:
sass -v
Después de la instalación, ya podremos escribir código en nuestro equipo y hacer que se interprete de manera correcta. Un ejemplo de código SCSS que podremos utilizar ahora en nuestro sistema, sería algo como lo siguiente:
$bg-color: #df0174;
$size: 1em;
body {
background-color: $bg-color;
margin: $size * 2;
}