# 16 dicas de Sass para facilitar sua vida (parte 1) > Descubra 8 dicas avançadas de Sass que você provavelmente não conhecia: prefixos, mixins, funções e técnicas que vão mudar seu CSS. Aprenda! URL: https://dpw.dev/css/sass-dicas-parte-1/ Publicado em: 2017-09-25 Categoria: css Tags: sass Autor: Tárcio Zemel O nome deste artigo também poderia ter sido "16 coisas muito legais que você pode fazer com Sass que você provavelmente não sabia e que vão mudar para sempre sua maneira de escrever folhas de estilo", mas como ficaria um pouco longo demais, escolhemos deixar esse mesmo. Fato é que as **16 dicas de Sass** apresentadas aqui realmente são muito interessantes, algumas delas realmente podendo alterar completamente a maneira como você escreve suas folhas de estilo com esse incrível pré-processador CSS. > Artigo baseado em [Advanced SCSS](https://gist.github.com/jareware/4738651). ## 1\. Prefixando a referência ao ascendente Essa é a maneira como geralmente se usa a [referência ao elemento ascendente](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Referencing_Parent_Selectors_____parent-selector), com o caractere `&`: ```scss a { &:hover { color: red; } } ``` ``` /* CSS compilado */ a:hover { color: red; } ``` Mas o `&` também pode ser usado com um prefixo, dessa maneira: ```scss p { body.no-touch & { display: none; } } ``` ```typescript /* CSS compilado */ body.no-touch p { display: none; } ``` Isso pode ser muito útil quando se tem um aninhamento profundo regras e é preciso efetuar uma alteração no estilo de um elemento com base em uma correspondência de seqüência muito mais próxima da raiz do DOM. Assim, não é preciso sair do aninhamento apenas para, seguindo o exemplo, poder alterar o estilo de `

