企业官网建设流程全解析

• 后端
• Web框架

Sass 是一种动态样式表语言，为 CSS 编写带来变量、mixin（混入）、嵌套规则等能力。本文基于 Play Framework 官方文档 AssetsSass.md，完整讲解在 Play 项目中启用 Sass 编译的机制：源文件如何从app/assets被构建过程编译为标准 CSS、如何组织 partial 源文件与目录布局、如何通过 WebJars 复用 Compass 与 Bootstrap 等第三方 Sass 库，以及如何引用最终产物。读完本文，你将掌握一套可直接落地到 Play 项目（PlayJava/PlayScala）的 Sass 资产管线配置与使用方案。

Sass 在 Play 中的编译机制

在 Play 中，"可编译资产"（compilable assets）通常定义在app/assets目录下。它们由构建过程（sbt）处理：Sass 源文件被编译成标准 CSS 文件，然后作为普通资源分发到与未管理资产（unmanaged assets）相同的public/目录中。这意味着编译完成之后，你在使用方式上感觉不到任何差别——它们与手写的静态资源完全一致。

举一个最直观的例子：Sass 源文件app/assets/stylesheets/main.scss编译后，会以标准 CSS 资源的形式出现在public/stylesheets/main.css。

这一机制建立在 sbt-web 资产管线之上。Play 从 2.3 起，托管资产（managed assets）就交由 sbt-web 体系的插件处理，Sass 编译正是其中的一个处理阶段。构建脚本中通过pipelineStages声明各处理阶段的执行顺序（详见 PlaySettings.scala 中关于Assets任务的编排），阶段之间按声明顺序依次执行。

编译触发时机

Sass 源文件会在以下两种场景下被自动编译：

1. 执行assets命令（sbt 任务）时；
2. 开发模式下（run启动应用后）刷新浏览器中任意页面时。

在开发模式下，如果编译过程中出现任何错误，错误信息会直接显示在浏览器中（如上图所示），方便你快速定位main.scss中的语法或 import 问题，无需切换终端查看日志。

使用 partial Sass 源文件

Sass 的每个源文件（*.scss或*.sass）都会被自动编译。sbt-sassify 插件会根据文件名自动判断使用的是哪种 Sass 语法：

• *.scss：SCSS 语法（带花括号与分号）；
• *.sass：缩进语法（indented syntax，无花括号）。

文件名以_开头的文件不会被单独编译，这类文件称为 partial（局部）源文件。它们不会生成独立的 CSS 产物，但可以通过标准 Sass@import功能被其他 Sass 文件引用。这一约定让你可以将样式库拆分为多个逻辑单元，同时避免每个 partial 都被编译成多余的目标文件。

提示：这一约定与 LESS 资产的处理方式类似，但 LESS 需要额外的excludeFilter配置来跳过_*.less（可对比 AssetsLess.md），而 Sass 插件对_前缀 partial 的处理是自动的。

推荐的目录布局

以下是一个在项目中使用 Sass 的示例布局：

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

其中_reset.scss与_layout.scss是 partial 文件，不会单独编译；main.scss作为入口文件负责把它们引入进来。给定如下main.scss源文件：

@import "utils/reset"; @import "utils/layout"; h1 { color: red; }

@import "utils/reset"会解析到utils/_reset.scss（Sass 会自动补全 partial 的下划线前缀与扩展名）。上述文件编译后生成public/stylesheets/main.css。

在模板中引用编译产物

编译出的 CSS 与任何普通 public 资产一样，可以通过 Play 内置的Assets控制器反向路由引用。例如在模板中：

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

该反向路由能够正常工作，依赖conf/routes中对Assets控制器的映射，例如：

