Как использовать Sass с WordPress. Пошаговое руководство

В течение многих лет CSS был моим любимым языком при разработке веб-сайтов. Дизайн и уровень представления веб-сайта всегда были моим коньком. В тот день, когда я узнал о существовании Sass, я сразу же был разочарован в нем. Я подумал про себя: «С какой стати я буду усложнять себе жизнь при разработке веб-сайта. Мне уже хватило трудностей…»

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

Реальность такова, что Sass (и другие CSS препроцессоры) могут быть крайне мощными помощниками любому дизайнеру или разработчику, заинтересованному в том, чтобы писать меньше кода и делать больше. В конце концов, все препроцессорные языки компилируются в CSS. Так что если вам просто не нравится идея использования препроцессорного языка, вы все еще остаетесь в неведении.

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

Предпосылки

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

Полезные инструменты

Прежде чем мы начнем, я рекомендую обзавестись некоторыми инструментами, чтобы упростить жизнь при компиляции Sass. Я работаю на Mac, поэтому пользуюсь CodeKit, но вы можете использовать любой другой препроцессор или даже командную строку ole, которой мы будем пользоваться в этом уроке. Другой инструмент, который я буду использовать на протяжении урока, это MAMP.

Настройка локальной сборки WordPress

Для того чтобы начать работу с WordPress вам потребуется зайти на сайт wordpress.org и скачать последнюю версию системы:

Посетите сайт http://www.wordpress.org, чтобы скачать последний релиз.

После распаковки zip архива переименуйте его и перетащите в папку htdocs, которая была создана при установке MAMP.

Путь: *User*/Applications/MAMP/htdocs/

Наш новый каталог sass-wp размещаем в папке htdocs внутри MAMP

На этом моменте убедитесь, что MAMP запущен. Откройте стартовую страницу в только что созданной директории WordPress. В нашем случае она имеет адрес http://localhost:8888/sass-wp/ .

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

Вернитесь обратно на стартовую страницу MAMP и выберите опцию PHPMyAdmin в меню «Инструменты» (Tools). Более быстрый способ — через URL http://localhost:8888/MAMP:

PHPMyAdmin — http://localhost:8888/MAMP

Как только вы оказались внутри PHPMyAdmin просто создайте новую базу данных. Для этого урока я назвал нашу базу данных sass-wp.

Наконец, мы переходим к нашей сборке WordPress по адресу http://localhost:8888/sass-wp и нажимаем кнопку «Create a Configuration File» (Создать файл конфигурации):

Введите имя вашей базы данных, имя пользователя и пароль

Убедитесь, что вы ввели имя базы данных, созданной локально (той, что вы только что сделали, в нашем случае sass-wp), имя пользователя и пароль. В этом уроке мы назвали нашу базу данных sass-wp, и так как мы используем MAMP наш логин и пароль будут root.

Если все настроено корректно, вы должны увидеть окно установки. Введите всю информацию о вашем сайте WordPress и нажмите Install WordPress («Установить WordPress»). После завершения установки войдите в свой аккаунт, и вы окажетесь в панели администрирования:

Если вы видите панель администрирования WordPress, значит, установка прошла успешно!

Установка Sass и Compass

Sass имеет Ruby зависимости, поэтому для корректной работы нам нужно установить Ruby gem. Большинство компьютеров Mac поставляется с уже установленным Ruby, но если вы работаете на компьютере с Windows вам необходимо рассмотреть альтернативное решение.

Также мы будем использовать Compass, CSS фреймворк с открытым исходным кодом, который сразу готов к использованию и предлагает множество быстрых и полезных дополнений к Sass. Альтернативой Compass служит другой фреймворк под названием Bourbon.

Используйте любой фреймворк, который вам нравится, или комбинируйте их, как я иногда делаю. Более подробную информацию вы можете найти в документации по установке по адресу http://compass-style.org/install/ или http://bourbon.io/docs/.

Быстрая установка

Чтобы установить Sass и Compass в первый раз, просто откройте инструмент командной строки на ваш выбор и введите несколько строк кода, приведенных ниже.

Примечание: вы можете получить сообщение об ошибке при получении доступа к каталогам, которые вы изменяете. Это можно быстро исправить, добавив команду sudo перед всеми строками. При этом система попросит ввести ваш системный пароль. Теперь Sass и Compass должны быть установлены в вашей системе:

$ gem update --system
$ gem install sass
$ gem install compass

Теперь, когда мы установили Sass и Compass, нам нужно задать структуру папок нашей темы. Убедитесь, что редактор командной строки остался открытым.

Настройка темы с Sass и Compass

