Al extender un selector con la @extenddirectiva, Sass no toma el contenido CSS del selector extendido para ponerlo en el extensor. Funciona al revés. Toma el selector de extensión y lo agrega al extendido.
Debido a cómo funciona, hace que sea imposible usarlo desde diferentes ámbitos. Por ejemplo, no puede extender un marcador de posición que ha sido declarado en un @mediabloque, ni puede extender un marcador de posición desde la raíz si está dentro de una @mediadirectiva.
Seguro que podemos encontrar la forma de utilizarlo @extendcuando sea posible, mezclando lo contrario. De hecho, es factible pero es un poco complicado, lo llamo el truco de mixtend. Es posible que desee pensarlo dos veces antes de implementar en todas partes de su proyecto. Quizás usar solo mixins sería más fácil. Te dejo el juez de eso.
Envase @extend
En realidad, la idea es bastante sencilla de comprender. Primero definimos el mixin. El único parámetro es $extend, que define si el mixin debe intentar extender en lugar de incluir. Obviamente, es un booleano (por defecto true).
Si $extendes así true, extendemos un marcador de posición con el nombre del mixin (desafortunadamente, esto no se calcula automáticamente). Si es así false, volcamos el código CSS como lo haría un mixin normal.
Fuera del mixin, definimos el marcador de posición mencionado anteriormente. Para evitar la repetición del código CSS en el marcador de posición, solo tenemos que incluir el mixin configurando $extendpara falseque descargue el código CSS en el núcleo del marcador de posición.
/// *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); )Ejemplo
Como ejemplo simple, usaremos el 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); )Usarlo es bastante sencillo:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Resultado CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Fragmento de texto sublime
Si desea guardar el texto estándar para que sea altamente reutilizable, le complacerá saber que es muy fácil crear un fragmento de texto sublime para esto. En Sublime, dirígete a Herramientas> Nuevo fragmento ... y pega el contenido a continuación.
Siéntete libre de cambiar la llave para poner lo que flote tu barco; es la palabra que debe escribir antes de presionar tabpara expandir el fragmento. Fui con mixtend.
mixtend source.scss