Stylus 媒体(@media)

• 

  定义和使用

  @media 工作原理和在常规 CSS 中一样，但是，要使用 Stylus 的块状符号。

  @media print
    #header
    #footer
      display none
  

  生成为：

  @media print {
    #header,
    #footer {
      display: none;
    }
  }
  

• 

  媒体查询

  媒体查询也可以嵌套，并且将被扩展以包装使用它们的上下文。 例如：

  .widget
    padding 10px
  
    @media screen and (min-width: 600px)
      padding 20px
  

  生成为：

  .widget {
    padding: 10px;
  }
  
  @media screen and (min-width: 600px) {
    .widget {
      padding: 20px;
    }
  }
  

  您可以将 @medias 嵌套在一起，然后将它们组合成一个：

  @media (max-width: 500px)
    .foo
      color: #000
  
    @media (min-width: 100px), (min-height: 200px)
      .foo
        color: #100
  

  生成为：

  @media (max-width: 500px) {
    .foo {
      color: #000;
    }
  }
  @media (max-width: 500px) and (min-width: 100px), (max-width: 500px) and (min-height: 200px) {
    .foo {
      color: #100;
    }
  }
  

• 

  插值和变量

  您可以在媒体查询中同时使用插值和变量，因此可以执行以下操作：

  foo = 'width'
    bar = 30em
    @media (max-{foo}: bar)
      body
        color #fff
  

  生成为：

  @media (max-width: 30em) {
    body {
      color: #fff;
    }
  }
  

  在MQ内部也可以使用表达式：

  .foo
    for i in 1..4
      @media (min-width: 2**(i+7)px)
        width: 100px*i
  

  生成为：

  @media (max-width: 30em) {
    body {
      color: #fff;
    }
  }
  @media (min-width: 256px) {
    .foo {
      width: 100px;
    }
  }
  @media (min-width: 512px) {
    .foo {
      width: 200px;
    }
  }
  @media (min-width: 1024px) {
    .foo {
      width: 300px;
    }
  }
  @media (min-width: 2048px) {
    .foo {
      width: 400px;
    }
  }