Mediaqueries (Sass)

EDgrid incluye mixins para crear mediaqueries fácilmente:

1. from($bp)
   Para tamaños mayores al breakpoint (parámetro)
2. to($bp)
   Para tamaños menores al breakpoint (parámetro)
3. fromTo($from,$to)
   Para tamaños comprendidos entre los dos parámetros.

Los tres mixins reciben como parámetros breakpoints válidos que pueden ser del core de ed-grid s,m,lg,xl o números especificados en px, em o rem.

Ejemplos:

// Ejemplo mixin from()
.from {
  color: red;
  
  @include from(m) {
    color: blue;
  }

  @include from(700px) {
    color: red
  }
}

// Ejemplo mixin to()
.to {
  display: flex;
  
  @include to(l) {
    display: block
  }
}

// Ejemplo mixin from-to()
.from-to {
  display: block;
  
  @include from-to(m,800px) {
    display: none
  }
  
}

Compila a:

// From
.from{
  color:red;
}

@media screen and (min-width:40em){
  .from{
    color:blue;
  }
}

@media screen and (min-width:700px){
  .from{
    color:red;
  }
}

// To
.to {
  display:flex;
}

@media screen and (max-width:64em){
  .to {
    display:block;
  }
}

// From to
.from-to {
  display:block;
}

@media screen and (min-width:40em) and (max-width:800px){
  .from-to {
    display:none;
  }
}

Control de errores

Si los parámetros pasados a estos mixins no son válidos EDgrid lanzará un mensaje en terminal indicando el error.