A Flag `!global` no SASS

Este artigo explica o sinalizador !global no SASS.

Explicaremos o mecanismo detalhado, exemplos de uso e precauções do sinalizador !global.

YouTube Video

A Flag !global no SASS

No SASS, a flag !global é usada para manipular o escopo das variáveis. Ao entender corretamente essa flag e usá-la de forma adequada, você pode evitar comportamentos inesperados em seu código e melhorar a manutenção.

O que é a Flag !global?

Normalmente, as variáveis em SASS possuem escopo. Por padrão, as variáveis só são válidas dentro do escopo em que foram definidas. Ou seja, se uma variável for definida dentro de uma função ou mixin, não poderá ser acessada fora desse escopo.

No entanto, ao usar a flag !global, você pode atribuir a variável diretamente ao escopo global. Isso permite que variáveis sejam compartilhadas entre diferentes escopos.

Sem a Flag !global

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}

• Neste código, $color é definido no escopo global, então a propriedade color de .change continua sendo red.

CSS de Saída

1.change {
2    color: red;
3}

Com a Flag !global

Vamos adicionar a flag !global ao mesmo exemplo.

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}

• Neste caso, como a flag !global é especificada, o valor de $color é atualizado no escopo global. Como resultado, a propriedade color de .change se torna blue.

CSS de Saída

1.change {
2    color: blue;
3}

Precauções de Uso

• Poluição do Escopo Global O uso excessivo da flag !global pode levar a conflitos inesperados de escopo e poluição do escopo global. Isso é especialmente importante em projetos grandes, onde o uso excessivo desta flag deve ser evitado.

• Sobrescritas de Valores Não Intencionais Ao usar a flag !global, variáveis com o mesmo nome podem ser sobrescritas inadvertidamente em outro lugar. Portanto, é necessário nomear as variáveis de forma consistente e clara.

Exemplo Prático

O exemplo a seguir mostra a maneira correta de usar a flag !global.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}

• Neste código, o mixin set-theme pode ser usado para alternar temas dinamicamente. Como as variáveis globais são atualizadas para cada tema, vários temas podem ser gerenciados de forma flexível.

CSS de Saída

1body {
2    background-color: #333333;
3    color: #666666;
4}

Erros Comuns e Contramedidas

Esquecer da Flag

Se você esquecer de adicionar o !global, as variáveis podem não ser atualizadas no escopo pretendido. Certifique-se de adicionar explicitamente a flag quando necessário.

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

Dependência Excessiva do Escopo Global

Confiar demais na flag !global pode dificultar a depuração e a manutenção do código. Seu uso deve ser mantido ao mínimo.

Resumo

A flag !global no SASS é muito útil em situações específicas, mas deve ser usada com cautela. Compreendendo claramente o escopo das variáveis e gerenciando adequadamente o escopo global, é possível criar códigos SASS altamente manuteníveis.

A seguir estão os pontos principais a serem lembrados:.

1. Por padrão, as variáveis dependem do seu escopo.

2. A flag !global permite atualizar variáveis no escopo global.

3. Mantenha o uso de flags ao mínimo e evite sobrescritas não intencionais sempre que possí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