` baseado em uma classe no ``. ## 2\. Expansão de variáveis em seletores Variáveis podem ser expandidas em seletores usando [interpolação em Sass](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Interpolation_____) da seguinte forma: ```scss $alertClass: "error"; p.message-#{$alertClass} { color: red; } ``` ```typescript /* CSS compilado */ p.message-error { color: red; } ``` E também é possível usar a interpolação em qualquer outro lugar, como media queries e até comentários: ```scss $breakpoint: 768px; @media (max-width: #{$breakpoint}) ``` ```scss /* CSS compilado */ @media (max-width: 768px) ``` ## 3\. Variáveis default Se um módulo SCSS pode ser configurado usando globais (que tende a ser o modo SCSS de se trabalhar), então é possível declará-los com um [valor padrão](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Variable_Defaults___default): ```scss // _my-module.scss $message-color: blue !default; p.message { color: $message-color; } ``` ```typescript /* CSS compilado */ p.message { color: blue; } ``` Então é possível, opcionalmente, sobrescrever o(s) padrão(ões) antes de sua inclusão: ```scss $message-color: black; @import 'my-module'; ``` ```typescript /* CSS compilado */ p.message { color: black; } ``` Ou seja, uma atribuição com um `!default` só terá efeito se essa variável não tiver um valor definido antes (em contraste com a atribuição padrão, que sempre substituirá um possível valor anterior). É assim que diversos frameworks e bibliotecas que usam Sass são configurados. Se você já teve a curiosidade de olhar o código de um [Foundation](https://foundation.zurb.com/sites.html) ou de um [Compass](http://compass-style.org), já deve ter encontrado muito disso por lá. ## 4\. Diretivas de controle Sass oferece suporte para [diretivas de controle](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives) de fluxo padrão em linguagens de programação, como `if`: ```scss $debug: false; article { color: black; @if ($debug) { border: 1px dotted red; } } ``` ```scss /* CSS compilado */ article { color: black; } ``` Há também `@for`, `@each` e `@while`, que são bons para serem usados em uma infinidade de casos que, de outra forma, precisariam de muita repetição para escrever os códigos. Por exemplo: ```scss @each $name in 'save' 'cancel' 'help' { .icon-#{$name} { background-image: url('/images/#{$name}.png'); } } ``` ```scss /* CSS compilado */ .icon-save { background-image: url("/images/save.webp"); } .icon-cancel { background-image: url("/images/cancel.webp"); } .icon-help { background-image: url("/images/help.webp"); } ``` ## 5\. O tipo de data "list" Como foi visto no exemplo anterior, `@each` pode iterar sobre uma lista. Listas são, de fato, uma parte fundamental da linguagem Sass. Uma demonstração rápida da utilidade do tipo `list` pode ser a configuração de algum estilo gerado: ```scss $buttonConfig: 'save' 50px, 'cancel' 50px, 'help' 100px; @each $tuple in $buttonConfig { .button-#{nth($tuple, 1)} { width: nth($tuple, 2); } } ``` ```scss /* CSS compilado */ .button-save { width: 50px; } .button-cancel { width: 50px; } .button-help { width: 100px; } ``` Isso demonstra 2 features do tipo de dados `list`: nomeadamente a [função de acesso a listas](http://sass-lang.com/documentation/Sass/Script/Functions.html#nth-instance_method) `nth()` e, mais interessante, a notação de aninhamento de listas. Para efeitos de comperação, a notação JavaScript para o exemplo acima seria equivalente a: ```javascript var buttonConfig = [[ 'save', 50 ], [ 'cancel', 50 ], [ 'help', 100 ]]; ``` ## 6\. Funções customizadas [Mixins](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins) são uma parte bem conhecida de Sass, mas a linguagem também permite definir funções personalizadas. Ao contrário do que a maioria imagina, isso pode ser feito em Sass puro, sem precisar de nenhum tipo de extensão em Ruby: ```scss @function make-greener($value) { @return $value + rgb(0,50,0); // aritmética com cores é totalmente suportada } p { background: make-greener(gray); } ``` ```scss /* CSS compilado */ p { background: #80b280; // cinza esverdeado } ``` A diferença principal entre mixins e funções é bastante clara: mixins são usados para "includes" (principalmente evitar repetições de código) e funções para retornar valores depois de algum processamento. [Sass já possui diversas funções embutidas](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html) ([e Compass também](http://compass-style.org/reference/compass/helpers/)), então certifique-se de conhecê-las antes de tentar escrever suas próprias. ## 7\. Valores padrão de argumentos Mixins e funções suportam valores padrão para argumentos; os últimos argumentoss zero-para-N podem ser opcionais, fornecendo-lhes um valor padrão: ```scss @mixin foobar($a, $b, $padding: 20px) { padding: $padding; // ... algum código que use $a e $b } p { @include foobar(123, "abc"); // será usado o padding default } p.important { @include foobar(123, "abc", 50px); // sobrescrevendo o default } ``` ## 8\. Argumentos com palavras-chave (keywords) Se um mixin (ou função) requer muitos argumentos, há uma sintaxe em tempo de chamada similar para selecionar argumentos específicos para substituir: ```scss @mixin foobar($topPadding: 10px, $rightPadding: 20px, $bottomPadding: 10px, $leftPadding: 20px, $evenMorePadding: 10px) { // ... algum código que use todos esses argumentos } p { @include foobar($bottomPadding: 50px); } ``` Sem ser capaz de nomear argumentos em tempo de chamada, seria preciso especificar `$topPadding` e `$rightPadding` primeiro, mas, com este recurso, é possível substituir apenas o argumento desejado, deixando os demais com seus seus valores padrão. ## Fim da primeira parte das 16 dicas de Sass Estas foram as primeiras **dicas de Sass** abordadas: 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) Na verdade, não são dicas muito avançadas; constituem, inclusive, o que poderia ser chamar de conhecimento básico-intermediário da linguagem. Entretanto, muitos que começam a usar Sass e se maravilham com seus recursos podem acabar negligenciando estas dicas que, certamente, são grande parte do poder que a linguagem oferece. [Na parte 2 (e final) do artigo, confira o restante das dicas de Sass](/css/sass-dicas-parte-2/) que, certamente, vão ajudar bastante quando você for escrever seus estilos. --- 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