§使用 Sass

Sass 是一种动态样式表语言。它允许您在编写 CSS 文件时具有相当大的灵活性，包括对变量、mixin 等的支持。

Play 中的可编译资产通常在 app/assets 目录中定义。它们由构建过程处理，Sass 源代码被编译成标准的 CSS 文件。生成的 CSS 文件作为标准资源分发到与非托管资产相同的 public/ 文件夹中，这意味着在编译后，您使用它们的方式没有区别。

例如，Sass 源文件 app/assets/stylesheets/main.scss 将作为标准 CSS 资源在 public/stylesheets/main.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")">

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

当使用 PlayJava 或 PlayScala 插件时，只需将 sbt-sassify 插件添加到您的 plugins.sbt 文件中即可启用 Sass 编译。

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

插件的默认配置通常就足够了。但是，请参阅插件的文档，了解如何配置它以及它的最新版本。

下一步：使用 JSHint

发现本文档中的错误？此页面的源代码可以在此处找到。在阅读文档指南后，请随时贡献拉取请求。有任何问题或建议要分享？请访问我们的社区论坛，与社区开始对话。