Question

您好我想在播放应用程序中使用sass模块。我们已经使用press来缩小css并使用＃{press.stylesheet'path / to / mystylesheet.css'}将css文件包含在各个视图中。我的问题是我可以使用SASS在每页基础上包含单个视图我们正在使用press.stylesheet？

另外，如果我们可以这样做，我假设我们不再需要按css文件，因为SASS可以自己缩小。

Answer 1

Sass是一种CSS元语言，所以它的输出是css文件。它不是为了在您的视图中动态插入css而构建的。

您可以使用sass partials将代码分成模块文件，然后将它们组合成一个css文件。通过在类下嵌套import语句，您可以为partial中的每个选择器字符串添加前缀，每页都有一个唯一的类。

这将产生一个较大的css文件，但是它只会被下载一次，并且将被浏览器缓存以用于所有后续页面请求。

这是怎么做的......

具有嵌套部分的Sass样式表

步骤1。创建包含所有共享默认样式的默认Sass文件。我们称之为screen.sass。

第2步。为每个网页创建部分内容：

_about.sass
_contact.sass
_home.sass

第3步。动态地将唯一的类添加到网页的正文标记中以识别它们：

about-page
contact-page
home-page

您的文件结构应如下所示：

partials/
  _about.sass
  _contact.sass
  _home.sass
screen.sass

第4步。在screen.sass文件中执行以下操作：

// Shared default styles
div
  color: #fff
.home-page
  @import partials/home
.about-page
  @import partials/about
.contact-page
  @import partials/contact

假设每个部分都包含更改div元素的默认颜色的规则，则会产生以下结果：

// Shared default styles
div {
  color: #fff
}
.home-page div {
  color: #00f
}
.about-page div {
  color: #0ff
}
.contact-page div {
  color: #f0f
}

Play Framework SASS模块包括每页

1 个答案:

具有嵌套部分的Sass样式表