Sass pode de alguma forma ser um pouco uma caixa preta, especialmente para jovens desenvolvedores: você coloca algumas coisas dentro, você tira algumas coisas. Pegue o seletor reference ( &) por exemplo, é um pouco assustador.
Dito isso, não precisa ser assim. Podemos tornar sua sintaxe mais amigável com nada mais do que dois mixins muito simples.
Eventos
Ao escrever Sass, muitas vezes você se pega escrevendo coisas como:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Bastante tedioso e não necessariamente fácil de ler. Poderíamos criar um pequeno mixin para torná-lo mais simples.
/// Event wrapper /// @author Harry Roberts /// @param (Bool) $self (false) - Whether or not to include current selector /// @see https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts @mixin on-event($self: false) ( @if $self ( &, &:hover, &:active, &:focus ( @content; ) ) @else ( &:hover, &:active, &:focus ( @content; ) ) )Reescrevendo nosso exemplo anterior:
.my-element ( color: red; @include on-event ( color: blue; ) )Muito melhor, não é?
Agora, se quisermos incluir o próprio seletor, podemos definir o $selfparâmetro como true. Por exemplo:
.my-element ( @include on-event($self: true) ( color: blue; ) )Este snippet SCSS produzirá:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Contextos
Na mesma linha, não é incomum estilizar um elemento dependendo do pai que ele tem. Por exemplo, algo assim:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Vamos tornar a sintaxe um pouco mais amigável novamente com um mixin simples:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Reescrevendo nosso exemplo anterior:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )