Inicio Apuntes FPApuntes DAW SASS, instala este lenguaje de hoja de estilos en cascada creado con Ruby

SASS, instala este lenguaje de hoja de estilos en cascada creado con Ruby

Instala este lenguaje de hoja de estilos en cascada

Publicado por entreunosyceros

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 syntaxsintaxis 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

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:

gem install sass
sudo gem install sass

Instalando rb-inotify

instalación de 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:

versión de Ruby Sass instalado
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;
}

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.