Question

Hello I would like to use the sass module in a play application. We are already using press to minify css and include css files on individual views using #{press.stylesheet ‘path/to/mystylesheet.css’} etc. My question is can I use SASS to include individual views on a per page basis like we are doing with press.stylesheet?

Also if we can do this, I’m assuming we don’t need press anymore for css files since SASS can do it’s own minification.

Answer 1

Sass is a CSS meta-language so it’s output is css files. It’s not built to dynamically insert css into your views.

You can use sass partials to keep your code separated into modular files, but then combine them into a single css file. By nesting the import statements under classes you can prefix each selector string in the partial with a unique class per page.

This will result a single larger css file, however it will only be downloaded once and will be cached by the browser for all subsequent page requests.

Here’s how to do do it…

Sass Stylesheet with Nested Partials

Step 1. Create a default Sass file that contains all the shared default styles. We’ll call this screen.sass.

Step 2. Create partials for each of your pages:

_about.sass
_contact.sass
_home.sass

Step 3. Dynamically add a unique class to the body tag of your pages to identify them:

about-page
contact-page
home-page

Your file-structure should look like this:

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

Step 4. In the screen.sass file do the following:

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

Assuming each partial contains rules to change the default color of the div element, this will result in the following:

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