Для этого урока мы будем использовать тему twentyfourteen. Структура каталога twentyfourteen по умолчанию следующая:

Структура файлов, заданная по умолчанию в теме twentyfourteen

Добавление необходимых файлов и папок

Для начала мы должны добавить несколько папок и файлов:

• Наша тема уже содержит каталог images. Если в вашей теме нет такой папки, нужно добавить ее;
• Также нам нужно создать каталог sass. Эта папка будет содержать все Sass файлы для компиляции в CSS. Вероятно, вы бы предпочли иметь один основной Sass файл, однако существует возможность добавления нескольких файлов, о которой я расскажу чуть позже;
• Внутри каталога sass нужно создать файл style.scss. Этот файл будет использован препроцессором для компиляции в основной CSS файл вашей темы. Примечание: CSS файл должен находиться в корневом каталоге темы для того, чтобы WordPress функционировал корректно. Он должен существовать!
• В связи с тем, что Sass построен на ruby, необходимо создать файл config.rb, чтобы указать Sass/Compass где находятся файлы. Ниже приведено содержимое папки обновленной темы, где для демонстрации новой иерархии выделены только что созданные файлы и подкаталоги.

Тема twentyfourteen с нашими новыми файлами и папками для работы с Sass

Файлы, выделенные красным цветом, либо были добавлены, либо упомянуты в файле конфигурации Sass (файл config.rb), который мы рассмотрим в следующем разделе.

Файл config.rb

Каждый проект на основе Compass использует конфигурационный файл для определения имен каталогов/файлов и их расположения внутри проектов. В нашем случае, файл config.rb будет выглядеть как в примере, приведенном ниже. Я добавил комментарии, чтобы пояснить, что значит каждая строка.

http_path = "/" # целевой путь корневого уровня
css_dir = "." # устанавливает наш файл style.css по умолчанию на корневом уровне нашей темы
sass_dir = "sass" # определяет sass директорию
images_dir = "images" # определяет предварительный каталог изображений
javascripts_dir = "js" # определяет JavaScript каталог
# Здесь вы можете выбрать предпочитаемый стиль вывода (может быть переопределен через командную строку):
# output_style = :expanded или :nested или :compact или :compressed
# Разрешить использование относительных путей к ресурсам посредством вспомогательных функций Compass.  
# примечание: это важно в темах WordPress для спрайтов
 relative_assets = true

Как вы могли заметить, файл config.rb очень прост для понимания. Этот файл определяет, где CSS, JavaScript, изображения и Sass размещаются в каталоге проекта. В нашей теме каталог CSS находится внутри корневой директории. Файлы Sass располагаются внутри каталога sass, который мы создали ранее. JavaScript – внутри папки под названием js и так далее.

Нижние пять строк содержат опции, которые вы можете закомментировать или раскомментировать и которые имеют отношение к выводу традиционного CSS после компиляции нашего Sass. Обычно я использую :nested во время разработки и меняю ее на :compressed, когда мои проекты переходят на стадию эксплуатации, чтобы сэкономить время загрузки. Используйте ту опцию, которая вам больше нравится.

Настраиваем Sass на отслеживание обновлений

Самое лучшее в препроцессоре — это автоматическая компиляция CSS кода. Чтобы Sass отслеживал обновления, нужно ввести еще одну команду в редакторе командной строки. Наша тема готова к работе, поэтому введите следующие команды:

$ cd /yourproject
$ compass watch

Убедитесь, что вы изменили путь вашей командной строки на папку рабочего проекта. Затем введите команду Compass watch, приведенную выше. Compass проверит вашу папку на наличие новых стилей и файлов, созданных или измененных. Из них будет сгенерирован новый CSS код и скомпилирован в наш корневой файл style.css.

Давайте напишем немного кода Sass

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

Теперь, когда мы все настроили, мы готовы к написанию кода Sass.

Для начала давайте откроем файл style.css темы twentyfourteen и скопируем содержимое закомментированного блока, который находится сверху и выглядит следующим образом:

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Чтобы не было лишних сложностей, я просто буду использовать этот комментарий таким, какой он есть, и добавлю его в начало нашего файла style.scss внутри папки sass. Также мы включим Compass и всегда необходимый Compass reset.

Итак, теперь наш файл style.css внутри папки sass выглядит следующим образом:

