1.x stylus

Summary

Beezでは、CSSメタ言語に Stylus が利用可能です。

nib が標準で利用可能です。

他の、CSSメタ言語 less, sass, scss も利用可能ですが、自動コンパイル、ビルドは提供されていませんので独自で構築する必要があります。

拡張子

Stylusファイルの拡張子は、.styl です。これはBeezの仕様になります。

機能

開発Webサーバにある *.styl ファイルは自動で、*.cssとして同一ディレクトリに自動コンパイルされます。

ビルド時に自動で *.styl ファイルは *.css として同一ディレクトリに自動コンパイルされます

stylusの機能(@import mixin など)はすべて利用可能です。

拡張

b64

指定されたpathの画像をbase64のURIに変換します。

stylus.url()のaliasとして定義してあります。

url()をすべてbase64に変換したくはないのでaliasとして定義されています。

.hoge
  background b64('./hoge.png');

定数追加

開発Webサーバ、ビルドのStylusコンパイル時に、自動で定数を設定出来ます。

• 手順
  • conf/[env].json#stylus.options.fn に定数を設定
  • 使用したい*.stylで定数を記述

"fn": {
    "FONTTITLE": "14px"
}