desenvolvimento de Stylesheet com SAS, mesmo quando usa suas características mais básicas, como propriedades de nidificação ou variáveis, economiza tempo valioso e torna a vida mais fácil para os desenvolvedores front-end. Não é surpreendente que os pré-processadores CSS tenham sido amplamente adotados como a forma de criar estilos para websites e aplicações; simplesmente não podemos viver mais sem eles.,
Quando se trata de temas; isto é, mudar a aparência e a sensação do seu site, mantendo o seu layout, as características de Sass—como mixins ou funções—pode sentir como tomar um avião em vez de andar! Neste tutorial SCSS, vamos criar um tema mínimo e usar SCSS para dar à nossa programação CSS alguns super poderes.
Básico Mixin Abordagem
suponhamos que temos o seguinte esquema:
Temos sido convidados a criar vários temas para ele., O tema tem para mudar de cores para todos os recipientes (incluindo o recipiente principal) e o botão, e o tema será determinado por uma classe em que o corpo, ou pode ser um “exterior” recipiente bem:
<body class="theme-1">Vamos construir um mixin chamado “tematizáveis”, que conterá o nosso esquema de cores como parâmetros.,
em Seguida, usá-lo para gerar os nossos temas:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49);@include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);neste ponto, nós já salvou um monte de tempo, mas existem alguns problemas com esta abordagem:
Temas, normalmente, têm lotes de diferentes propriedades ao lado de 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 melhores práticas da Sass—por exemplo, inserindo códigos de cor hex diretamente na mixin.,
Design de um Esquema de Estilos com Sass Mapas
Com a ajuda de mapas, que são, principalmente, como chave de arrays indexados, podemos construir uma vida mais semântico e significativo conjunto de estilos para o nosso tema, que será mais fácil de manter e entender por nosso colega desenvolvedores. Nós poderíamos usar listas também, mas, pessoalmente, eu acho mapas mais adequados para este propósito. As listas não têm teclas enquanto as teclas são auto-explicáveis.,
O mapa para a nossa nova abordagem vai ser aninhada mapa:
Se a gente queria para o acesso de cada seção do nosso esquema de theme-1 e seus sub-mapas, usamos o @each diretiva de loop através de cada um deles:
@each $section, $map in $theme-1$section irá devolver a chave da seção atual e $map vai voltar a aninhadas mapa que corresponde à tecla.,
em Seguida, podemos acessar as propriedades de cada mapa, vamos dizer que o plano de fundo (bg) de propriedade, utilizando o map-get função:
map-get($map, bg)Finalmente, combinando o nosso novo mixin, com base em nossa estrutura de um mapa, podemos criar quantos temas como a gente gosta:
Note que nós também estamos usando o @if directiva 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); }Desta forma, podemos adicionar propriedades diferentes para algumas seções para criar propriedades específicas, ou mesmo as regras, ou podemos distinguir entre uma chave com um único valor a partir de outro com um aninhados mapa.
O nosso tema também pode consistir em muitos mapas usados por várias mixinas, aplicados em diferentes partes da nossa folha de estilo. Tudo depende da complexidade do nosso layout base e, claro, da nossa abordagem pessoal.,
Otimização
Sass oferece útil funções internas para salvar-nos ainda mais o trabalho; por exemplo, o hsl funções como o lighten ou darken para calcular, por exemplo, a cor de um botão quando o mouse sobre ela.
Podemos modificar o código do botão para clarear o seu fundo ao pairar, independentemente da cor de fundo original. Desta forma, não temos que 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%); }}também, com o uso de módulos Sas, o nosso código pode ser ainda mais legível e escalável; cada mapa temático pode ser contido num módulo e, em seguida, importado para a 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 para ser colocado no projeto como:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Se você estiver interessado em aprender mais sobre o uso de Sass para SECAR o seu CSS, companheiros Toptaler Justin Brazeau e Sass entusiasta discute apenas esta em seu brilhante artigo Sass Mixins: Mantenha as Folhas de estilo SECO.