Variáveis ​​em SASS | Explicado

SINTACTICALMENTE APRESÍVEL STILLESHEET (SASS) Processo CSS e funciona bem com todas as suas versões. Ele aprimora a capacidade da linguagem básica, apoiando o uso de variáveis, nidificação, mixins, herança, etc. Se falarmos sobre suas variáveis, essa é uma ótima maneira de impedir a escrita dos valores redundantes do CSS. Para saber mais sobre as variáveis ​​SASS, siga o artigo até o fim.

Variáveis ​​em SASS

Variáveis ​​SASS são usadas para armazenar informações que podem ser usadas posteriormente em qualquer lugar da folha de estilo quando necessário. O tipo de informação que uma variável SASS pode armazenar inclui cores, números, strings, listas, booleanos e nulos.

Sintaxe

$ variblebleName: variableValue;

Para declarar uma variável SASS, você deve incluir um sinal de dólar ($) seguido pelo nome da variável, cólon, valor variável e um semicolon.

Exemplo
Vamos explorar as variáveis ​​SASS ainda mais com a ajuda de um exemplo.

Html

Este é um parágrafo.

Este é um div

Este é o nosso arquivo html no qual criamos dois elementos que são um parágrafo e um contêiner div. Enquanto isso, o link do arquivo CSS gerado como resultado da compilação do arquivo SASS foi fornecido ao atributo href da tag.

Sass

$ fontfam: Verdana, sem serrif;
$ fontsize: 35px;
$ fontcolor: rosa;
$ borda: 2px Solid Black;
$ preenchimento: 10px;
P
Fonte-família: $ fontfam;
Size de fonte: $ fontsize;
Cor: $ fontcolor;

.contêiner
preenchimento: $ preenchimento;
Fronteira: $ Border;

Este é o nosso arquivo sass com .Extensão SCSS. Aqui, criamos cinco variáveis ​​SASS, a saber, $ fontfam, $ fontsize, $ fontcolor, $ fronteiriço e $ preenchimento. Uma vez declarado, estamos usando essas variáveis ​​em nosso arquivo para estilizar nossos elementos.

CSS

Este é o nosso arquivo CSS resultante.

Saída

Os elementos foram estilizados com sucesso usando variáveis ​​SASS.

Sass Variáveis ​​Escopo

As variáveis ​​no SASS podem ser declaradas em qualquer lugar do documento antes de serem usadas e podem ter um escopo global ou um escopo local.

Uma variável SASS com um escopo global é declarada no início do arquivo e mais tarde usada em todo o documento, quando necessário.

Enquanto isso, uma variável SASS com um escopo local é declarada dentro de um bloco e só pode ser usada dentro do escopo desse bloco específico.

Exemplo
O exemplo abaixo demonstra variáveis ​​SASS com escopo global e local.

Sass

$ fontsize: 35px;
$ preenchimento: 10px;
P
Fonte-família: $ fontfam;
Size de fonte: $ fontsize;
Cor: $ fontcolor;

.contêiner
$ borda: 2px Solid Black;
preenchimento: $ preenchimento;
Fronteira: $ Border;
Size de fonte: $ fontsize;

Este é o mesmo código acima, com a única diferença que $ fontsize, e $ preenchimento são variáveis ​​globais e podem ser usados ​​em qualquer lugar do arquivo, enquanto isso, $ borda é uma variável local e só pode ser usada dentro do escopo do bloco. é declarado em. Este código terá a mesma saída que demonstrou na seção anterior. Além disso, a saída CSS resultante também será a mesma.

Conclusão

Variáveis ​​SASS são usadas para armazenar informações que podem ser usadas posteriormente em qualquer lugar da folha de estilo quando necessário. Essas variáveis ​​podem armazenar cores, números, cordas, listas, booleanos e nulos. O nome de uma variável SASS deve começar com um sinal de dólar ($) e essas variáveis ​​podem ter um escopo global ou um escopo local. Além disso, essa é uma ótima maneira de impedir a escrita dos valores redundantes do CSS. O artigo discute variáveis ​​SASS em detalhes, juntamente com exemplos relevantes.