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;
      }
    }