Ao estender um seletor com a @extenddiretiva, o Sass não pega o conteúdo CSS do seletor estendido para colocá-lo no de extensão. Funciona ao contrário. Ele pega o seletor de extensão e o anexa ao estendido.
Por causa de como funciona, é impossível usá-lo em escopos diferentes. Por exemplo, você não pode estender um espaço reservado que foi declarado em um @mediabloco, nem pode estender um espaço reservado da raiz se estiver dentro de uma @mediadiretiva.
Certamente podemos encontrar uma maneira de usar @extendquando possível, mixando de outra forma. Na verdade, é factível, mas é um pouco complicado, chamo isso de hack mixtend. Você pode querer pensar duas vezes antes de implementar em todo o seu projeto. Talvez usar apenas mixins fosse mais fácil. Vou deixar você com o juiz disso.
Invólucro @extend
A ideia é bem simples de entender. Primeiro definimos o mixin. O único parâmetro é $extend, que define se o mixin deve ou não tentar estender ao invés de incluir. Obviamente, é um booleano (o padrão é true).
Se $extendfor true, estendemos um placeholder com o nome do mixin (infelizmente, isso não é calculado automaticamente). Se for false, descartamos o código CSS como um mixin normal faria.
Fora do mixin, definimos o espaço reservado acima mencionado. Para evitar a repetição do código CSS no espaço reservado, só precisamos incluir o mixin configurando $extendpara falseassim que despeja o código CSS no núcleo do espaço reservado.
/// *Mixtend* hack /// @author Hugo Giraudel @mixin mixtend-boilerplate($extend: true) ( @if $extend ( @extend %mixtend-boilerplate-placeholder; ) @else ( // Mixtend content ) ) %mixtend-boilerplate-placeholder ( @include mixtend-boilerplate($extend: false); )Exemplo
Como um exemplo simples, usaremos o micro-clearfix de Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Usá-lo é bastante simples:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )CSS de resultado:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Sublime Text Snippet
Se você deseja salvar o clichê para torná-lo altamente reutilizável, ficará satisfeito em saber que é muito fácil criar um trecho de Texto Sublime para isso. No Sublime, vá para Ferramentas> Novo snippet ... e cole o conteúdo abaixo.
Sinta-se à vontade para mudar a chave para colocar o que quer que flutue em seu barco; é a palavra a ser digitada antes de clicar tabpara expandir o snippet. Fui com mixtend.
mixtend source.scss