Sass – Instalar y actualizar en OSX 10.11 El Capitan

Sass es una herramienta de pre-procesado CSS que nos permite escribir código usando variables, selectores, herencias, etc, para posteriormente compilarlo en una salida de CSS regular.

Los beneficios de la utilización de Sass son notorios en proyectos de tamaño medio – grande manteniendo su estructura modular y con sencillos elementos re-utilizables.

Trabajar con Sass ayuda al proceso de actualización de código gracias a la utilización de variables, tan solo necesitarás modificar las instancias de estas al inicio del proyecto y ellas se cambiaran a lo largo de todo el CSS.

Codificamos primero a un formato .scss y luego compilamos a un archivo de CSS regular .css, puedes consultar las ayudas del sitio oficial de Sass para más información.

Comprobando Ruby

Sass se ejecuta bajo el lenguaje de programación Ruby el cual viene incluido en OSX, abre el terminal y ejecuta el siguiente comando:

ruby -v

La salida debería ser algo parecido a esto:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Comprobando-Ruby.png” alt=”Comprobando Ruby” align=”center” lightbox=”off” caption=”Comprobando Ruby” captionposition=”center”]

Instalando

La instalación es de lo mas sencilla, simplemente escribe en el Terminal el comando:

sudo gem install sass

Te pedirá la contraseña de administrador, tras esto procederá a la instalación y una vez terminado deberías ver algo parecido a esto:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Instalando-Sass.png” alt=”Instalando Sass” align=”center” lightbox=”off” caption=”Instalando Sass” captionposition=”center”]

Comprobando la versión

Teclea en el Terminal:

sass - v

Y la salida debería ser la siguiente:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Comprobando-la-version-de-Sass.png” alt=”Comprobando la versión de Sass” align=”center” lightbox=”off” caption=”Comprobando la versión de Sass” captionposition=”center”]

 

Compilando a CSS

Hay dos formas de compilar archivos .scss a CSS regular .css, estáticamente o dinámicamente. En el primer caso tu le pasas el nombre de archivo o archivos en un directorio a compilar y genera las salidas respondiendo al comando. En el segundo, Sass monitoriza un archivo o directorio que contiene varios archivos y realiza el compilado según se hagan cambios en estos.

Compilado estático de un solo archivo

Para compilar un archivo simple teclea el siguiente comando en el Terminal:

sass --update archivocss.scss

O para compilar un directorio que contiene múltiples archivos:

sass --update /directorio/

Lo cual produce los nuevos archivo archivocss.css

Monitorizar un simple archivo

sass --watch sass archivocss.scss

Te informará que está a la espera de cambios en el archivo. Puedes presionar CONTROL + C para finalizar el monitorizado.

Monitorizar un directorio que contiene múltiples archivos

sass --watch /directorio/

Puedes cancelar la monitorización o finalizarla presionando CONTROL + C.

Actualizando Sass

Por último, para actualizar a la última versión de Sass en OSX ejecuta el comando:

sudo gem update sass

Deja un comentario

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