Vantagens de Usar um Pré-processador (Sass) no Desenvolvimento do CSS

Função #1: Variáveis

Várias classes de CSS podem conter a mesma regra ou regras em um projeto. Por exemplo, temos 20 caixas em nossa página web com diferentes cores de fundo:

.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}

Later, nosso cliente muda de idéia e quer caixas maiores. Então eu preciso aumentar as propriedades de cada classe, uma a uma, para width e height. Isto também pode ser 50 classes. Na programação da vida real, isto pode ser frustrante. Como mencionei acima, este é um exemplo de grande esforço para pequenas mudanças.

Como podemos fazê-lo de forma mais eficiente?

Sass fornece uma solução: variáveis. Como em outras linguagens de programação, nós podemos usar variáveis para armazenar valores e reutilizá-los mais tarde.

Definição de uma variável:

$variable-name: value; 

Voltando ao exemplo acima, se definirmos variáveis para width & height :

$box-width: 100px;
$box-height: 100px;

mais tarde quando uma mudança for necessária, só temos que fazer é alterar os seus valores uma vez:

$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}

CSS em si também suporta variáveis agora, mas não funciona no IE & versões antigas de outros navegadores:

>

>>

>

>

>

>https://caniuse.com/>

Função #2: Aninhamento

>

O CSS padrão não suporta aninhamento. Nós não podemos escrever uma classe dentro de outra classe. Como o projeto fica maior, isto traz um problema de legibilidade e a estrutura não parece legal.

Por exemplo, vamos definir um menu de navegação com links clicáveis em HTML abaixo:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>

HTML suporta código aninhado. Entretanto sem aninhamento, eles se parecem assim em CSS:

CSS classes para o menu de navegação

Tivemos que escrever nav para cada tag, mesmo para a pseudo-classe da âncora (hover) porque nav é a tag pai de todas. Sass, porém, suporta aninhamento:

As mesmas classes com Sass

Aqui podemos escrever código melhor estruturado como em HTML. Não precisamos escrever nav classe após classe, o que também evita redundância

Importante: Não é recomendado aninhar classes mais profundas do que 3 níveis.

Função #3: Mixins

Nós aprendemos acima como usar variáveis para regras CSS. Mas e se precisarmos usar um grupo de regras em conjunto? Sass tem uma funcionalidade chamada mixins, deixando-nos fazê-lo.

O que é um Mixin?

Mixins são funções Sass que agrupam declarações CSS. Podemos reutilizá-los posteriormente como variáveis.

Podemos criar um mixin com o comando @ mixin, seguido por um nome:

@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}

ou podemos criar um mixin como função e adicionar parâmetros também:

$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}

Após criar o mixin, podemos usá-lo em qualquer classe com o comando @ include. Assim podemos usar o mixin my-font em vez de 4 linhas de regras de fonte de cada vez. Esta abordagem simplifica o código.

p { 
@include my-font;
}

Usar mixins é uma boa maneira de evitar redundância de código.

Fature #4: Importação

Finalmente, podemos cortar nossos enormes arquivos CSS em pedaços menores com o recurso de importação Sass. É muito mais fácil de ler & manter arquivos menores do que um arquivo grande com linhas infinitas.

Atualmente, o CSS agora também tem um recurso de importação. Mas ele funciona de forma diferente. CSS envia um pedido HTTP ao servidor a cada vez que importa um arquivo. Sass faz isso sem uma requisição HTTP, o que é uma abordagem mais rápida.

Tudo que você precisa é, importar seu arquivo Sass com o comando @ import para outro arquivo Sass:

// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}

Não precisamos usar as extensões .scss no caminho do arquivo, Sass irá entendê-lo.

Deixe uma resposta

O seu endereço de email não será publicado.