Usando sass

Para utilizar sass lo primero es instalarlo. Si tenemos node en nuestra computadora, podemos ir a la consola y escribir

npm install -g sass

Si tenemos mac tambien podemos usar brew

brew install sass/sass/sass

Una vez instalado, podemos trabajar con archivos sass.

En HTML

Nuestro navegador necesita archivos css, por lo que debemos trabajar con sass y luego compilar esos archivos a css.

En la carpeta de nuestro proyecto, creamos un nuevo archivo .scss. Alli podremos escribir sass. Por ejemplo, style.scss. En nuestro html no linkeamos al archivo .scss, sino a un css con el mismo nombre.

En la consola, desde la carpeta en la que esté nuestro proyecto, corremos el siguiente comando:

sass --watch style.scss style.css

(podemos cambiar el nombre de los archivos por lo que sea que necesitemos).

Cada vez que haya un cambio en style.scss, sass lo convertirá a un archivo de css. Por ejemplo, probemos escribir sass:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Veremos que se crea automaticamente un archivo de css:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Para interrumpir el proceso apretamos control + c.

Si este proceso es muy pesado y notamos que la computadora funciona lento, podemos hacer toda la compilacion de una sola vez, corriendo:

sass style.scss style.css

En este caso hay que recordar que cada vez que queremos ver un cambio en nuestra web, hay que correr el comando.