Milk+ea

Weblog Is My Hobby.

Stylusの使い方

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では、forifを使えます。 forfor <val-name> [, <key-name>] in <expression>の形で書きます。

詳しくはIterationConditionalsのページを参考にしてね。

ちなみに、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を使ってます。

タスクについての記事も書いたことがあるので良かったらどうでしょう? StylusやCoffeeScriptをまとめてコンパイルするタスクの話です。Gulpですけど!!