A Flag `!default` no SASS

Este artigo explica a flag !default no SASS.

Vamos explicar a flag !default em detalhes e mostrar como utilizá-la com exemplos práticos.

YouTube Video

A Flag !default no SASS

A flag !default no SASS é uma ferramenta importante para melhorar a modularidade e a reutilização dos estilos. Ao usar essa flag, você pode definir valores padrão para variáveis, permitindo que valores definidos em outros lugares tenham precedência. Aqui, vamos explicar a flag !default em detalhes e demonstrar seu uso com exemplos práticos.

A flag !default é um recurso específico do SASS usado para definir valores padrão para variáveis. Ao adicionar esta flag, obtém-se o seguinte comportamento:.

• Especificando Valores Padrão O valor só será definido se a variável não for definida em outro lugar.

• Controlando a Precedência Se a variável já estiver definida, seu valor não será sobrescrito.

Esse recurso é especialmente útil na construção de módulos e bibliotecas. Os usuários podem definir valores personalizados, mas se nenhum for especificado, os valores padrões serão usados.

Exemplo Básico

O código a seguir demonstra o uso básico da flag !default.

1// _variables.scss
2$primary-color: blue !default;

• Definindo a variável padrão $primary-color usando o modificador !default.

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• Importando variáveis usando @use e sobrescrevendo $primary-color com with.

CSS de Saída

1body {
2    background-color: red;
3}

• Neste exemplo, como $primary-color está definido como red em main.scss, o valor blue definido em _variables.scss não será utilizado.

Quando uma Variável não é Definida

Se a variável não estiver definida em main.scss, o valor padrão será utilizado.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• Como a variável é importada sem sobrescrita, o valor padrão blue de $primary-color definido em _variables.scss é aplicado.

CSS de Saída

1body {
2    background-color: blue;
3}

Uso em Módulos Aninhados

Usar !default dentro de módulos permite uma personalização flexível.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• Definindo $primary-color e $button-color com o modificador !default.

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• Importando o módulo variables e especificando a cor de .button usando a variável $button-color.

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• Usando @use com with para sobrescrever $button-color com orange, e utilizando o módulo buttons.

CSS de Saída

1.button {
2    color: orange;
3}

• Dessa forma, os módulos fornecem valores padrão respeitando as configurações definidas pelo usuário.

Pontos Importantes

Ao usar a flag !default, os seguintes pontos devem ser considerados:.

• Escolhendo Valores Padrão Apropriados Os valores padrão devem ser escolhidos para cobrir os casos de uso mais comuns.

• Design Intencional Utilize nomes de variáveis consistentes e evite conflitos com outros módulos.

• Verificação de Ordem Para que a flag !default funcione conforme o esperado, a ordem das sobreposições de variáveis deve ser gerenciada corretamente.

Cenários Práticos

Troca de Tema

Por exemplo, ao criar uma biblioteca que suporta temas, você pode usar !default para fornecer valores padrão personalizáveis.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• Definindo $background-color e $text-color com o modificador !default para o tema, e aplicando-os ao body.

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• Personalizando o tema sobrescrevendo $background-color com @use e with.

CSS de Saída

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

Componentes Reutilizáveis

Em um componente de botão reutilizável, você pode fornecer estilos padrão permitindo que os usuários sobrescrevam a cor.

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• Definindo as cores padrão de fundo e texto para botões com !default e aplicando os estilos.

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• Personalizando a cor do botão sobrescrevendo $button-bg com @use e with.

CSS de Saída

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

Resumo da Flag !default

A flag !default no SASS é uma ferramenta poderosa ao construir módulos e bibliotecas. Ela aumenta a reutilização ao mesmo tempo em que permite uma personalização flexível.

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