§LESS CSSの使用

LESS CSSは動的なスタイルシート言語です。変数、mixinなどのサポートを含め、CSSファイルの記述方法にかなりの柔軟性を持たせることができます。

Playでコンパイル可能なアセットは、app/assetsディレクトリで定義する必要があります。これらはビルドプロセスによって処理され、LESSソースは標準のCSSファイルにコンパイルされます。生成されたCSSファイルは、管理されていないアセットと同じpublic/フォルダーに標準リソースとして配布されます。つまり、コンパイル後の使用方法に違いはありません。

たとえば、app/assets/stylesheets/main.lessにあるLESSソースファイルは、public/stylesheets/main.cssにある標準リソースとして利用できます。Playはmain.lessを自動的にコンパイルします。main.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としてコンパイルされ、テンプレートで通常のpublicアセットとして使用できます。

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

§BootstrapでのLESSの使用

Bootstrapは、LESSと組み合わせて使用される非常に人気のあるライブラリです。

Bootstrapを使用するには、ライブラリの依存関係に追加して、そのWebJarを使用できます。たとえば、build.sbtファイル内では

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

sbt-webは、WebJarをアセットのターゲットフォルダーに対する相対的なlibフォルダーに自動的に展開します。したがって、Bootstrapを使用するには、次のように相対的にインポートできます。

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

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

§有効化と設定

PlayJavaまたはPlayScalaプラグインを使用するときに、plugins.sbtファイルにプラグインを追加するだけで、LESSコンパイルが有効になります。

addSbtPlugin("com.github.sbt" % "sbt-less" % "2.0.1")

プラグインのデフォルト設定で通常は十分です。ただし、設定方法の詳細については、プラグインのドキュメントを参照してください。

次へ：Sassの使用

このドキュメントにエラーを見つけましたか？このページのソースコードはこちらにあります。ドキュメントガイドラインを読んだ後、遠慮なくプルリクエストを送信してください。質問や共有するアドバイスがありますか？コミュニティフォーラムにアクセスして、コミュニティと会話を始めましょう。