Theming com Sass: um tutorial SCSS
Publicados: 2022-03-11O desenvolvimento de folhas de estilo com Sass, mesmo ao usar seus recursos mais básicos, como propriedades ou variáveis de aninhamento, economiza tempo valioso e facilita a vida dos desenvolvedores front-end. Não é surpreendente que os pré-processadores CSS tenham sido amplamente adotados como a maneira de fato de criar estilos para sites e aplicativos; simplesmente não podemos mais viver sem eles.
Quando se trata de temas ; ou seja, alterando a aparência do seu site enquanto mantém seu layout, os recursos do Sass - como mixins ou funções - podem parecer como pegar um avião em vez de caminhar! Neste tutorial do SCSS, vamos criar um tema mínimo e usar o SCSS para dar à nossa programação CSS alguns superpoderes.
Uma abordagem básica de mixin
Digamos que temos o seguinte layout:
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> Fomos solicitados a criar vários temas para ele. O tema tem que mudar as cores de todos os containers (incluindo o container principal) e do botão, e o tema será determinado por uma classe no corpo, ou pode ser um container “externo” também:
<body class="theme-1">Vamos construir um mixin chamado “themable” que conterá nosso esquema de cores como parâmetros.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }Em seguida, use-o para gerar nossos temas:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); Neste ponto, já economizamos muito tempo, mas existem alguns problemas com essa abordagem:
Os temas normalmente têm muitas propriedades diferentes além das cores. Por exemplo, se quiséssemos modificar o tema Bootstrap, escrever um mixin seguindo a “receita” anterior seria difícil de manter e o código difícil de ler. Além disso, não estamos realmente seguindo as práticas recomendadas do Sass – por exemplo, inserir códigos de cores hexadecimais diretamente no mixin.
Projete um esquema de estilos com mapas Sass
Com a ajuda de mapas, que são principalmente como matrizes indexadas de chave, podemos construir um conjunto de estilos mais semântico e significativo para nosso tema, que será mais fácil de manter e entender por nossos colegas desenvolvedores. Poderíamos usar listas também, mas, pessoalmente, acho os mapas mais adequados para esse fim. As listas não têm chaves, enquanto as chaves são autoexplicáveis.
O mapa para nossa nova abordagem será um mapa aninhado :
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); Se quisermos acessar cada seção do nosso esquema theme-1 e seus sub-mapas, usamos a diretiva @each para percorrer cada um deles:
@each $section, $map in $theme-1 $section retornará a chave da seção atual e $map retornará o mapa aninhado que corresponde a essa chave.
Então, podemos acessar as propriedades de cada mapa, digamos a propriedade background (bg), usando a função map-get :
map-get($map, bg)Finalmente, combinando nosso novo mixin, baseado em nossa estrutura de mapas, podemos criar quantos temas quisermos:
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … Observe que também estamos usando a diretiva @if para diferenciar propriedades de seções que não são botões.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }Dessa forma, podemos adicionar propriedades diferentes para algumas seções para criar propriedades específicas ou até mesmo regras, ou podemos distinguir uma chave com um único valor de outra com um mapa aninhado.
Nosso tema também pode consistir em muitos mapas usados por vários mixins, aplicados em diferentes partes de nossa folha de estilo. Tudo depende da complexidade do nosso layout básico e, claro, da nossa abordagem pessoal.
Otimização adicional
O Sass oferece funções internas úteis para nos poupar ainda mais trabalho; por exemplo, o hsl funciona como lighten ou darken para calcular, por exemplo, a cor de um botão ao passar o mouse sobre ele.
Podemos modificar o código do botão para clarear seu plano de fundo ao passar o mouse, independentemente da cor de plano de fundo original. Dessa forma, não precisamos adicionar outra cor para este estado.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }Além disso, com o uso de módulos Sass, nosso código pode ser ainda mais legível e escalável; cada mapa de tema pode estar contido em um módulo e então importado para nossa folha de estilo principal.
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …Isso exigiria que os módulos fossem colocados no projeto como:
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
Se você estiver interessado em aprender mais sobre como usar Sass para DRY seu CSS, o colega Toptaler Justin Brazeau e entusiasta de Sass discute exatamente isso em seu brilhante artigo Sass Mixins: Keep Your Stylesheets DRY .