Es un procesador de hojas de estilos CSS en tiempo real, es decir con SASS escribimos estilos CSS en formato SCSS previamente, para luego ser procesados y exportados a estilos CSS compatible con los navegadores modernos.

La principal ventaja de SASS es la posibilidad de convertir los CSS en algo dinámico. Permite trabajar mucho más rápido en la creación de código con la posibilidad de crear funciones que realicen ciertas operaciones matemáticas y reutilizar código gracias a los mixins, variables que nos permiten guardar valores. SASS, en definitiva, se convierte en tu mejor ayudante.

Instalar SASS en Windows

Para que podamos instalar SASS en nuestro ordenador lo primero que tenemos que tener instalado es NodeJS y el gestor de paquetes npm. Así que, descarga la librería desde la web oficial de Node,js en nodejs.org, abre el paquete y sigue el asistente.

npm -version

Comando para instalar SASS:

npm install -g sass

Utilizar:

sass --watch style.scss style.css

Este comando se estará ejecutando hasta que nosotros lo paremos usando las teclas control + c.

Variables

SASS permite reutilizar valores que podemos manejar desde un solo sitio de forma sencilla y centralizada. Esto es muy útil por ejemplo para definir los colores primarios y secundarios de nuestra web o aplicación, y en caso de tener que modificarlos, podremos hacerlo una única vez en un único lugar.

Definir una variable

$primary-color: #333;

Utilizar una variable

body p{
    color: $primary-color;
}

Mixins

Los mixins le permiten definir estilos que se pueden reutilizar en toda la hoja de estilos.

En pocas palabras, un mixin es un bloque de código que le permite escribir sus estilos en él y usarlo durante todo el proyecto. También puede considerarlo como un componente reutilizable. También te ayuda a escribir un código más limpio sin tener que repetirlo.

Definir un mixin

@mixin button{
    display: inline-block;
    margin-top: 15px;
    text-decoration: none;
    padding: 5px;
    border-radius: 4px;
    color: #fff;
    background-color: #91148f;
    border: 1px solid #fff;
}

Utilizar un mixin

article a.link{
    @include button;
}

Definir un mixin con parámetros

@mixin button($color, $borderColor, $backgroundColor){
    display: inline-block;
    margin-top: 15px;
    text-decoration: none;
    padding: 5px;
    border-radius: 4px;
    color: $color;
    background-color: $backgroundColor;
    border: 1px solid $borderColor;
}

Utilizar un mixin con parámetros

article a.link{
    @include button(#fff, #fff, #91148f);
}

Herencia

En SASS podremos utilizar una especie de Herencia, como en el siguiente ejemplo:

.featured{
    background:#000;
    width:100px;
    height:100px;
    padding:10px;
}

div{
    @extend .featured;
    color:orange;
    font-family:sans-serif;
}

Esto, será compilado y resultará lo siguiente:

.featured, div {
    background: #000;
    width: 100px;
    height: 100px;
    padding: 10px;
}

div {
    color: orange;
    font-family: sans-serif;
}

De esta forma, ahorraremos líneas de código. El resultado en el ejemplo anterior es que las reglas de la clase featured se aplican también a los elementos div. Además, a estos últimos se aplica a mayores el color y la fuente que se indican.

Nesting o anidamiento

Es una funcionalidad que también nos ayudará a ahorar líneas de código, además de simplificarlo. Por ejemplo, antes tendríamos lo siguiente:

div{}
div a{}
div a:hover{}

Utilizando el anidamiento de SASS sería de esta otra forma:

div{
	color: black;
	a{
		color: red;
		&:hover{
			color:blue;
		}
	}
}

Y nos generaría estas reglas:

div {
  color: black;
}
div a {
  color: red;
}
div a:hover {
  color: blue;
}

Funciones

SASS nos permite crear funciones para realizar cálculos matemáticos según nuestras necesidades y poder llamarlas antes de compilar.

@function distribute($num: 1%){
  @return  100%/$num;
}


div.column {
  background-color: gray;
  width: distribute(2);
}

En el ejemplo anterior, creamos una función que calcula el % de ancho pasándole como parámetro en número de columnas que necesitamos.

Ejemplo básico

En este enlace encontrarás un ejemplo realmente básico de cómo utilizar SASS.

Otro ejemplo, en este caso, simulando la página principal de un blog en GitHub.