§Sassの使用

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

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

たとえば、Sassソースファイルapp/assets/stylesheets/main.scssは、public/stylesheets/main.cssで標準のCSSリソースとして利用可能になります。

Sassソースは、assetsコマンド中、または開発モードで実行中にブラウザで任意のページを更新すると、自動的にコンパイルされます。コンパイルエラーはブラウザに表示されます。

§部分的なSassソースファイルの操作

Sassファイル（*.scss/*.sass）は自動的にコンパイルされます。Sassプラグインは、ファイル名に基づいて使用されているSass構文（インデント付きかどうか）を自動的に判別します。名前が_で始まるファイルは、個別にコンパイルされません。ただし、そのようなファイルは、標準のSassインポート機能を使用することで、他のSassファイルに含めることができます。

§レイアウト

プロジェクトでSassを使用するためのレイアウト例を以下に示します。

app
 └ assets
   └ stylesheets
     └ main.scss
     └ utils
       └ _reset.scss
       └ _layout.scss

次のmain.scssソースが与えられた場合

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

h1 {
  color: red;
}

上記のアウトラインのSassファイルは、public/stylesheets/main.cssにコンパイルされます。したがって、このファイルは、通常のパブリックアセットとしてテンプレートで使用できます。

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

§SassとWeb Jarの混合

WebJarsを使用すると、すべての依存関係を自分でコードベースに手動で取り込むことなく、クライアントライブラリに依存することができます。

Compassは、Sass用のあらゆる種類の再利用可能な関数とmixinを含むライブラリです。残念ながら、このライブラリはSassのRuby実装を対象としています。そこから抽出できる有用なmixinが多数あります。幸いなことに、これらのmixinはWeb Jarにラップされています。

これらのCompass mixinをプロジェクトに含めるには、ライブラリの依存関係にWeb Jarの依存関係を含めるだけです。たとえば、build.sbtファイル内

libraryDependencies += "org.webjars.bower" % "compass-mixins" % "0.12.7"

sbt-webは、WebJarsをアセットのターゲットディレクトリに対する相対的なlibディレクトリに自動的に展開します。したがって、Compass mixinを使用するには、次のようにmixinをインポートできます。

@import "lib/compass-mixins/lib/compass";

table.ellipsed-table {
  tr td {
    max-width: 100px;
    @include ellipsis();
  }
}

同じアイデアを使用して、他のSassライブラリを含めることができます。たとえば、bootstrapの公式Sassポートなどです。WebJarを含めるには、次を使用します。

libraryDependencies += "org.webjars.bower" % "bootstrap-sass" % "3.3.6"

次に、プロジェクトで使用するには、次を使用できます。

@import "lib/bootstrap-sass/assets/stylesheets/bootstrap";

§有効化と設定

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

addSbtPlugin("io.github.irundaia" % "sbt-sassify" % "1.5.2")

プラグインのデフォルト設定は通常十分であるはずです。ただし、設定方法および最新バージョンについては、プラグインのドキュメントを参照してください。

次: JSHintの使用

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