@extend Wrapper también conocido como Mixtend | Programar Plus

Al extender un selector con el @extend directiva, 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 utilizarlo desde diferentes ámbitos. Por ejemplo, no puede extender un marcador de posición que se haya declarado en un @media bloque, ni puede extender un marcador de posición desde la raíz si está dentro de un @media directiva.

Seguro que podemos encontrar una forma de utilizar @extend cuando sea posible, mezclar de otra manera. 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 (predeterminado para true).

Si $extend es true, ampliamos un marcador de posición con el nombre del mixin (desafortunadamente, esto no se calcula automáticamente). Si es 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 repetir el código CSS en el marcador de posición, solo tenemos que incluir el mixin configurando $extend a false por lo que descarga el código CSS en el núcleo del marcador de posición.

/// *Mixtend* hack
/// @author Kitty 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 el clave para poner lo que sea que flote tu barco; es la palabra a escribir antes de presionar tab para expandir el fragmento. Yo fui con mixtend.

<snippet>
    <content><![CDATA[
@mixin ${1:mixtend}($extend: true) {
  @if $extend {
    @extend %${1:mixtend};
  } @else {
    ${2}
  }
}

%${1:mixtend} {
  @include ${1:mixtend}($extend: false);
}
]]></content>
    <tabTrigger>mixtend</tabTrigger>
    <scope>source.scss</scope>
</snippet>