# 16 dicas de Sass para facilitar sua vida (parte 2)

> Domine Sass com 8 dicas avançadas: argumentos variáveis, mixins inteligentes, operações e arquitetura de estilos. Facilite sua vida no front-end!

URL: https://dpw.dev/css/sass-dicas-parte-2/  
Publicado em: 2020-09-03  
Categoria: css  
Tags: sass  
Autor: Tárcio Zemel

Na [primeira parte parte da minissérie com dicas de Sass](/css/sass-dicas-parte-1/), mostramos as 8 primeiras dicas que talvez você não conhecia para levar seu código Sass ao próximo nível.

Agora, na segunda e última parte, aprenda mais 8 dicas de Sass que, com certeza, vão ajudar bastante e facilitar sua vida no front end.

## 9\. Argumentos variáveis para funções/mixins

[Argumentos variáveis](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments) funcionam da mesma maneira que em outras linguagens que suportam o recurso: quaisquer argumentos extras para uma chamada de função/mixin são agrupados em uma lista e atribuídos ao argumento com um sufixo `...`.

Sass

```scss
@mixin config-icon-colors($prefix, $colors...) {
  @each $i in $colors {
    .#{$prefix}#{nth($i, 1)} {
      color: nth($i, 2);
    }
  }
}

@include config-icon-colors('icon-',
  'save'   green,
  'cancel' gray,
  'delete' red
);
```

CSS compilado

```scss
.icon-save {
  color: green;
}

.icon-cancel {
  color: gray;
}

.icon-delete {
  color: red;
}
```

O helper acima pode ser usado para configurar cores para ícones, por exemplo, sem ter que se repetir.

Ele funciona passando um número variável de argumentos (após o primeiro, required); espera-se que cada um desses argumentos seja um array de dois itens (na notação JavaScript, por exemplo, seria `['save', 'green']`).

Na verdade, a sintaxe `...` também funciona durante o tempo de chamada (_call-time_), em que expande uma lista em argumentos separados a serem usados no mixin de destino:

```scss
@mixin foobar($a, $b, $c) {
  // Recebe args $a = 5px, $b = red, e assim por diante.
}

$myArgs: 5px red "bla bla";
// Nesse ponto, é possível adicionar/remover argumentos programaticamente

@include foobar($myArgs...);
```

Talvez não haja tantos casos de uso para isso, mas [a documentação tem um bom caso de uso](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments) para passar os argumentos atuais para outro mixin.

## 10\. Argumentos de bloco de conteúdo para mixins

Desde a versão 3.2.0, o SCSS tem um argumento implícito de mixin acessível por meio da diretiva `@content`.

Ele permite passar um bloco de conteúdo SCSS inteiro como um argumento para o mixin:

Sass

```scss
@mixin only-for-mobile {
  @media (max-width: 768px) {
    @content;
  }
}

@include only-for-mobile() 

.cat {
  color: white;
}

.dog {
  color: black;
}
```

Como `%animal` é um placeholder selector, ele não aparece na saída da compilação.

## 16\. Herança múltipla

Um seletor pode herdar de vários outros seletores -- ou seja, o SCSS oferece suporte a herança múltipla. Para cada `@extend`, o seletor atual é anexado ao seletor que está sendo estendido.

Quando combinado com placeholder selectors, isso permite abstrações poderosas. Isso talvez seja mais bem entendido por meio de um exemplo:

Framework (fictício)

```scss
%mfw-standing-out {
  font-size: 150%;
  font-style: italic;
  padding: 25px;
}

%mfw-slightly-shadowed {
  @include box-shadow(black 2px 2px 10px);
}

%mfw-rounded {
  @include border-radius(25px);
}
```

Projeto usando o framework

```scss
#join-button {
  @extend %mfw-standing-out;
  @extend %mfw-slightly-shadowed;
  @extend %mfw-rounded;
  background: green;
  color: white;
}
```

Esta abordagem de se trabalhar com estilos traz alguns benefícios notáveis -- autodocumentação; isolamento de nomenclatura; redução de repetição --, mas, claro, também com seu lado negativo -- depurabilidade diminuída; falta de parâmetros.

## Conclusão

Nesta minissérie com **dicas de Sass para facilitar sua vida**, mostramos recursos que estão presentes já há tempos no pré-processador queridinho dos devs front end, mas que, não necessariamente, são conhecidas e/ou consideradas pela maioria.

Contando com a primeira parte, essas foram as 16 dicas de Sass:

1. Prefixando a referência ao ascendente
2. Expansão de variáveis em seletores
3. Variáveis default
4. Diretivas de controle
5. O tipo de data "list"
6. Funções customizadas
7. Valores padrão de argumentos
8. Argumentos com palavras-chave (keywords)
9. Argumentos variáveis para funções/mixins
10. Argumentos de bloco de conteúdo para mixins
11. Padrão de bloqueio de substituição de conteúdo
12. Media query bubbling
13. Aninhamento de media query
14. Estendendo seletores
15. Placeholder selectors
16. Herança múltipla

Como em todas as listas com dicas, conheça cada uma delas e pondere sobre quais usar e quais não usar em cada projeto concreto que apareça -- algumas, claro, podem ser usadas (de repente, com adaptações) para compor frameworks ou bibliotecas.

E você, conhece mais alguma **dica de Sass** e quer contar pra gente? Coloca nos comentários!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml