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

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

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

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

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

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

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

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

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

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

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

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

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

.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

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

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

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

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

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

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

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

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

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

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

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

@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); }

.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. Символ & во вложенных конструкциях указывает на родительский селектор.

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

$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; }
}

.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:

$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);

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

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

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