Модуль Play Framework SASS включает в себя страницу

Question

Здравствуйте, я хотел бы использовать модуль sass в приложении play. Мы уже используем press для минимизации css и включения css файлов в отдельные представления с использованием # {press.stylesheet 'path / to / mystylesheet.css'} и т. Д. Мой вопрос заключается в том, могу ли я использовать SASS для включения отдельных представлений для каждой страницы, например мы делаем с press.stylesheet?

Также, если мы можем сделать это, я предполагаю, что нам больше не нужно нажимать для файлов css, так как SASS может выполнить свое минимизация.

Answer 1

Sass - это мета-язык CSS, поэтому он выводится в виде CSS-файлов. Он не создан для динамической вставки CSS в ваши представления.

Вы можете использовать sass partials, чтобы разделить ваш код на модульные файлы, но затем объединить их в один файл CSS. Вложив операторы импорта в классы, вы можете поставить перед каждой строкой селектора префикс перед классом на странице.

В результате будет получен один файл CSS большего размера, однако он будет загружен только один раз и будет кэшироваться браузером для всех последующих запросов страницы.

Вот как это сделать ...

Таблица стилей Sass с вложенными частями

Шаг 1. Создайте файл Sass по умолчанию, который содержит все общие стили по умолчанию. Мы назовем это screen.sass.

Шаг 2. Создание партиалов для каждой из ваших страниц:

_about.sass
_contact.sass
_home.sass

Шаг 3. Динамически добавьте уникальный тег к тегу body своих страниц, чтобы идентифицировать их:

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
}