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.
1. Prefixando a referência ao ascendente
Essa é a maneira como geralmente se usa a referência ao elemento ascendente, com o caractere &:
|
1 2 3 4 5 |
a { &:hover { color: red; } } |
|
1 2 3 4 |
/* CSS compilado */ a:hover { color: red; } |
Mas o & também pode ser usado com um prefixo, dessa maneira:
|
1 2 3 4 5 |
p { body.no-touch & { display: none; } } |
|
1 2 3 4 |
/* 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 <p> baseado em uma classe no <body>.
2. Expansão de variáveis em seletores
Variáveis podem ser expandidas em seletores usando interpolação em Sass da seguinte forma:
|
1 2 3 4 5 |
$alertClass: "error"; p.message-#{$alertClass} { color: red; } |
|
1 2 3 4 |
/* 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:
|
1 2 3 4 5 |
$breakpoint: 768px; @media (max-width: #{$breakpoint}) { /* Esse bloco se aplica a viewports <= #{$breakpoint} */ } |
|
1 2 3 4 |
/* CSS compilado */ @media (max-width: 768px) { /* Esse bloco se aplica a viewports <= 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:
|
1 2 3 4 5 6 |
// _my-module.scss $message-color: blue !default; p.message { color: $message-color; } |
|
1 2 3 4 |
/* CSS compilado */ p.message { color: blue; } |
Então é possível, opcionalmente, sobrescrever o(s) padrão(ões) antes de sua inclusão:
|
1 2 |
$message-color: black; @import 'my-module'; |
|
1 2 3 4 |
/* 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 ou de um Compass, já deve ter encontrado muito disso por lá.
4. Diretivas de controle
Sass oferece suporte para diretivas de controle de fluxo padrão em linguagens de programação, como if:
|
1 2 3 4 5 6 7 8 9 |
$debug: false; article { color: black; @if ($debug) { border: 1px dotted red; } } |
|
1 2 3 4 |
/* 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:
|
1 2 3 4 5 |
@each $name in 'save' 'cancel' 'help' { .icon-#{$name} { background-image: url('/images/#{$name}.png'); } } |
|
1 2 3 4 5 6 7 8 9 10 |
/* CSS compilado */ .icon-save { background-image: url("/images/save.png"); } .icon-cancel { background-image: url("/images/cancel.png"); } .icon-help { background-image: url("/images/help.png"); } |
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:
|
1 2 3 4 5 6 7 |
$buttonConfig: 'save' 50px, 'cancel' 50px, 'help' 100px; @each $tuple in $buttonConfig { .button-#{nth($tuple, 1)} { width: nth($tuple, 2); } } |
|
1 2 3 4 5 6 7 8 9 10 |
/* 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 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:
|
1 |
var buttonConfig = [[ 'save', 50 ], [ 'cancel', 50 ], [ 'help', 100 ]]; |
6. Funções customizadas
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:
|
1 2 3 4 5 6 7 |
@function make-greener($value) { @return $value + rgb(0,50,0); // aritmética com cores é totalmente suportada } p { background: make-greener(gray); } |
|
1 2 3 4 |
/* 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 (e Compass também), 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@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:
|
1 2 3 4 5 6 7 |
@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:
- Prefixando a referência ao ascendente
- Expansão de variáveis em seletores
- Variáveis default
- Diretivas de controle
- O tipo de data “list”
- Funções customizadas
- Valores padrão de argumentos
- 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 que, certamente, vão ajudar bastante quando você for escrever seus estilos.