Para comenzar a escribir código sass, es necesario crear un archivo con la extensión .scss. (por ejemplo, feature.scss).

Consideremos la sintaxis de sass utilizando el siguiente código css. Manipularemos el botón que tendrá un efecto hover. Escribimos el código css para ello:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Reescribamos el mismo código utilizando la sintaxis de sass:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

La diferencia es que utilizamos estilos para un elemento dentro del primer par de llaves {}. Además, no usamos el nombre de la clase del elemento dos veces. En su lugar, utilizamos el símbolo de ampersand (&).

Nota

En caso de dudas o falta de comprensión sobre alguna característica de sass, se recomienda encarecidamente utilizar la documentación de sass.

Compilación

Los navegadores no comprenden la sintaxis de los preprocesadores. Solo comprenden la sintaxis de html, css y javascript. Entonces, ¿cómo funciona? Es necesario compilar el archivo sass en un archivo css. Después de la compilación, se podrá ver el resultado.

Existen las siguientes opciones para compilar Sass a CSS:

• Utilizar la extensión de Visual Studio Code - Live Sass Compiler;
• Utilizar la aplicación - Scout App.