SASSよりさらにシンプルな記述ができる、CSS言語「Stylus」を導入しました。
Stylusを使う上で、SASSとの違いにハマったことがいくつかあったのでメモです。
1. Stylusの@extendはネストされたセレクタを指定できるが、ルートから記述しないとエラー
例えば下記のような構造で、SASSでは.selector3を.selector2の継承にするとき、.selector3の中に@extend .selector2と記述すればOKでしたが、
NGコード
|
1 2 3 4 5 6 |
.selector1 color #000 .selector2 color #fff .selector3 @extend .selector2 |
Stylusでは’Failed to @extend “.selector2” ‘とエラーになります。
.selector3の中を、@extend .selector1 .selector2と記述しなければならないようです。
OKコード
|
1 2 3 4 5 6 |
.selector1 color #000 .selector2 color #fff .selector3 @extend .selector1 .selector2 |
指定するセレクタが深い場合、いちいちルートから記述してのはかなり不便です。が、そもそもセレクタはあまり深くしすぎると、生成されるCSSのコードが長くなってしまうため、セレクタは2階層ぐらいに留めておければ、@extendする時にも苦ではないかもしれません。
2. IEのグラデーションは、「unquote」を追加しないとエラー
SASSで使っていたグラデーションのmixinを使おうとしたところ、IE用グラデーションはStylusの文法に合わないようで、「unquote」を追加しなければならないようです。
NGコード
|
1 |
filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1) |
OKコード
|
1 |
filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)') |
3. メディアクエリに応じたスタイルを記述するときは、block mixinを使う
レスポンシブサイトで、SASSではこのような使い方をしていました。
SASSでのmixin定義：
|
1 2 3 |
@mixin breakpoint($width) @media (min-width : $width) @content |
SASSで呼び出すときの例：
|
1 2 |
@include breakpoint(768px) color #000 |
Sylusではこの記述方法が使えなません。頭に「+」をつけたblock mixinという方法を使います。
Stylusでのmixin定義：
|
1 2 3 |
breakpoint(width) @media (min-width width) {block} |
Stylusで呼び出すときの例：
|
1 2 |
+breakpoint(768px) color #000 |
Stylusの方がちょっぴりシンプルに書けます。
4. SASSではコンパイルされなかった「_（アンダーバー）」をつけたパーシャルが、Stylusではコンパイルされてしまう。
これはStylusの問題ではなくコンパイラの問題ですが、これまでSASSのコンパイルに使用していたCompassでは、ファイル名の頭に「 _ 」をつけたパーシャルはcssファイルが作られませんでした。
Stylusのコンパイルではgulpを使用しているのですが、パーシャルを含むStylusディレクトリを指定すると、パーシャルまでCSSが生成されてしまいます。
watchは全Stylusファイルを指定し、コンパイルは「 _ 」を除くStylusファイルを指定する必要がありました。
例：watchするソース
|
1 |
"./_stylus/*.styl" |
例：コンパイルするソース
|
1 |
["./_stylus/*.styl", "!./_stylus/_*.styl"] |
これでSASSと同様、それ以上の快適さを得られた気がします。