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();
}
}
