Начинаем использовать Sass для разработки WordPress темы. Часть 1

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

Что такое Sass?

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

Он во многом похож на язык PHP, который является препроцессором, исполняющим скрипты на сервере, а на выходе генерирующем HTML. Также и Sass обрабатывает файлы .scss для генерации CSS файлов, которые могут использоваться браузерами.

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

Используем Sass для разработки тем WordPress

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

Для начала вам необходимо установить Sass. Он может использоваться в виде командной строки, однако существуют и несколько GUI приложений для Sass. Мы рекомендуем использовать Koala, поскольку он бесплатный, с открытым исходным кодом и доступен для Mac, Windows, и Linux.

Для тестирования этого примера вам необходимо будет создать новую тему. Просто создайте новую папку в /wp-content/themes/. Вы можете назвать ее как угодно, например ‘mytheme’. Внутри этой пустой папки создайте другую папку и назовите ее stylesheets.

В папке stylesheets создайте файл style.scss с помощью любого текстового редактора типа Блокнот.

Теперь вам нужно открыть Koala и кликнуть на иконку плюсика для добавления нового проекта. Далее, выберите вашу папку с темой и добавьте ее в свой проект. Вы заметите, что Koala автоматически найдет файл Sass в вашей папке stylesheets и отобразит его.

Кликните правой кнопкой мыши на вашем файле Sass и выберите опцию Set Output Path. Далее выберите корневую папку вашей темы, из нашего примера, это будет /wp-content/themes/mytheme/ и нажмите Enter. Koala сгенерирует CSS файл на выходе, в папке вашей темы. Для его тестирования вам необходимо открыть ваш файл Sass — style.scss — в текстовом редакторе типа Блокнот и добавить в него следующий код:

$fonts: arial, verdana, sans-serif;
body {
font-family:$fonts;
}

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

body {
  font-family: arial, verdana, sans-serif; }

Обратите внимание, что мы определили переменную $fonts в нашем файле Sass. Теперь, в любом месте, где нам понадобится добавить font family, нам не потребуется снова и снова прописывать все шрифты. Мы можем просто использовать $fonts.

Что полезного Sass привносит в CSS?

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

Управление несколькими таблицами стилей

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

Что насчет CSS @import?

Проблема при использовании @import в вашем файле CSS в том, что каждый раз когда вы добавляете @import, ваш файл CSS выполняет дополнительный HTTP запрос к серверу. Это влияет на загрузку страницу, что не особо хорошо для проекта. С другой стороны, когда вы используете @import в Sass, он включит файлы в ваш Sass файл и объединит в один файл CSS для всех браузеров.

Для того, чтобы понять, как использовать @import в Sass прежде вам необходимо создать файл reset.scss в папке stylesheets вашей темы и вставить в него следующий код.

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Теперь откройте ваш основной файл style.scss и добавьте в него нижеследующую строку в то место, где нужно импортировать файл reset.

@import 'reset';

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

Продолжение статьи смотрите по ссылке Начинаем использовать Sass для разработки WordPress темы. Часть 2