/*

Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
 @import "compass";
@import "compass/reset";

По существу все готово для стилизации нашей темы. Единственно, стоит отметить, что как только вы сохраните файл style.scss, будет сгенерирован новый файл style.css в корневом каталоге вашей темы вместо существующего.

Предполагается, что вы начинаете реорганизацию темы twentyfourteen с нуля. Если вы не хотите переопределять стили, заданные по умолчанию, вам нужно скопировать их в style.scss, тогда они будут также скомпилированы, либо использовать частичные шаблоны, которые мы рассмотрим далее.

Частичные шаблоны

Я большой поклонник модульного программирования. Под этим я подразумеваю, разделение кода на небольшие, более удобные в работе файлы, которые затем компилируются в один файл. Ранее я упоминал о возможности использования нескольких Sass файлов, из которых генерируется один CSS файл.
Такие файлы известны как частичные шаблоны (от английского partials) и обычно сопровождаются префиксом в виде символа нижнего подчеркивания, например, “_partial.scss”. Чтобы использовать частичные шаблоны, я добавил папку под названием _partials в наш каталог sass, как показано ниже.
Внутри этой папки, я создал несколько небольших файлов .scss, которые мы будем использовать в нашем проекте. Вы можете создать столько файлов, сколько захотите, если все они включены внутри главного файла style.scss.

Наша папка _partials внутри каталога sass

Как использовать частичные шаблоны

Частичные шаблоны с префиксом нижнего подчеркивания не компилируются в дополнительную таблицу стилей. Символ нижнего подчеркивания указывает Sass, что этот файл не должен компилироваться, поэтому он изначально игнорируется. Чтобы получить стили из этих файлов в нашу таблицу стилей, нам нужно включить эти файлы в наш файл style.scss. Посмотрите, как это сделано в нашем файле style.scss:

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

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

// Здесь мы импортируем наши частичные шаблоны 
@import "_partials/mixins";
@import "_partials/variables";
@import "_partials/typography";

Внутрь каждого частичного шаблона я добавил комментарии и немного базового кода Sass:

_mixins.scss
/* mixins.scss */

variables.scss
/*_variables.scss */
/* Текстовый стиль основной части */
$text-color: black;
$base-font-size: 16px;
$base-font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
$base-font-weight: 400;

_typography.scss
/*_typography.scss*/
body {
color: $text-color;
font-size: $base-font-size;
font-family: $base-font-family;
font-weight: $base-font-weight;
line-height: 1.6;
}

Так как Compass отслеживает наш проект, и мы включили частичные шаблоны в наш главный Sass файл style.scss, Compass сгенерирует новый style.css, как только изменения будут сохранены. Теперь наш файл style.css выглядит следующим образом:

style.css
/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
 /* line 17, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
 /* line 22, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1; }
 /* line 24, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
 list-style: none; }
 /* line 26, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0; }
 /* line 28, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
 /* line 30, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none; }
 /* line 103, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
 /* line 32, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
border: none; }
/* line 116, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
/* _mixins.scss */
/* _variables.scss  */
/* _typography.scss */
/* line 3, sass/_partials/_typography.scss */
body {
color: black;
font-size: 16px;
font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.6; }

Сейчас наш код выводится в отдельный CSS файл, а это значит, что мы успешно собрали тему WordPress с работающими Sass и Compass. Поздравляю, если вы зашли так далеко!

Настройки нашей темы сброшены, и она готова к кастомизамизации

Так как мы переопределили стили темы twentyfourteen, заданные по умолчанию, теперь наша тема выглядит немного бедной, но она готова к настройке при помощи Sass!

Избегайте использования командной строки

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

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

• Grunt;
• Gulp;
• CodeKit;
• Mixture;
• Prepros;
• Scout;
• Koala ;
• LiveReload.

Контроль версий

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

При использовании Sass создаются некоторые новые папки и файлы, которые не всегда нужно контролировать в Git. Папка .sass-cache или, например, sass не предназначены для использования на реальном сервере во время эксплуатации. В конце концов, файлом, который имеет значение, остается файл style.css в корневом каталоге нашей темы.

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

Заключение

WordPress, Sass и Compass могут быть мощным трио, когда взаимодействуют как в нашем примере. Хотя большинство новичков в Sass, как правило, неодобрительно относятся ко всем дополнительным работам и настройкам, я думаю, как только они проникнуться и действительно поймут преимущества использования данного языка, они подсядут на него навсегда.

Возвращение обратно к обычному CSS будет казаться намного более трудным, чем раньше. Поверьте мне!

Если вы все еще мало знакомы с Sass, я рекомендую вам попробовать. Обратитесь к руководству, чтобы получить ускоренный курс изучения языка. Если вы можете писать код на CSS, вы сможете писать и на Sass.

Надеюсь, этот урок привнес ясность в то, как комбинировать Sass и WordPress и поможет вам создать или отредактировать вашу тему более эффективно, чем когда-либо раньше.

Сергей Бензенкоавтор-переводчик статьи «How To Use Sass With WordPress – A Step By Step Guide»