SCSS – Extender clases dentro de media queries

Para extender una clase dentro de una media query, el problema con el que nos encontramos es:

.small-btn {
  padding: 5px;
  &:hover {
    background-color: white;
    color:black;
  }
}

@media (max-width: 768px) {
  button {
    @extend .small-btn;
  }
}

Arroja el error

Error: You may not @extend an outer selector from within @media.
       You may only @extend selectors within the same directive.
       From "@extend .small-btn" on line 7 of src/scss/main.scss

Solución:

La respuesta es un  @mixin. Con un @mixin podemos importar todas las las reglas que queramos facilmente. Lo que podríamos hacer es poner el código de la clase que queremos extender, dentro de un @mixin. Entonces, tanto la clase como la sección dentro del mediaquery usarán el @mixin

@mixin small-btn-mixin() {
  padding: 5px;
  &:hover { 
    background-color: white;
    color:black;
  }
}

.small-btn {
  @include small-btn-mixin();
}

@media (max-width: 768px) {
  button {
    @include small-btn-mixin();
  }
}

La limitación es que hay que indicar explícitamente las clases que van a ir tanto dentro del media query como fuera de ella

En definitiva…

En vez de extender @extend, coloca el código que quieras reproducir dentro de un @mixin

 @mixin small-btn-mixin() {
   padding: 5px;
   &:hover {
     background-color: white;
     color:black;
   }
 }

 @media (max-width: 768px) {
   button {
     @include small-btn-mixin();
   }
 }


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *