Hola me gustaria saber si se puede insertar un media query dentro de un mixin de sass? Afectaria en algo el código del css? o Genereraria un error?
Gracias
Editado
El uso de content blocks tal y como menciona @blonfu puede llegar a ser muy útil, con la etiqueta @content
podrás extender las capacidades de tu mixin.
En la documentación de sass podrás ver un excelente ejemplo que utiliza el content para aumentar la flexibilidad de tu mixin, para complementar el ejemplo que te ofrezco podemos añadir al mixin boxBlue
la etiqueta content para utilizar un media query general que permita realizar operaciones extra.
.box {
width: 300px;
height: 300px;
background: red;
margin: 30px;
}
@mixin boxBlue($mediaQuerySize) {
@media (max-width: #{$mediaQuerySize}) {
.box {
background: blue;
@content;
}
}
}
@include boxBlue(300px) {
border: 3px solid black;
}
Lo cual produce lo siguiente
.box {
width: 300px;
height: 300px;
background: red;
margin: 30px;
}
@media (max-width: 300px) {
.box {
background: blue;
border: 3px solid black;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="test.css">
<title>Stackoverflow</title>
</head>
<body>
<div class="box"></div>
</body>
</html>