CSS Stylus(一)

2461 ワード

CMDコマンドstylus-w hello.styl -o hello.css


構文

  • セレクタ
  • //   
    .hello
        width 100px
        height 100px
        background yellow
    
    //   
    textarea, input
        background #eeeeee
    
    //    
    .user
        background lightgreen
        &:hover
            background limegreen
    
    
    box-shadow()
    -webkit-box-shadow arguments
    -moz-box-shadow arguments
    box-shadow arguments
    html.ie8 &,
    html.ie7 &,
    html.ie6 &,
      border 2px solid arguments[length(arguments) - 1]
    
    body
        #login
            box-shadow 1px 1px 3px #eee
    
    //    
    pad(n)
        padding (- n)
    
    body
        pad(5px)
  • 変数
  • //  
    $font-size = 16px
    $font = $font-size Arial, sans-serif
    body
        font $font
    
    //    (       )
    #logo
        position absolute
        top 50%
        left 50%
        width 150px
        height 150px
        margin-left -(@width/2)
        margin-top -(@height/2)
    
    //    (    )
    position()
        position arguments
        z-index 1 unless @z-index
    
    #logo
        position absolute
  • 補間
  • prefix(name, args)
        -webkit-{name} args
        -moz-{name} args
        {name} args
    
    border-radius()
        prefix('border-radius', arguments)
    
    button
        border-radius 1px 2px
    
    table
        for row in 1 2 3 4 5
            tr:nth-child({row})
                height 10px * row
  • 出力結果
  • /************   **************/
    .hello {
      width: 100px;
      height: 100px;
      background: #ff0;
    }
    textarea,
    input {
      background: #eee;
    }
    .user {
      background: #90ee90;
    }
    .user:hover {
      background: #32cd32;
    }
    -webkit-box-shadow arguments #login,
    -moz-box-shadow arguments #login,
    box-shadow arguments #login,
    html.ie8 #login,
    html.ie7 #login,
    html.ie6 #login,
    border 2px solid arguments[length(arguments) - 1] #login,
    body #login {
      box-shadow: 1px 1px 3px #eee;
    }
    body {
      padding: -5px;
    }
    /************  **************/
    body {
      font: 16px Arial, sans-serif;
    }
    #logo {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 150px;
      margin-left: -75px;
      margin-top: -75px;
    }
    #logo {
      position: absolute;
      z-index: 1;
    }
    /************  **************/
    button {
      -webkit-border-radius: 1px 2px;
      -moz-border-radius: 1px 2px;
      border-radius: 1px 2px;
    }
    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;
    }