Статьи

Sass для разработчиков WordPress

Ноябрь 18, 2018

Sass для разработчиков WordPress

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

Преобразовать таблицу стилей в Sass

Лучший способ начать использовать Sass в разработке WordPress — использовать тему с включенными файлами Sass. Тема Underscores — мое любимое начальное место для новой темы. Однако, если вы начинаете с темы, в которой нет файлов Sass, вам необходимо преобразовать существующую таблицу стилей в Sass.

Хорошей новостью является то, что если вы используете синтаксис .scss (который я рекомендую), то ваш существующий CSS-код — это действительный Sass. Вы можете просто скопировать style.css в style.scss и этот файл .scss будет правильно скомпилирован.

Настройка частичных

На этом этапе у вас есть длинный файл .scss, содержащий столько же кода, сколько и ваш исходный файл CSS. Теперь вы можете использовать переменные и миксины, но это еще лучше не организовано. Мы можем получить столь необходимую организацию, разбив длинную таблицу стилей на более мелкие файлы. Скопируйте каждый «раздел» style.css в отдельный файл .scss в папке Sass. Назовите этот файл после того, что он содержит с префиксом подчеркивания. Например, ваши стили, относящиеся к вашей навигации, идут на _navigation.scss .

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

[Дерзость]
@import ‘навигация’;
[/ Sass]

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

Рефакторинг по необходимости

После того, как вы разбили длинную таблицу стилей на более мелкие части (чтобы вам было легче находить код), вы можете приступить к рефакторингу этих частей. Этот шаг помогает упростить обслуживание, но я не считаю это необходимым. Один из способов рефакторинга — вложить селекторы. Если у вас есть несколько стилей, определенных в определенном родительском селекторе, вы получите это в исходной таблице стилей:

[Дерзость]
.логотип заголовка {
// стили
}
.header .tagline {
// стили
}
.header .menu {
// стили
}
[/ Sass]

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

[Дерзость]
.header {
.logo {
// стили
}
.tagline {
// стили
}
.menu {
// стили
}
}
[/ Sass]

Вы также можете выполнить рефакторинг, заменив повторяющиеся префиксные свойства короткими миксинами

[Дерзость]
.menu a {
-Вебкит-переход: цвет 0,2 с;
переход: цвет 0,2 с;
}
[/ Sass]

Mixin может сделать то же самое. Примечание: здесь я не включил @mixin : я рекомендую использовать библиотеки @mixin Bourbon или Compass для стандартных вещей, подобных этой.

[Дерзость]
.menu a {
переход @include (цвет 0,2 с);
}
[/ Sass]

Примечание: на самом деле я не рекомендую использовать миксины для префиксов: AutoPrefixer — гораздо лучшее решение, но это другая статья.

Скомпилируйте Sass для WordPress

Теперь, когда мы разбили большой файл style.css : как его собрать?

Требования к компилятору

WordPress имеет несколько уникальных требований для вывода CSS. Этот файл должен называться style.css, он должен находиться в корне темы, и ему нужен специальный блок комментариев WordPress вверху.

Помимо этих специфических для WordPress соображений, я бы также добавил следующие требования для нашего процесса компиляции. Лучше всего хранить все файлы Sass в подкаталоге ( /sass/ ), чтобы мы могли сохранить корень темы в чистоте. Мы также должны быть в состоянии сжать вывод CSS для нашего развернутого кода.

Методы компиляции GUI

Если вы предпочитаете приложение для компиляции Sass, следующие приложения предоставляют графический интерфейс для выбора и просмотра папок файлов .scss.

Методы компиляции CLI

Я не часто использую эти приложения: я предпочитаю командную строку. Существует два инструмента для компиляции Sass из командной строки: Sass и Compass. Вы можете найти инструкции по установке Sass и Compass в качестве инструментов командной строки (Ruby gems): Sass / Compass .

CLI Sass предоставляет команду sass для компиляции входного файла Sass для вывода CSS: sass style.scss:style.css . Конечно, повторять эту команду каждый раз, когда вы что-то меняете в своих Sass-компонентах, не идеально. Вы можете добавить параметр --watch и Sass будет следить за файлом .scss (и импортируемыми им частями) и компилировать каждый раз, когда обнаружит изменение: sass --watch style.scss:style.css .

Мы можем еще больше улучшить наш метод компиляции, используя Compass вместо Sass. Самым большим преимуществом Compass является то, что он работает с файлом config.rb . Вы можете сохранить параметры конфигурации (расширенные или сжатые, входные и выходные каталоги и т. Д.) В файле, а затем указать Compass, чтобы он просматривал и компилировал Sass, запустив compass watch в каталоге, который содержит config.rb .

Вот как я использую мой файл Compass config.rb :

  • Он живет в /{theme-name}/sass/
  • Он выводит style.css на уровень выше корня темы: css_dir = '..'
  • Файлы .scss находятся в каталоге /sass/ : sass_dir = ''
  • Во время разработки: output_style = :expanded
  • Для развертывания: output_style = :compressed

WordPress style.css Комментарии

Как мы уже отмечали выше, WordPress требует определенных комментариев в верхней части таблицы стилей темы. Мы можем управлять ими в style.scss в нашем style.scss /sass/ . Так как Compass удалит комментарии с помощью output_style = :compressed , нам нужно начать блок комментариев с восклицательного знака (!), Чтобы сохранить эти комментарии.

[Дерзость]
/ *!
Название темы: Sassy Theme
URI темы: http://jamessteinbach.com/themes/sassy/

URI автора: http://jamessteinbach.com
Описание: от CSS до Sass. Пример кода темы
* /

// импортируем все ваши частичные
[/ Sass]

Организуйте свои частичные

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

Вы можете использовать папки, чтобы организовать ваши частичные. Для @import в папке ваш оператор @import будет содержать имя каталога следующим образом:

[Дерзость]
@import ‘base / variable’;
// импортируем _variables.scss из каталога / base /
[/ Sass]

Есть много способов сгруппировать ваши партиалы в папки. Приведенный ниже список «Sass Resources» содержит несколько хороших принципов организации частичных мероприятий. Вот один пример:

  • / base / (переменные, миксины, сброс, типография)
  • / layout / (сетка, верхний и нижний колонтитулы)
  • / vendors / (плагины, вендоры и т. д.)
  • / компоненты / (кнопки, меню, формы, виджеты)
  • / pages / (главная страница, целевая страница, портфолио)

Underscores.me Sass Структура

Sass Resources

Мы только что рассмотрели использование Sass для создания тем WordPress. Если вы впервые читаете эту тему, вам может быть интересно: «Где я могу получить больше информации?». В следующих списках представлена ​​дополнительная информация о методах использования Sass для разработки на WordPress. Некоторые из их советов отличаются от этого поста: вы можете следовать по пути, который лучше всего подходит для вас.

Дополнительное чтение Sass

Если у вас есть другие ресурсы, чтобы рекомендовать или уроки, чтобы поделиться, пожалуйста, разместите их в комментариях!

43
Share: