§LESS CSS を使う

LESS CSS は、動的なスタイルシート言語です。変数やミックスインその他のサポートを含む、かなり柔軟な方法で CSS ファイル書くことができます。

Play により別の言語へコンパイルされるアセットは、app/assets へ入れます。LESS CSS をここへ入れておくと、ビルドの中で普通の CSS ファイルへコンパイルされます。生成された CSS は public/ ディレクトリに配置されたかのように扱われるため、一旦コンパイルされてしまえば通常の CSS ファイルと違いはありません。

例えば、app/assets/stylesheets/main.less にある LESS ソースファイルは、public/stylesheets/main.css にある標準的なリソースとして利用できるようになります。Play は main.less を自動的にコンパイルします。その他の LESS ファイルは build.sbt ファイルに含める必要があります:

includeFilter in (Assets, LessKeys.less) := "foo.less" | "bar.less"

LESS ソースファイルは assets コマンドの実行時や、開発モードでの動作中にブラウザでページを更新すると自動的にコンパイルされます。あらゆるコンパイルエラーはブラウザに表示されます:

§LESS コードを分割する

LESS ソースを複数のライブラリに分割し、LESS の import 機能を使うことができます。

ライブラリファイルが個別にコンパイル (またはインポート) されるのを防ぐため、コンパイラにこれらを読み飛ばしてもらう必要があります。このため、例えば _myLibrary.less のように、分割されたソースファイルにアンダースコア (_) 文字列の接頭辞を付けることができます。以下の設定により、コンパイラはパーシャルを無視します:

includeFilter in (Assets, LessKeys.less) := "*.less"

excludeFilter in (Assets, LessKeys.less) := "_*.less"

§ディレクトリ構造

以下は、LESS を使うプロジェクトのレイアウト例です:

app
 └ assets
    └ stylesheets
       └ main.less
       └ utils
          └ reset.less
          └ layout.less

次のような内容のmain.lessがあるとします。

@import "utils/reset.less";
@import "utils/layout.less";

h1 {
    color: red;
}

生成された CSS ファイルは public/stylesheets/main.css としてコンパイルされ、その他の通常の公開アセットと同じようにテンプレートで使うことができます。

<link rel="stylesheet" href="@routes.Assets.at("stylesheets/main.css")">

§Bootstrap と LESS を使う

Bootstrap は、LESS を併せて使う、とてもポピュラーなライブラリです。

ライブラリ依存性に Bootstrap の WebJar を追加することで、Bootstrap を使うことができます。例えば、build.sbt ファイル内に以下のように追加します:

libraryDependencies += "org.webjars" % "bootstrap" % "3.3.4"

sbt-web は、アセット対象フォルダから見た lib 関連パスに WebJar を自動的に展開します。これにより、例えば以下のように Bootstrap を関連パスでインポートして使うことができます:

@import "lib/bootstrap/less/bootstrap.less";

h1 {
  color: @font-size-h1;
}

§有効化と設定

Playjava または PlayScala プラグインを使っている場合、LESS のコンパイルは plugins.sbt ファイルにプラグインを追加するだけで有効にすることができます:

addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.0.6")

ふつうはプラグインのデフォルト設定で十分です。とは言え、どこまで設定できるか情報を得るために、プラグインのドキュメントを参照してください。

Next: JSHint を使う

このドキュメントの翻訳は Play チームによってメンテナンスされているものではありません。間違いを見つけた場合、このページのソースコードをここで確認することができます。ドキュメントガイドラインを読んで、お気軽にプルリクエストを送ってください。