Cómo instalar Sass y empezar a usarlo

En el post anterior hablé un poco en qué consistía los preprocesadores de CSS. En este post voy a explicar cómo instalar Sass y un par de ejemplos sencillos con variables para ver cómo se usa.

Instalar Sass

Hay 2 maneras instalar SASS, una de ellas es mediante una aplicación. Este método es mucho más sencillo ya que está más enfocada a una interfaz. La otra forma es por línea de comandos donde la compilación de los archivos scss se hacen mediante instrucciones. Si tenéis alguna duda podéis ver más información en la página oficial de SASS donde os indican alternativas para ambos métodos.

Yo voy a mostrar cómo instalar Sass mediante aplicación, el cuál es muy sencillo y es perfecto para alguien que esté comenzando. La aplicación que vamos a usar es scout que es totalmente gratuita. y compatible con Linux, Mac y Windows. Si lo descargáis (en mi caso con Windows), obtendréis un comprimido que contiene el programa, no es preciso instalarlo.

Cómo instalar Sass y empezar-a-usarlo - Archivos de la app

La aplicación Scout descomprimida

Cómo usar Sass

Una vez que tenemos descomprimido el compilador, antes vamos a establecer el área de trabajo. En tu servidor, ya sea en la carpeta htdocs o en www, creamos una carpeta llamada prueba-sass y dentro de esta habrá otras 2 carpetas, una llamada CSS y otra SCSS.

Cómo instalar Sass y empezar-a-usarlo - Area de trabajo

Y para qué? Cuando usemos nuestro compilador, hay que indicar en qué carpeta estarán los scss y la carpeta donde irán los css ya compilados.

Arrancamos scout y añadimos un nuevo proyecto y seleccionamos la carpeta prueba-sass.

Cómo instalar Sass y empezar a usarlo - Uso de Scout

Inicio de Scout

Una vez hecho, si tenéis las carpetas scss y css, scout ya escogerá las carpetas de entrada y salida automáticamente. Sino, tendréis que configurarlas manualmente.

Configuración de Scout

Seguramente te estes preguntando qué es el apartado environment. En él podemos indicar cómo queremos que se compile el SCSS. Si escogemos Development(desarrollo) el código CSS compilado será legible para que podamos revisarlo si vemos alguna anomlía. Tenemos a elegir entre output, nested o expanded aunque yo escogería expanded. Por el otro lado, tenemos production (producción) que está más enfocado al producto final y se compilará de manera de ofrecer un rendimiento óptimo. En este apartado escogería compressed que sería como minificar.

Cómo instalar Sass y empezar a usarlo - Configuración de entorno

Para nuestros ejemplos escogeremos Development – Expanded

Una vez tenemos listo nuestro entorno de trabajo, podemos empezar a usar SASS.

Las variables en Sass

Como en otros lenguajes de programación, las variables son usadas para asociar valores a un nombre y que estarán disponibles para reusarse en cualquier punto del código. En Sass podemos almacenar en una variables el color, la tipografía, tamaños… y todo ello es reusable. Para crear un variable en Sass el nombre tiene que ir precedido de $ (Como en PHP).

Para comenzar con nuestro ejemplo, vamos a crear un index.html muy básico en prueba-sass y llamaremos a un css llamado estilo.css

Ahora en la carpeta scss, creamos un archivo estilo.scss que tendrá el siguiente código:

En el creamos una variable llamada color-principal que tiene como valor un azul. Luego lo llamamos en la regla del h1 para que se aplique dicho color.

Ahora toca compilar este código, para ello le damos al “play” que está en el scout.

Cómo instalar Sass y empezar a usarlo - Arrancar compilador

Si todo ha salido bien, os debería de dar un aviso en verde que se ha compilado con éxito y que se creo el archivo estilo.css. Mientras tengas el scout arrancado, cada cambio que hagas en el scss se verá reflejado en el css de salida.

Al ejecutar el index.html, debería de mostrarse el título en color azul.

Las variables que sean declaradas fuera de la declaración del a regla, serán globalmente accesibles. Si están declaradas dentro de un selecto especifico, sólo estarán disponibles dentro de ese selector. Por ejemplo

El scout te dará que la variable no está definida.

Otra ventaja de las variables, es que podemos combinarlas para que hagan una sola regla. Por ejemplo, vamos a establecer que un borde sea sólido con 2px de grosor y su color dependerá del valor de la variable $border-color

También podemos ir más allá y crear una variable a partir de otra variable.

Tipos de datos de una variable

Sass soporta varios tipos de datos para una variable

  • Números: 2.0,15,18px
  • Strings: “hola”, .selector
  • Colores: #000, rgb(255,255,255), rgba(255,255,255, 0.5)
  • Boleanos: true o false
  • Valores separados por comas o espacios: “20px 50px”, “Helvetica sans-serif”.

Y hasta aquí cómo instalar Sass y las variables. Espero que os haya gustado. A seguir picando 🙂