Começando com sass

Variáveis

Se você tem um valor que usa com frequência, pode armazená-lo em uma variável. Você pode usar isso para definir esquemas de cores, por exemplo. Você só teria que definir seu esquema uma vez e então poderia usá-lo em todas as suas folhas de estilo.

Para definir uma variável, você deve prefixar seu nome com o símbolo $. (Como você faria em PHP.)

Você pode armazenar qualquer valor de propriedade CSS válido dentro de uma variável. Como cores, fontes ou URLs.

Exemplo 1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

Importando

Vamos supor o seguinte cenário: Você tem duas folhas de estilo: _variables.scss e layout.scss. Logicamente, você mantém todas as suas variáveis ​​dentro de sua folha de estilo de variável, mas deseja acessá-las a partir de sua folha de estilo de layout.

NOTA: Você pode notar que a folha de estilo das variáveis ​​tem um sublinhado (’_’) antes do nome. Isso ocorre porque é parcial - o que significa que será importado.

sass-lang.com diz o seguinte sobre parciais: Você pode criar arquivos Sass parciais que contenham pequenos trechos de CSS que você pode incluir em outros arquivos Sass. Esta é uma ótima maneira de modularizar seu CSS e ajudar a manter as coisas mais fáceis de manter. […] O sublinhado permite ao Sass saber que o arquivo é apenas um arquivo parcial e que não deve ser gerado em um arquivo CSS. Parciais Sass são usados ​​com a diretiva @import.

As variáveis ​​SCSS são ótimas para este cenário. Vamos supor que seu _variables.scss fique assim:

$primary-color: #333;

Você pode importá-lo com @import e, em seguida, o nome da folha de estilo entre aspas. Sua folha de estilo de layout agora pode ficar assim (observe que não há sublinhado ou extensão de arquivo na importação):

@import 'variables';
body {
  color: $primary-color;
}

Isso produziria algo como o seguinte:

body {
  color: #333;
}

Comentários

O SASS suporta dois tipos de comentários:

  • Comentários embutidos - Eles abrangem apenas uma linha e geralmente são usados ​​para descrever uma variável ou bloco. A sintaxe é a seguinte: // Seu comentário aqui (você o adiciona com uma barra dupla (//) e o resto da linha é ignorado pelo analisador.

  • Comentários de várias linhas - Eles abrangem várias linhas e geralmente são usados ​​para exibir um direito autoral ou licença na parte superior de um documento. Você pode abrir um bloco de comentários de várias linhas com /* e fechar um bloco de comentários de várias linhas com */. Aqui está um exemplo:

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/

Aninhamento

layout.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

resultado

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

Configurar

Quando se trata de usar SASS, existem várias maneiras de configurar seu espaço de trabalho. Algumas pessoas preferem usar ferramentas de linha de comando (provavelmente pessoas do Linux) e outras preferem usar aplicativos GUI. Eu vou cobrir os dois.

Ferramentas de linha de comando

A página ‘Install SASS’ em sass-lang.com cobre isso muito bem. Você pode usar SASS com Ruby (que pode ser instalado a partir de um gerenciador de pacotes Linux ou você pode baixar o instalador no Windows). O macOS vem com Ruby pré-instalado.

Depois de instalar o Ruby, você precisa instalar o SASS (em alguns casos, o sudo pode não ser necessário):

sudo gem install sass

Finalmente, você pode verificar se instalou o SASS com sass -v.

Aplicativos GUI

Embora existam vários aplicativos GUI que você pode usar, eu recomendo o Scout-App. Ele cria e compacta automaticamente seus arquivos CSS para você, salvando arquivos e suporta macOS, Windows e Linux.

SCSS vs Sass →