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"
}

上書き @since: 1.0.14

特定のUserAgentの場合に、stylus.options を上書きする事ができます。

"extend": { // Overwrite the case of mobile data
    "condition": {
        "ua": [ "android", "ios" ]
    },
    "content": {
        "options": {}
    }
}

Mac OSX のインターネット共有接続時などに、有益な設定です。

インターネット共有経由でスマートフォンから、ホストPC上の開発Webサーバにアクセスする場合

ホストPCのIPアドレスが通常のIPではなくなるケースがあるためこのような設定があります。

ビルドでは、無効な設定