Como instalar Sass

Cómo instalar Sass

Hola a todos, en éste artículo os voy a explicar qué es y cómo instalar Sass con unos primeros pasos para empezar a utilizarlo.
Antes de nada os voy a dejar una pequeña definición de lo que és Sass.

¿Qué es Sass?

Sass es un lenguaje de precompilacion de Css. Sus siglas hablan por si mismas: Syntactically Awesome StyleSheets.
Es un lenguaje de extensión para el Css con el que se puede escribir Css de una manera limpia y evitar los típicos problemas de repetición de código y mantenimiento de nuestras páginas Css. Al ser un lenguaje de precompilación, no se puede interpretar por nuestro navegador directamente, hay que compilarlo primero. Al compilar lo que se hace es pasar el código de SCSS (Sass) a un nivel más bajo que es el Css, de tal forma que pueda ser interpretado por nuestro navegador y aparezcan los cambios de estilo en nuestra página Web.

¿Cómo instalar Sass?

Para instalar Sass, vamos a seguir las instrucciones que nos proporciona su página http://sass-lang.com/install
Cómo podeis ver hay dos formas de hacerlo. La primera utilizando un programa que precompile el código como Codekid, Compass, Koala…
La segunda es con linea de comandos.
En éste artículo vamos a hacerlo utilizando la linea de comandos.
Abre un terminal en modo administrador y sigue las instrucciones que te proporciona la página.

Instrucciones de instalación de Sass

Instrucciones de instalación de Sass

Pasos para intalar Sass en modo comando

  1. Tener Ruby instalado
  2. Instalar Sass

Tener Ruby instalado

Antes de instalar vamos a necesitar tener instalado Ruby. Si tienes un Mac, buenas noticias, ya viene instalado. Si tienes un Linux o un Windows si que te lo tienes que instalar.

Para windows lo más cómodo y eficaz es descargarse e intalar el Ruby desde su página: http://rubyinstaller.org/

Descárgate el programa e instálalo en tu pc

Descárgate el programa e instálalo en tu pc

Si tienes un Linux, hazlo con la siguiente linea de commandos.

sudo su -c "gem install sass"

Instalar Sass

Abre tu terminal en modo administrador e inserta la siguiente instrucción:

gem install sass

Recuerda que si estás en Windows, para abrir un terminal en modo administrador, hay que hacer una busqueda por cmd en el explorador de windows y una vez localizad0, con el botón derecho, seleccionar en modo administrador.

Ejecuta cmd en modo administrador

Ejecuta cmd en modo administrador

Eso es todo, ya tienes Sass instalado. Para ver la versión que hemos instalado, y de paso confirmar la correcta instalación, inserta la siguiente instrucción:

sass -v

Versión de Sass instalada.

Versión de Sass instalada.


En mi caso me devuelve que tengo instalado Sass 3.4.22 (Selective Steve), con lo que todo ha ido bien. Perfecto ahora vamos a ver como utilizarlo.

Como utilizar el Sass recién instalado

Pues bien, si vamos a utilizar la linea de comandos como hemos estado haciendo, con una simple instrucción podemos precompilar el código SCSS en Css. Puedes ver la información en su página http://sass-lang.com/guide

Primera instrucción: Genera el Css a partir del Scss

Básicamente para que lo entendais se trata de lanzar una instrucción a un fichero *.scss que esta en continúa “escucha” de cualquier cambio de código y lo transforma en su homólogo *.css que podrá visualizarse en el navegador.

Para ello tengo en mi directorio un fichero llamado Example.scss

Fichero Scss antes de instruccion

Fichero Scss antes de instruccion

Ahora en el terminal vamos a insertar lo siguiente:

sass Example.scss Example.css

Instrucción Sass para convertir a css

Instrucción Sass para convertir a css


Si vuelves a tu directorio, verás que se han generado dos archivos, siendo el que te interesa el Example.css
Archivos generados tras la instalación

Archivos generados tras la ejecutar la instrucción

Segunda instrucción: Escucha cualquier cambio de tu Scss y actualízalo automáticamente en tu Css

