O SASS (Syntactically Awesome Stylesheets) é uma extensão do CSS que adiciona recursos como variáveis, mixins e funções, facilitando a escrita e manutenção de estilos, especialmente em projetos maiores.

​
Criando Arquivos SCSS

Para criar um arquivo SCSS no editor de código:

  1. Acesse styles > Adicionar styles no menu lateral.
  2. Clique em Adicionar Style.
  3. Nomeie o arquivo e clique em Criar arquivo.

Os arquivos SCSS são automaticamente compilados em CSS minificado, pronto para uso.

​
Exemplos de SCSS

​
Variáveis

Mantenha consistência no design com variáveis:

$primary-color: #3498db;
$secondary-color: #2ecc71;

.button {
    background-color: $primary-color;
    color: #fff;

    &:hover {
        background-color: $secondary-color;
    }
}

​
Aninhamento

Organize estilos com aninhamento:

.card {
    border: 1px solid #ccc;
    padding: 16px;

    .card-title {
        font-size: 20px;
        font-weight: bold;
    }

    .card-content {
        font-size: 16px;
        color: #666;
    }
}

​
Mixins

Crie trechos reutilizáveis de código:

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    @include flex-center;
    height: 100vh;
    background-color: #f5f5f5;
}

​
Extends

Reutilize estilos existentes:

.button {
    padding: 10px 20px;
    border-radius: 4px;
    color: #fff;
}

.button-primary {
    @extend .button;
    background-color: $primary-color;
}

.button-secondary {
    @extend .button;
    background-color: $secondary-color;
}

​
Funções

Manipule valores com funções personalizadas:

@function calculate-spacing($value) {
    @return $value * 8px;
}

.container {
    margin: calculate-spacing(2); // Output: 16px
    padding: calculate-spacing(3); // Output: 24px
}

​
Boas Práticas

  1. Organize em módulos: Divida o código em arquivos menores, como buttons.scss e variables.scss.
  2. Centralize temas: Use variáveis para cores, fontes e espaçamentos.
  3. Evite aninhamentos profundos: Limite a três níveis para manter a legibilidade.

O SASS melhora a organização e manutenção de estilos. Para mais detalhes, consulte a documentação oficial do Sass.