1

Tengo una duda sobre el funcionamiento de la directiva @content en Sass, no me queda claro cómo funciona o cuándo usarla.

Con @content se puede llamar a un mixin y añadirle estilos adicionales... pero realmente se puede obtener el mismo resultado sin @content. Entonces, ¿para qué usarlo? (aunque seguro dependerá del ejemplo, porque no tendría sentido añadir una directiva "que no sirve").

Por ejemplo:

@mixin colores-alarma() {
  color: #660000;
  background-color: #ffdddd;
  border: 2px solid #660000;
  @content;
}

.mensaje-alarma {
  @include colores-alarma() {
    font-size: 1.2em;
  }
}

Es equivalente a:

@mixin colores-alarma() {
  color: #660000;
  background-color: #ffdddd;
  border: 2px solid #660000;
}

.mensaje-alarma {
  @include colores-alarma();
  font-size: 1.2em;
}

O al menos, las dos generan lo mismo:

.mensaje-alarma {
  color: #660000;
  background-color: #ffdddd;
  border: 2px solid #660000;
  font-size: 1.2em;
}

Y mi pregunta, ¿en qué casos es útil usar la directiva @content?

1
  • El use case más común es cuando el mixin genera reglas y dentro de estas se incluye el @content. Te dejo este enlace con varios ejemplos.
    – Marcos
    Commented el 16 may. 2017 a las 20:14

1 respuesta 1

3

El @content lo he usad en mixin con un enfoque similar al que propones:

Para trabajar mediaqueries donde desee como este ejemplo:

@mixin desde($size){
    @if map-has-key($breakpoints,$size){
        // Si el parámetro es el nombre de un tamaño, se extrae desde el map
        @media screen and (min-width: map-get($breakpoints,$size)){
            @content;
        }
    } @else {
        // Si el parámetro no existe en el map, se toma su valor para construir la media query
         @media screen and (min-width: $size){
            @content;
        }
    }
}

esto lo he usado así:

.elementoCss{
  width: 100%;
  @include desde(768px){
      width: 70%;
      background-color: tomato;
  }
}

Otro ejemplo es:

$chainable_column : 'chainableEl';

@mixin elActive {
    .#{$chainable_column}.s--active & {
        @content;
    }
}
.#{$chainable_column} {
    &__inner{
         @include elActive {
              transition: transformY(50%);
         }
    }
}

Obviamente, como lo dices, su uso puede no ser importante en algunos casos. pero no es que sea inservible la directiva, depende del enfoque.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.