Voy a crear dos directorios. Uno llamado scss donde voy a mover mi archivo Example.scss y otro llamado css, donde voy a mover mi archivo Css.
A continuacion voy a insertar la siguiente instrucción:

Instrucción sass para ver los cambios instantaneamente

Instrucción sass para ver los cambios instantaneamente


A continuación te saldrá el mensaje en el que te avisa de que Sass está escuchando:
Sass escuchando cambios

Sass escuchando cambios


Una vez hecho esto, ya podemos empezar a trabajar con los estilos.

Editando Scss

Para editar los archivos, vamos a utilizar un editor gratuito llamado Brackets. Si necesitas descárgatelo desde aquí
Selecciona el directorio donde tienes los archivos y con el botón derecho, ábrelo con el Brackets.

Abre el directorio como un proyecto

Abre el directorio como un proyecto

A continuación abre los dos archivos en la misma vista. Para ello, abre primero el Example.scss que hábia dejado en el directorio Scss y a continuación selecciona en el menú superior Ver>División horizontal. Sitúate sobre la división recien creada y abre e fichero Example.css

Ver>Division horizontal

Ver>Division horizontal

En mi caso el fichero Example.scss contiene el siguiente código.


$gray: #ccc;

html{
  background: $gray ;
}

Y el Example.scss se ha precompilado en Example.css que contiene el siguiente código


html {
  background: #ccc; }

/*# sourceMappingURL=example.css.map */

}

Para los que saben algo de programación, en el scss se declaran variables. En éste ejemplo la variable $gray: #ccc; es el color gris al que luego llamaremos desde el color de fondo del html. Si queremos modificar el color, simplemente tendremos que hacerlo en la variable $gray.

Antes de continuar, vamos a crear un index.html con el siguiente código para ir viendo los cambios que se producen autmáticamente cuando estamos editando y escuchando los cambios del fichero Example.scss

El index que he creado contiene el siguiente código:
codigo-index-html
Donde lo único que hemos hecho es insertar el link a la hoja de estilo Example.

Voy a añadir al Scss los estilos para los títulos o headings.
Al igual que antes hemos visto como se declaran variables en Sass, también te sorprenderá saber que se pueden crear funciones. Por ejemplo vamos a coger prestada la siguiente función para los headings creada por: http://codepen.io/jcasabona/pen/bHsdz


$start: 3em; 
@each $h in h1, h2, h3, h4, h5, h6{
    #{$h} { 
      font-size: $start;
      }

      $start: $start - 0.5;
  }

Copia la función dentro de tu Example.scss y en el visor de abajo ten preparada y abierta la página Example.css.
Antes de guardar, lo deberás ver asi:

Vamos a demostrar como el Sass está escuchando. Antes de guardar con la función pegada.

Antes de guardar con la función pegada.


Vamos a demostrar como el Sass está escuchando. Ahora guarda y verás como se actualiza la página *.css con los tamaños de los diferentes headings.
Al guardar se acutaliza la función creando el css de los headings.

Al guardar se acutaliza la función creando el css de los headings.


Ahora si ves la página index.html. Ejecuta haciendo clic en el icono que es como un rayo y se generará la página en localhost.

Haz clic en el rayo para ver los cambios en el navegador

Haz clic en el rayo para ver los cambios en el navegador

El resultado tras ejecutar:

Index resultado tras modificar la hoja de estilo utilizando Sass

Index resultado tras modificar la hoja de estilo utilizando Sass


Con ésta introducción ya podeis empezar a manejaros con Sass. Ahora debéis profundizar en el lenguaje. Os dejo este tutorial https://www.codecademy.com/learn/learn-sass interactivo para empezar con Sass.

Eso es todo, ya teneis los conocimientos básicos para comenzar a utilizar Sass. Espero que os haya resultado tan útil e interesante como a mí y que veais como deberíamos trabajar hoy en día los desarrolladores para agilizar nuestro trabajo a la hora de trabajar con estilos.

Verónica Serna| Cookyourweb

Deja un comentario

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