GET /assets/*file controllers.Assets.at(path="/public", file)

请求/assets/stylesheets/main.css时，路由器会调用controllers.Assets.at("/public", "stylesheets/main.css")来读取编译产物（路由细节参见 AssetsOverview.md 与 Assets.scala 中at方法的定义）。

混合使用 Sass 与 WebJars

WebJars 让你可以把客户端库作为常规库依赖引入，而不必手动把第三方资源拉进自己的代码库。Play 的 sbt-web 体系会自动将 WebJars 解压到相对资产目标目录的lib目录下（参见 AssetsOverview.md 中关于lib目录的说明），因此 Sass 源文件中可以直接@import这些库。

引入 Compass mixins

Compass 是一个包含大量可复用 Sass 函数与 mixin 的库，但原本面向 Ruby 版本的 Sass。好消息是，其中有用的 mixin 被封装成了 WebJar。在build.sbt中加入依赖即可使用：

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

然后在 Sass 源文件中导入并使用：

@import "lib/compass-mixins/lib/compass"; table.ellipsed-table { tr td { max-width: 100px; @include ellipsis(); } }

@import路径中的lib对应 WebJars 被解压到的目录，compass-mixins对应 WebJar 的 artifactId，lib/compass则是该 WebJar 内部的入口文件路径。

引入 Bootstrap 的官方 Sass 移植版

同样的思路可以用于其他 Sass 库，例如 Bootstrap 的官方 Sass 移植版本。添加 WebJar 依赖：

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

然后在项目中使用：

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

引入后即可在样式中使用 Bootstrap 的变量、mixin 与栅格体系等全部 Sass 能力。

启用与配置

在使用PlayJava或PlayScala插件的前提下，Sass 编译的启用非常简单：只需在plugins.sbt中添加 sbt-sassify 插件：

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

sbt-sassify是一个基于 sbt-web 的第三方 Sass 编译插件。其默认配置通常已经足够满足大多数项目的需求；如需调整（例如指定输出风格、修改源目录过滤器等），请查阅该插件自身的文档与最新版本信息。

需要注意的是，该插件仅在开发与构建阶段生效，对 Play 应用的运行时没有任何介入——编译产物已经是纯 CSS，运行时只负责静态资源服务。

源码纵深：Assets 控制器如何服务编译后的 CSS

编译生成的 CSS 最终由 Play 内置的Assets控制器对外提供，该控制器的实现位于 Assets.scala。它默认提供以下能力，让你的 Sass 产物在生产环境同样表现良好：

• ETag 支持：Assets控制器自动管理 ETag 响应头。ETag 值优先取自资产管线生成的 digest（如sbt-digest产出的 md5 文件），否则由资源名与文件最后修改时间计算 SHA-1 得到（见 Assets.scala）。浏览器携带该 ETag 发起条件请求时，服务器可返回304 Not Modified。
• Gzip 支持：若存在同名且带.gz后缀的资源，控制器会优先返回压缩版本，并附带Content-Encoding: gzip头（见 Assets.scala 中基于Accept-Encoding选择编码的逻辑）。对 CSS 这类文本资源，结合sbt-gzip插件能显著减小传输体积。
• Last-Modified 与 Range 请求：控制器自动处理Last-Modified头，并支持 RFC 7233 定义的部分 Range 请求，满足条件时返回206 Partial Content。

如果希望进一步压缩 Sass 编译产物，可以将sbt-digest、sbt-gzip等插件加入pipelineStages管线，例如在build.sbt中：

pipelineStages := Seq(digest, gzip)

管线中的阶段会依次执行；Play 的 scripted 测试（如 assets-pipeline/build.sbt）正是通过自定义transform阶段与计数断言来验证管线阶段恰好执行一次，这一机制同样适用于 Sass 编译阶段与其他后处理阶段的组合。

此外，sbt 插件会为应用生成独立的资产 JAR（generateAssetsJar与playPackageAssets，见 PlaySettings.scala），编译后的 CSS 与public/下其他资源一起被打包，便于整体部署或分发到 CDN。

小结

围绕 Sass 资产，Play 提供了一条清晰完整的链路：app/assets下的*.scss/*.sass源文件 → 构建期由 sbt-sassify 自动编译（_前缀 partial 自动跳过）→ 产物落盘为public/下的标准 CSS → 通过Assets控制器与反向路由对外服务，并附带 ETag、gzip、Cache-Control 等静态资源能力。配合 WebJars，你还可以在几行配置内复用 Compass、Bootstrap 等成熟的 Sass 生态库。建议按照本文的目录布局与@import组织方式起步，在需要时再深入插件配置与资产管线定制。

更多关联资料：AssetsOverview.md（静态资源总览）、AssetsCoffeeScript.md（CoffeeScript 资产）、AssetsLess.md（LESS 资产）、Anatomy.md（Play 应用目录结构）。

• 后端
• Web框架