stylusの勉強会に向けた簡単なまとめです。
codepenでブログ書けるとか便利過ぎてて漏れた。

まとめ予定

書く順番とか特に決めてないけど、なんとなくこんな感じ。

  • 書き方編
  • extend / mixin編
  • よく使うOperators編
  • よく使うFunction編
  • Conditionals / Iteration編
  • プラグイン:nib編
  • プラグイン:jeet編
  • プラグイン:raputure編

書き方

省略

: とか ; とか {} とか省略できる。 (省略しなくても書ける)

  .hoge
    width 100px
    height : 100px;

コメント

コメントは3種類

  • インライン(コンパイル時になくなる)
  • 複数行(コンパイル時になくなる)
  • 複数行(コンパイル時に残る)
  // インラインコメント
/*
    複数行コメント
*/
/*! 
    複数行コメント(CSS内にも残る)
*/


引用

@{propaty name}でそのブロック内で指定したプロパティの値を参照出来る

  .hoge
    width 100px
    height @width

ネスト

インデントつけてセレクタをネスト出来る

  .hoge
    .fuga
        background red

親セレクタ参照

ネスト時に&でそこまでのセレクタを展開出来る

  .hoge
    .fuga &
        background red
      &__pugya
        background blue

変数

sassとかと違って、変数に命名規則はない。
{変数名} = {値}
cssがデフォルトで持っている値に対しても上書きが可能。
スコープはブロック内。

operators

処理周りサンプルで。

    /*! 計算と真偽値 */
  foo 5px + 10
  foo 2 ** 8
  foo 5px * 2
  foo !!''
  foo hoge and fuga and pugya
  foo hoge or fuga or pugya
  foo 1..5
  foo 1...5
  foo 'hoge' is a 'string'
  foo (1 2 3) == (1 2 3)
  foo (1 2 3) == (1 2)
  foo ((one 1) (two 2)) == ((one 1) (two 2)) 
  foo ((one 1) (two 2)) == ((one 1) (two)) 
  foo ((one 1) (two 2))[0]
  foo 3 in (1 2 3 4)

  /*! 型強制 */
  foo: foo + bar
  foo: 'foo ' + bar
  foo: 'foo ' + 'bar'
  foo: 'foo ' + 5px
  foo: 2s - 500ms
  foo: 5000ms == 5s
  foo: 50deg

  /*! 色 */
  foo: white - 50%
  foo: black + 50%
  foo: #eee - #f00
  foo: #eee - rgba(black,.5)
  foo: #cc0000 + 30deg

  /*! 文字列置換 */
  foo: '%s / %s' % (5px 10px)

mixin

  mixin-sample(val1,val2)
    background val1

こんな感じで書く。 引数の値をプロパティにしたい場合はこんな感じ。

  mixin-sample(val1,val2)
    {val1} val2

こんな感じで使ったり。 stylusのmixinはfunctionっぽく使うこともできるけど、cssのプロパティにさもそんなのあったっけっぽく書けるのが特徴。
命名にルールがないため、css自体のプロパティを上書きも可能。

上の例だとvender prefixを意識しなくてもプロパティをさくさく書いていける。 なにかおかしな振る舞いした時に、どこが影響してるのかわからなくなることも。。。


4,136 0 0