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.

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.

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.

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.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo con Sass - Guidacode</title>
	<link href="css/estilo.css" rel="stylesheet" type="text/css">
</head>
<body>
	<h1>Hola mundo</h1>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo con Sass - Guidacode</title>

</head>

<body>

<h1>Hola mundo</h1>

</body>

</html>

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

$color-principal:#0073aa;
 
h1{
     color:$color-principal;
}

$color-principal:#0073aa;

h1{

color:$color-principal;

}

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.

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

body
{
     $color-principal:#0073aa;
}
 
h1{
    color:$color-principal;
}

body

{

$color-principal:#0073aa;

}

h1{

color:$color-principal;

}

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

$border-color:#0073aa;
 
h1{
     border: 2px $border-color solid;
}

$border-color:#0073aa;

h1{

border: 2px $border-color solid;

}

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

$border-color:#0073aa;
$declaracion-borde: 2px $border-color solid;
 
h1{
     border: $declaracion-borde
}

$border-color:#0073aa;

$declaracion-borde: 2px $border-color solid;

h1{

border: $declaracion-borde

}

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 🙂