§使用 LESS CSS

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

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，您可以在模板中像任何常规公共资产一样使用它。

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

§使用 LESS 与 Bootstrap

Bootstrap 是一个非常流行的库，与 LESS 结合使用。

要使用 Bootstrap，您可以使用它的 WebJar，将其添加到您的库依赖项中。例如，在 build.sbt 文件中

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

sbt-web 会自动将 WebJars 提取到相对于您的资产目标文件夹的 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

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