0

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

1 respuesta 1

3

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>

2
  • 2
    Pues es bastante util para definir breakpoints sobre todo usando content blocks
    – user7176
    Commented el 2 oct. 2019 a las 6:56
  • Muchas Gracias por tu ayuda
    – Diego Diaz
    Commented el 3 oct. 2019 a las 17:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.