Stylus学習ノート

stylus学習
セレクタ
インデント構文(必須、必須)

stylus最も卑しい書き方

はstylusでコロン、セミコロン、カッコがオプションです.

私が考えているのは、私たちのエディタにはstylusがハイライト表示されていて、属性名と属性値が分かりやすいので、これらのオプションはすべて削除して、

を書く必要はありません.

body 
        color white

ルール・セット(必ず学び、新しい行の構文に置き換える必要があります)

Stylusはcssと同様に、複数のセレクタにカンマを使用して属性

を同時に定義できます.

     textarea, input
      border 1px solid #eee

    textarea
     input
            border 1px solid #eee

    ：                   ，                   ，     

 **  ：**                             

親参照(必須)
文字&親セレクタの下を指す栗を使用して、textareaとinputは:hover偽類がcolor値''textarea'input'color#A 7 A 7 A 7'&:hover'color#000が''textareaに等しく、'input{'color:#a 7 a 7;'}'textarea:hover,'input:hover
変数＃ヘンスウ＃

- ###  （  ）
   **   **`(     ，    ，    ，   ，   )`   ，           ， js  （jiu） （shi） （mo） （fang）  
        ''font-size = 14px
        ''
        '' body
        ''   font font-size Arial, sans-seri
   ：
    ''body {
    ''   font: 14px Arial, sans-serif;
    '' }

属性検索(把握する必要がある)これはすごい機能で、変数に値を割り当てる必要がなくアプリケーション属性を定義することができます(恐れません)、次の典型的な例では、要素の水平垂直中央揃え(典型的な方法はパーセントとmargin負の値を使用する)'#logo'position:absolute'top:50%'left:50%'width:w=150 px'height:h=80 px'margin-left:-(w/2)'margin-top:-(h/2)Stylusの変数を定義し、変数wとhを使用することができます.属性名の前に@文字でタグ付けして取得する属性値`@widthは150 px'#logo'position:absolute'top:50%'left:50%'width:150 px'height:80 px'margin-left:-(@width/2)'margin-top:-(@height/2)

に相当する
補間
補間(必須)
Stylusは{}文字囲み式をサポートして値を挿入します.挿入した値は識別子の一部となり、属性補間''vendor(prop,args)'-webkit-{prop}args'-moz-{prop}args'{prop}args'''border-radius('border-radius',arguments)'''box-shadow('box-shadow',arguments)'''button'border-radius 1 px 2 px/3 px 4 px
コンパイル:''button{'-webkit-border-radius:1 px 2 px/3 px 4 px;'-moz-border-radius:1 px 2 px/3 px 4 px;'border-radius:1 px 2 px/3 px 4 px;'}
セレクタ補間(必須)
補間はセレクタでも機能します''table'for row in 1 2 3 4 5'tr:nth-child({row})'height:10 px*row
コンパイル:''table tr:nth-child(1){'height:10 px;'}'table tr:nth-child(2){'height:20 px;'}'table tr:nth-child(3){'height:30 px;'}'table tr:nth-child(4){'height:40 px;'}'table tr:nth-child(5){'height:50 px;'}
演算子(Stylusをより柔軟に使用できるように学ぶ必要があります)
自分で勉強する
かき混ぜて書く(勉強する必要がある)

混入

    （·`      css     ，              `）           ，        
            ，      ，                   ，        css      

.

の方法(必学)はjsのように書くが、括弧を使わなくてもよい.パラメータは、デフォルト値''add(a,b)'a+b'body'padding add(10 px,5)'を''body{'padding:15 px;'}

としてレンダリングできます.
演算時、単位が異なる場合は最初の数のパラメータを取って計算しますが、もちろんunitで単位換算を無視することもできます
条件
if、eles if、else、unless(除く)
反復(必修)
反復

    ''body
    ''   for num in 1 2 3
    ''     foo num

''body{'foo:1;'foo:2;'foo:3;'}にコンパイル
かき混ぜて書く
この例は、同じコンポーネントのクラス名が類似しており、属性が類似しているなど、「apply(props)」props=arguments if length(arguments)>1「for prop in props」{prop[0]}prop[1]「body」apply(one 1,two 2,three 3)」「body」list=(one 1)(two 2)(three 3)[apply(list)
インポート(必須)
@importインポートstylファイルとcssファイル@mediaメディアクエリー、cssと同じ
継承(必学)
Stylusの@extend命令はsassの実現に啓発され、基本的にクラス全体を継承することができ、これにより''.message { '' padding: 10px; '' border: 1px solid #eee; '' } '' '' .warning { '' @extend .message; '' color: #E2E21E; '' }
cssがそうならwarning { '' padding: 10px; '' border: 1px solid #eee; '' } '' '' .warning { '' color: #E2E21E; '' }
どんな理由があっても、Stylusが不定の特殊な需要に遭遇した場合は、@cssを使用してCSSの字面量として解決することができます.