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
01 02 03 04 05 06 07 08 09 10 11 12 13 | @mixin small-btn-mixin() { padding: 5px; &:hover { background-color: white; color:black; }}@media (max-width: 768px) { button { @include small-btn-mixin(); }} |
