后端Web框架【免费下载链接】playframeworkThe Community Maintained High Velocity Web Framework For Java and Scala.项目地址https://gitcode.com/gh_mirrors/pl/playframework点击查看免费下载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 源文件会在以下两种场景下被自动编译执行assets命令sbt 任务时开发模式下run启动应用后刷新浏览器中任意页面时。在开发模式下如果编译过程中出现任何错误错误信息会直接显示在浏览器中如上图所示方便你快速定位main.scss中的语法或 import 问题无需切换终端查看日志。使用 partial Sass 源文件Sass 的每个源文件*.scss或*.sass都会被自动编译。sbt-sassify 插件会根据文件名自动判断使用的是哪种 Sass 语法*.scssSCSS 语法带花括号与分号*.sass缩进语法indented syntax无花括号。文件名以_开头的文件不会被单独编译这类文件称为 partial局部源文件。它们不会生成独立的 CSS 产物但可以通过标准 Sassimport功能被其他 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.scssSass 会自动补全 partial 的下划线前缀与扩展名。上述文件编译后生成public/stylesheets/main.css。在模板中引用编译产物编译出的 CSS 与任何普通 public 资产一样可以通过 Play 内置的Assets控制器反向路由引用。例如在模板中link relstylesheet hrefroutes.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 与 WebJarsWebJars 让你可以把客户端库作为常规库依赖引入而不必手动把第三方资源拉进自己的代码库。Play 的 sbt-web 体系会自动将 WebJars 解压到相对资产目标目录的lib目录下参见 AssetsOverview.md 中关于lib目录的说明因此 Sass 源文件中可以直接import这些库。引入 Compass mixinsCompass 是一个包含大量可复用 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 的 artifactIdlib/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 插件会为应用生成独立的资产 JARgenerateAssetsJar与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.mdCoffeeScript 资产、AssetsLess.mdLESS 资产、Anatomy.mdPlay 应用目录结构。赞分享后端Web框架【免费下载链接】playframeworkThe Community Maintained High Velocity Web Framework For Java and Scala.项目地址https://gitcode.com/gh_mirrors/pl/playframework点击查看免费下载相关推荐Sails 静态资源Assets机制完全指南从 assets/ 到 .tmp/public/ 的资产管道Sails 静态资源Assets机制完全指南从 assets/ 到 .tmp/public/ 的资产管道 Sails 中的静态资源Assets指的是项后端Play Framework 中使用 CoffeeScript 编译前端资源app/assets 目录、sbt-coffeescript 插件与 sbt-web 管道实战指南Play Framework 中使用 CoffeeScript 编译前端资源app/assets 目录、sbt coffeescript 插件与 sbt we后端Web框架Label Studio 说话人分离Speaker Diarization模板实战用 XML 配置实现音频说话人分段标注Label Studio 说话人分离Speaker Diarization模板实战用 XML 配置实现音频说话人分段标注 本文围绕 Label Studi后端Web框架上一篇mini-vue中的Composition API函数式编程新范式下一篇SVGR无障碍焦点管理案例复杂SVG导航创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考