Stylusの使い方
Stylusを使うことでCSSをパワフルに記述できます。
Stylusのインストール
Stylusをインストールします。インストールにはNodeJSがインストールされている必要があります。
npm i -g stylus
StylusとCSS
試しに適当なCSSを書いてみました。
.css { color: #000; }
Stylusでも同じことを書いてみます。
.stylus color #000
見ての通り、{}
,:
,;
を記述する必要はありませんが、それらを記述しても大丈夫です。
例えば、color: #000
としてもOK。
ちなみにEmmetは、:
を挟まない形で展開されるので、記述しない方に慣れたほうがいいかも。
追記。Atomでですが、:(コロン)を間に挟んで展開するように設定する記事を書きました。
Stylueの使い方
セレクタのネスト
次のように.parent
内に.child
とすることでネストができます。
.parent
内で.parent
は、&
でアクセスできます。
これは、:hover
のように&
の前後に文字を繋げてセレクタにしたい場合などに使います。
また、Stylusでは,
のあとの改行が許されています。,
も省略可。
.parent color #000 &:hover color #333 .child & background #ddd .child2, .child3 background #fff
コンパイル後。
.parent { color: #000; } .parent:hover { color: #333; } .child .parent { background: #ddd; } .parent .child2, .parent .child3 { background: #fff; }
変数を使う
=
で繋ぐと変数として使用できるようになります。
また、@
を使うとセレクタ内のあるプロパティ値を使うことができます。
size = 15px .a font-size size height 100px width @height * 2
コンパイル後。
.a { font-size: 15px; height: 100px; width: 200px; }
ファイルの読み込み
ファイルの読み込みには、@import
を使います。拡張子を書かない場合は、.styl
ファイルが読み込まれます。
@import "normalize.css" @import "common"
コメントを書く
一行コメントの場合は//
、複数行コメントには/* */
を使います。
// comment /* * comment */
Mixinを使う
後ろに()
を付けるとMixinとして使用できるようになります。
引数がある場合、プロパティのように記述できますが、無ければ()
を付ける必要があります。
()
の中で=
を使うとデフォルト値になります。
また、すべての引数はarguments
に入っているので、区別する必要がなければそれを使うという手もあります。
color-mixin() color #000 bg-color-mixin(prop, bg-color, border-val = 1px solid @background) {prop} bg-color border border-val box-shadow-mixin() box-shadow arguments .a color-mixin() bg-color-mixin background #fff box-shadow-mixin 1px 2px 3px 4px #000
コンパイル後。
.a { color: #000; background: #fff; border: 1px solid #fff; box-shadow: 1px 2px 3px 4px #000; }
引数が無ければ@block
を使ってもいいかも。
tmp = @block { color #000 background #fff } .a {tmp}
コンパイル後。
.a { color: #000; background: #fff; }
まとまった値をMixinへ渡したい場合は、{block}
を使います。
そのMixinを使う場合は、先頭に+
を付けます。
mixin(val) .tmp z-index val .block {block} +mixin(10) color #000
コンパイル後。
.tmp { z-index: 10; } .block { color: #000; }
Extendの使い方
@extend
とすることで他のセレクタのCSSをそのまま現在のセレクタへ適用できます。
複数ある場合は、@extends
と複数形にし、,
で繋いで一行で書くこともできます。
$
を先頭に付けると、コンパイル時に出力しません。
単体で使わなければ$
を付けるほうが、CSSサイズを小さくできます。
.extend color #000 .parent .extend2 background 15px $extend3 display block .try @extend .extend @extend .parent .extend2 @extend $extend3 // == @extends .extend, .parent .extend2, $extend3
コンパイル後。
.extend, .try { color: #000; } .parent .extend2, .try { background: 15px; } .try { display: block; }
Mixinの中で+cache(key)
関数を使うと、スコープ内で$key
を宣言して、@extend $key
するように振る舞います。
次の例だと、$w10px
や$h2em
。
size($width, $height = $width) +cache('w' + $width) width: $width +cache('h' + $height) height: $height .a size 10px 20px .b size 10px 2em .c size 1px 2em
コンパイル後。
.a, .b { width: 10px; } .a { height: 20px; } .b, .c { height: 2em; } .c { width: 1px; }
別のMixinで同じkey
を使用しても、違うスコープの$key
になることに注意。
Functionと制御構文
Stylusには、役に立つFunctionが用意されてます。 詳しくはこちら。
よく使用するのはこんな感じかな。
.a color lighten(#000, 30) // => #4d4d4d color tint(#000, 30) // => #4c4c4c color darken(#fff, 30) // => #b3b3b3 color shade(#fff, 30) // => #b2b2b2 color saturate(#edc, 30) // => #f8ddc2 color desaturate(#123, 30) // => #1b2229
FunctionはMixinと同じやり方で作ることもできます。
odd-sum-px(nums...) n = 0 n += num if odd(num) for num in nums return n .a margin odd-sum-px(1px, 2px, 3px, 4px) // => marign 4px
Stylusでは、for
やif
を使えます。
for
はfor <val-name> [, <key-name>] in <expression>
の形で書きます。
詳しくはIterationや Conditionalsのページを参考にしてね。
ちなみに、n += num if odd(num) for num in nums
は、無理やり一行で書いたもので、複数段で書いた方が分かりやすいかな。
for num in nums if odd(num) n += num
CSSへコンパイル
コマンドラインでstylus in.styl
のようなコマンドを実行するだけです。
in.styl
の部分は、自分のStylusファイル名に変えてね。
$ stylus in.styl compiled in.css
また、-w
オプションを付けることでファイルを保存するたびにコンパイルします。
$ stylus -w in.styl compiled in.css watching in.styl compiled in.css // <= save
タスクランナーの紹介
タスクランナーを使うと、Stylusファイルのコンパイルを他のタスクとともに自動化させることができます。
GulpやGruntが有名!僕はGulpを使ってます。
- Gulp
- Grunt
タスクについての記事も書いたことがあるので良かったらどうでしょう? StylusやCoffeeScriptをまとめてコンパイルするタスクの話です。Gulpですけど!!