Разработка тем оформления для Drupal 8. Часть 3: Работа со стилями

В этой статье мы рассмотрим создание стилей с помощью Sass и Compass. Это очень эффективный подход, часто применяемый в профессиональной разработке тем оформления.

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

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

Но какой бы ни был объем проекта, абсолютно везде будет эффективно применение следующих техник:

  • использование CSS препроцессоров;
  • автоматизация сборки;
  • оптимизация ресурсов.

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

  • переменные;
  • функции;
  • вложенность;
  • расширяемость;
  • математические операции.

Пожалуй, единственным недостатком этой технологии остается необходимость преобразования такого "продвинутого" CSS в обычный, понятный браузерам, что влечет за собой установку необходимого ПО. Сейчас среди препроцессоров можно выделить явного лидера — это Sass, его мы и будем рассматривать.

"Продвинутый" CSS пишется в файлах с расширением scss. Синтаксис расширяет обычный CSS, и позволяет использовать его наряду с "продвинутыми" возможностями.

Примечание

Существует и другой синтаксис, он пишется в файлах с расширением sass, но он менее привычен и хуже подходит для объяснения принципов работы.

Быстрый пример

Пример использования вложенности:

Исходный SCSS

.breadcrumb { margin: 16px 0;
  ol { padding: 0; list-style: none;
    li { display: inline-block; }
  }
}

Преобразованный CSS

.breadcrumb { margin: 16px 0; }
.breadcrumb ol { padding: 0; list-style: none; }
.breadcrumb ol li { display: inline-block; }

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

Установка Sass

Компиляция производится с помощью консольного ПО, и этот момент отпугивает многих начинающих разработчиков. Да, существуют и графические приложения, но поверьте, в использовании консоли нет ничего сложного, и без этого не обходится ни один профессионал.

Установка компилятора Sass производится одной командой, однако предварительно должен быть установлен интерпретатор Ruby, так как Sass написан на этом языке и устанавливается из его репозитория (Ruby пакеты называются gem). Устанавливать Sass и Ruby нужно не на локальном компьютере, а в окружении, где установлен Drupal.

Для Ubuntu 16.04 это можно сделать так:

sudo apt update
sudo apt install ruby-full rubygems gcc
sudo gem install sass

Обновление

Компилятор Sass на Ruby больше не будет поддерживаться, описанный выше метод установки более не рекомендуется.

Теперь мы можем компилировать файлы SCSS или отслеживать изменения в файлах и компилировать их автоматически.

sass SOURCE.scss COMPILED.css
sass --watch SOURCE.scss:COMPILED.css

Оба эти способа не особо удобны в работе, но для компиляции примеров вполне подходят.

Возможности Sass

Давайте вкратце рассмотрим возможности Sass.

Переменные — одна из самых полезных возможностей Sass. Их использование позволяет избежать дублирования повторяющихся значений в стилях, и при необходимости изменять их в одном месте. Пример использования переменных:

SCSS

$font: Roboto, sans-serif;
$color-bg: #EEE;

.body { font-family: $font; background: $color-bg; }

CSS

.body {
  font-family: Roboto, sans-serif;
  background: #EEE;
}

Функции (mixin) — еще одна полезная возможность для автоматизации создания повторяющихся стилей. В этом примере используется еще одна возможность Sass — математические операции.

Пример использования функций:

SCSS

@mixin z-level($level) { box-shadow: 0 $level * 1px $level * 2px rgba(0,0,0,0.25); }

.z-level-1 { @include z-level(1); }
.z-level-2 { @include z-level(2); }
.z-level-3 { @include z-level(3); }

CSS

.z-level-1 { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.z-level-2 { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.z-level-3 { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); }

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

Пример использования расширяемости:

SCSS

$color-bg: #DDD;
.z-level-1 { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.z-level-2 { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }

.btn { background: $color-bg; @extend .z-level-1;
  &:hover { @extend .z-level-2; }
}

CSS

.z-level-1, .btn { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.z-level-2, .btn:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }

.btn { background: #DDD; }

Здесь мы видим, что Sass компонует свойства оптимально, с точки зрения производительности, и вам больше не нужно об этом беспокоиться. Я описал далеко не все возможности, в Sass есть еще условия, циклы, интерполяция, операции с цветами и прочее.

Compass

Также, не могу не упомянуть своего рода швейцарский нож для Sass — Compass. Это набор расширений и готовых функций, который еще больше упрощает написание стилей.

Основные возможности:

  • мощные функции для работы с цветами;
  • кроссбраузерные записи свойств;
  • обнуление стилей браузеров по умолчанию;
  • вспомогательные функции;
  • генерация спрайтов.

Помимо этого Compass, позволяет отслеживать изменения и производить компиляцию в рамках всего проекта, но я все же рекомендую другой способ, о котором расскажу в следующей статье.

Установка Compass:

sudo gem install compass

Для использования возможностей Compass в SCSS файлах нужно импортировать соответствующие директивы, например:

@import "compass";
@import "compass/reset";
@import "compass/css3";

Также надо добавить Compass в зависимости в файле config.rb и сконфигурировать пути к папкам ресурсов:

require 'compass/import-once/activate'

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

Пример использования возможностей Compass:

SCSS

$color-accent: #00B8D4;
$color-accent-hover: darken($color-accent, 3);
$color-accent-active: darken($color-accent, 6);

a { @include link-colors($color-accent, $color-accent-hover, $color-accent-active);

CSS

a { color: #00B8D4; }
a:hover { color: #00abc5; }
a:active { color: #009db5; }

Обновление

Поддержка Compass на данный момент прекращена, и я рекомендую рассмотреть альтернативы.

Существуют и другие расширения Sass, например Breakpoint, Susy, Singularity. Эти расширения я рекомендую для ознакомления в первую очередь.

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