Uso básico do Sass

Casos com extensão

Agora que o Sass está instalado, crie um arquivo simples e faça a transpilação para CSS. O nome do arquivo pode ser example.scss. Escreva o conteúdo abaixo:

$font: Arial;

body {
  font-family: $font;
}

Agora, faça a transpilação:

sass example.scss example.css

Abrindo o arquivo example.css, você deve ver uma saída igual ou semelhante a essa:

body {
    font-family: Arial; }

/*# sourceMapping... */

Agora, vamos criar um arquivo com a mesma estrutura, porém usando a sintaxe indentada. O nome do arquivo pode ser example.sass.

$font: Arial

body 
    font-family: $font

Faça a transpilação e veja como a saída é a mesma da outra sintaxe:

sass example.sass example-sass.css

O Sass também pode ser usado como um módulo de Ruby ou plugin de Ruby on Rails ou outro framework Rack-enabled, mas será mostrado apenas o uso dele como ferramenta da linha de comando.

Casos sem extensão

No último exemplo, eu informei a extensão do arquivo em SCSS. Como já foi dito, o Sass tem duas sintaxes. Quando a extensão é informada, o transpiler sabe qual é a sintaxe do arquivo pela extensão dele.

Há casos em que nossos arquivos Sass podem não ter uma extensão e o transpiler também pode lidar com esses casos. Quando os arquivos não tem extensões, será usada a sintaxe indentada por padrão. Se você quiser usar a sintaxe SCSS, você pode usar o programa scss, que tem as mesmas funcionalidades do sass, só que usa a sintaxe SCSS por padrão. Ou você pode passar a opção --scss ao programa sass.

Usando o sass-convert

Existe uma compatibilidade entre as duas sintaxes de Sass, e o programa de linha de comando sass-convert é usado para converter de uma sintaxe pra outra. Exemplo de conversão de Sass para SCSS:

sass-convert example.sass example.scss

Exemplo de conversão de SCSS para Sass:

sass-convert example.scss example.sass

Observando arquivos

Ao invés de ter que rodar o Sass na linha de comando toda vez que você altera um arquivo CSS, você pode automatizar essa tarefa, fazendo com que o Sass fique "observando" um arquivo ou uma pasta para ver se eles sofrem alguma alteração. Se isso acontecer, o Sass faz o processo de transpilação automaticamente. Exemplo com um arquivo:

sass --watch example.scss:example.css

Exemplo com um diretório:

sass --watch sass:assets/css