Variáveis SASS

Este artigo explica as variáveis do SASS.

Vamos fornecer uma explicação detalhada sobre as variáveis do SASS e aprender seu uso real passo a passo.

YouTube Video

Variáveis SASS

SASS é uma linguagem de extensão do CSS que permite escrever CSS de forma mais flexível e eficiente. Entre seus recursos, as variáveis são uma ferramenta poderosa para manter a consistência do estilo e facilitar alterações.

O que são variáveis SASS?

As variáveis do SASS oferecem uma maneira de armazenar valores como cores, tamanhos de fonte e espaçamento frequentemente usados no CSS, permitindo que sejam gerenciados em um só lugar.

Ao usar variáveis, você pode alterar estilos facilmente e melhorar a legibilidade do código.

Como Escrever Variáveis

As variáveis podem ser escritas da seguinte forma.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Você precisa prefixar o nome da variável com o símbolo $.
• variable-name é o nome da variável. Recomenda-se dar um nome claro e descritivo.
• valor é o valor atribuído à variável.

Uso básico de variáveis

Abaixo está um exemplo básico de uma variável SASS.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Depois de definir uma variável como $primary-color, você pode reutilizar o mesmo valor quantas vezes quiser.
• Ao alterar um valor, basta modificar a definição da variável, o que melhora a manutenção.

Saída CSS gerada

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Usando variáveis dentro de aninhamentos

Combinar o aninhamento do SASS com variáveis ajuda a organizar seu código e facilita a gestão.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Você pode usar variáveis dentro de seletores aninhados.
• Ao combinar variáveis, você pode obter uma estilização flexível, como deixar uma cor 10% mais escura usando a função color.adjust.

Saída CSS gerada

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Variáveis com valores padrão

No SASS, você pode definir valores padrão para variáveis. Definir valores padrão permite usar variáveis sem substituir as existentes.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Ao adicionar !default, a variável não será substituída se já estiver definida.
• Isto é útil no desenvolvimento em equipe ou para configurações em todo o projeto.

Saída CSS gerada

1p {
2    font-size: 16px;
3}

Escopo de variáveis

As variáveis do SASS têm escopo e sua disponibilidade depende de onde são definidas. Entender o escopo ajuda a evitar a substituição acidental de variáveis.

1. Escopo global

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Variáveis no escopo global estão disponíveis em todo o arquivo.

2. Escopo local

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Variáveis no escopo local só estão disponíveis dentro de um aninhamento ou arquivo específico.

Usando variáveis em cálculos

As variáveis do SASS também podem ser usadas em cálculos. Cálculos também podem ser feitos com valores baseados em unidades e cores.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Saída CSS gerada

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Usar variáveis para ajustes de cores ou cálculos de espaçamento melhora a manutenção.

Resumo

As variáveis do SASS são um recurso essencial para o gerenciamento e manutenção eficiente do CSS.

O uso de variáveis do SASS ajuda a manter estilos consistentes em todo o projeto e facilita as alterações.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video