Os pré-processadores CSS, como Sass, Less e Stylus, oferecem uma ampla gama de recursos poderosos que podem melhorar significativamente a eficiência e a manutenção do código. No entanto, em muitos projetos, esses recursos acabam subutilizados, resultando em código css repetitivo e em muitos casos confuso. Neste artigo, vamos explorar alguns recursos e melhorar a estrutura, personalização e reutilização dos nossos estilos.

Em primeiro lugar, vamos organizar nossa estrutura de arquivos para que consigamos entender o que cada um faz a partir do seu nome e da pasta onde estes estarão contidos. E aqui já vamos introduzir o uso de  @import e partials no sass. Esses recursos são cruciais em aplicações grandes ou que pretendem crescer de forma escalável e sustentável, posto que dividir os códigos em arquivos menores aumenta a facilidade de manutenção e organização de forma mais concisa.

Ao contrário das importações CSS simples, que exigem que o navegador faça várias solicitações HTTP enquanto carrega a página, as importações Sass são tratadas inteiramente durante a compilação, tratando as partials como rails, por exemplo.

// Estrutura de Arquivos Sass

styles/
|-- base/
|   |-- _reset.scss
|   |-- _typography.scss
|-- components/
|   |-- _buttons.scss
|   |-- _modals.scss
|-- layout/
|   |-- _grid.scss
|   |-- _header.scss
|-- application.scss
|-- _variables.scss
|-- _mixins.scss
|-- _functions.scss

Notas: por convenção, as partials devem iniciar com _ para que as ferramentas de compilação não tentem compilar esses arquivos 

Feito a organização da nossa estrutura, podemos lançar mão de recursos mais avançados do pré-processador, como variáveis, nesting, herança, mixins, functions, estrutura de repetição e condicionais para deixarmos nosso código css mais enxuto e funcional. Passaremos por cada um desses recursos aplicando exemplos simples para fins de entendimento. 

Variáveis:

Este é o recurso mais utilizado dos pré-processadores css, embora tenha esse recurso de forma nativa no css puro desde 2012, pois facilita a manutenção de valores reutilizáveis.

$box_shadow_material_design: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
$box_shadow_hover_material_design: 0 7px 28px rgba(0,0,0,0.25), 0 5px 10px rgba(0,0,0,0.22);
$transition_box_shadow_material_design: all 0.3s cubic-bezier(.25,.8,.25,1);

Nesting:

Mantém a hierarquia visual do código e facilita a leitura.

nav {
 ul {
   margin: 0;
   padding: 0;
   list-style: none;
   li {
     display: inline-block;
     a {
       display: block;
       padding: 6px 12px;
       text-decoration: none;
     }
   } 
 }
}

Herança:

Como o próprio nome sugere, permite herdar estilos de um seletor e melhora a reutilização de código mantendo a consistência visual.

%bnt-default{
 padding: 8px 15px;
 border:1px solid #ddd;
 cursor: pointer;
}

.btn-success{
 @extend %bnt-default;
 background: $green;
 border-color: $green;
}

.btn-primary{
 @extend %bnt-default;
 background: $blue;
 border-color: $blue;
}

.btn-danger{
 @extend %bnt-default;
 background: $red;
 border-color: $red;

}

.btn-warning{
 @extend %bnt-default;
 background: $yellow;
 border-color: $yellow;
}

Mixins:

Com mixins o css ganha uma poderosa capacidade de reutilização de código com a possibilidade de modificar o valores de todas as propriedades como parâmetro.

@mixin box-shadow($x, $y, $blur, $color) {
 box-shadow: $x $y $blur $color;
}

.element {
 @include box-shadow(2px, 2px, 5px, #333);
}

.another-element {
 @include box-shadow(0, 0, 10px, #e74c3c);
}

@mixin gradient($direction: to bottom, $color1, $color2) {
 background: linear-gradient($direction, $color1, $color2);
}

.header {
 @include gradient(#3498db, #2c3e50);
}

.footer {
 @include gradient(to right, #e74c3c, #c0392b);
}

Functions:

São poderosas ferramentas para a criação de estilos mais dinâmicos e flexíveis. Em Sass, as funções são definidas usando a diretiva @function. Elas podem aceitar argumentos e retornar valores

$base-font-size: 16px;

@function em($pixels) {
 @return $pixels / $base-font-size * 1em;
}

body {
 font-size: em(18px);
}

h1 {
 font-size: em(36px);
}

Saída css:

body {
 font-size: 1.125em;
}

h1 {
 font-size: 2.25em;
}

Estruturas de repetição:

As estruturas de repetição permitem que você repita blocos de código várias vezes, o que é especialmente útil ao lidar com propriedades CSS que seguem um padrão ou para criar regras para várias instâncias de um mesmo elemento. Em sass é possível usar @for, @each e @while. 

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
 .icon-#{$size} {
   font-size: $size;
   height: $size;
   width: $size;
 }
}

$i: 1;

@while $i < 6 {
 .element-#{$i} {
   width: 20px * $i;
 }
 $i: $i + 1;
}

@for $i from 1 through 5 {
 .element-#{$i} {
   width: 20px * $i;
 }
}

Estruturas condicionais:

As estruturas condicionais são utilizadas para aplicar regras de estilo com base em condições específicas. Isso proporciona maior flexibilidade na geração de estilos dinâmicos e na adaptação a diferentes contextos. As principais estruturas condicionais em Sass são @if, @else if e @else.

.grade {
 @if $score > 90 {
   content: "A";
 } @else if $score > 80 {
   content: "B";
 } @else if $score > 70 {
   content: "C";
 } @else {
   content: "D";
 }
}

Conclusão

Embora as desvantagens do pouco uso dos recursos dos pré-processadores CSS sejam reais, é crucial considerar que a decisão de adotar ou não esses recursos depende do contexto do projeto. Em alguns casos, a simplicidade do CSS puro pode ser mais adequada, especialmente para projetos menores ou menos complexos. No entanto, é essencial que os desenvolvedores estejam cientes das capacidades dos pré-processadores e avaliem sua relevância em cada situação. A chave está em encontrar o equilíbrio certo entre simplicidade e funcionalidade, adaptando as práticas de desenvolvimento às necessidades específicas de cada projeto.

#htt
Até a próxima!!!