Para extender una clase dentro de una media query, el problema con el que nos encontramos es:
01
02
03
04
05
06
07
08
09
10
11
12
13
.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
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
@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
Considerar que manipular el rebote es cambiar sólo la forma de visualizar los datos de analytics. No cambiará los parámetros de posicionamiento, pero sí nos adaptará el análisis en base a nuestras preferencias sobre cómo queremos que actúen nuestros usuarios.
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Ver