stylus前処理入門(3)--補間

1724 ワード

作者:blue(別名一書and一世界)私のgithub**用途:*CSS前処理言語stylus初心者入門転送ドア:
  • stylus前処理入門(一)--セレクタ
  • stylus前処理入門(二)--変数
  • 補間(interporation)


    補間は、解析式または変数に相当し、補間の位置を値に置き換えます.注意:属性値の補間には使用できません(ただし、属性値は変数で置換できます).
  • cssプロパティ名で補間
  • を使用
    partOfProp = radius
    value = 10px
    div
        border-{partOfProp} value  /*              */
    

    変換:
    div {
      border-radius: 10px;
    }
    
  • セレクタで補間
  • を使用する.
    selector = div
    partOfProp = radius
    value = 10px
    {selector}
        border-{partOfProp} value 
    

    変換:
    div {
      border-radius: 10px;
    }
    
    selectors = '#foo,#bar,.baz'
    
    {selectors}
      background: #000
    

    変換:
    #foo,
    #bar,
    .baz {
      background: #000;
    }
    

    高度な使用:mixinsとの併用
      vendor(prop, args)
        -webkit-{prop} args
        -moz-{prop} args
        {prop} args
    
      border-radius()
        vendor('border-radius', arguments)
      
      box-shadow()
        vendor('box-shadow', arguments)
    
      button
        border-radius 1px 2px / 3px 4px
    

    へんかん
      button {
        -webkit-border-radius: 1px 2px / 3px 4px;
        -moz-border-radius: 1px 2px / 3px 4px;
        border-radius: 1px 2px / 3px 4px;
      }
    

    高度な使用:サイクル反復(iteration)と組み合わせて使用
    table
      for row in 1 2 3 4 5
        tr:nth-child({row})
          height: 10px * row
    

    変換:
    table tr:nth-child(1) {
      height: 10px;
    }
    table tr:nth-child(2) {
      height: 20px;
    }
    table tr:nth-child(3) {
      height: 30px;
    }
    table tr:nth-child(4) {
      height: 40px;
    }
    table tr:nth-child(5) {
      height: 50px;
    }
    

    QUOTE: If you are not moving ahead , you are falling behind.