Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Процесс Wordpress разработки, используя Sass и Compass

by
Read Time:12 minsLanguages:

Russian (Pусский) translation by Anton L (you can also view the original English article)

В этой статье, мы посмотрим на то как использовать Sass и Compass во время разработки WordPress темы. Мы структурируем таблицы стилей согласно SMACSS и воспользуемся Compass для создания спрайтов изображений, как для ретина так и для обычных экранов устройств.

Стоит заметить, что данная статья не является введением в Sass; однако, если вы начинающий, всё равно можете ознакомиться с ней.

Требования

Перед тем как мы начнём, убедитесь, что у вас установлен Sass и Compass на компьютере. Если это не так, стоит изучить следующие инструкции:

Существует несколько приложений с графическим интерфейсом для работы с Sass и Compass, но я буду использовать терминал (если вы на Wiondows, воспользуйтесь командной строкой). Используйте тот инструмент, который больше вам подходит.

Настраиваем проект

Давайте начнём, создав каталог для нашего проекта. Создайте новый каталог на рабочем столе и назовите его tutsplus. Внутри него создайте два каталога: sass и images. В каталоге sass будут находиться наши Sass файлы, которые будут формировать таблицу стилей для нашей темы, style.css.

Откройте каталог images и создайте в нём две новые директории для иконок нашей темы. Назовите их icons и icons@2x. Позже мы будем использовать изображения в этих каталогах для создания спрайтов, для нашей темы. На данный момент структура директорий должна выглядеть следующим образом:

Figure 1 The Folders structureFigure 1 The Folders structureFigure 1 The Folders structure
Структура директорий

Конфигурация Compass

Мы будем использовать Compass, чтобы отслеживать (watch) изменения файлов в каталоге sass, когда это произойдёт, Sass скомпилирует наши стили. Каждый раз когда мы запускаем Compass, он ищет файл конфигурации в текущей директории. Название файла - config.rb.

Для создания файла конфигурации откройте терминал/командную строку, перейдите в каталог tutsplus на вашем рабочем столе:

Далее запустите команду compass config config.rb. Данная команда создаст файл конфигурации для вас. Откройте файл в текстовом редакторе и добавьте следующие изменения:

  1. Поменяйте css_dir = "stylesheets" на: css_dir = "/". Это даст понять Compass, что конечный файл с CSS следует поместить в корне нашей темы, так как это то место где WordPress будет искать style.css.
  2. Установите предпочитаемый тип конечного CSS. В моём случае я выбрал "расширенный" добавив на строке 12 output_style = :expanded.
  3. Раскомментируйте строку 14 и 17 удалив хеш символ, тем самым данные строки будут выглядеть следующим образом relative_assets = ture и line_comments = false.

Сохраните изменения. Теперь ваш файл config.rb должен выглядеть, как в примере ниже:

Отслеживаем изменения

Отлично! Теперь когда у нас есть файл с конфигурацией, настало время создать наш первый Sass файл. Создайте новый файл внутри каталога sass и назовите его style.scss. Далее, запустите терминал и перейдите в каталог /Desktop/tutsplus/.

Запустите команду compass watch. Данная команда начнёт процесс отслеживания изменений файлов Sass в каталоге sass. После того как будет найден файл style.scss он будет скомпилирован и в итоге мы получим style.css в директории tutsplus.

Обратите внимание все файлы внутри каталога sass, имя которых не начинается с нижнего подчеркивания, будут обработаны и скомпилированный результат попадёт в каталог tutsplus. Это как раз то что нам нужно для нашего style.scss файла.

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

Декомпозиция

Мы собираемся разделить наш style.scss на несколько компонентов используя руководства (style guides) SMACSS (Scalable and Modular Architecture for CSS). Автор SMACSS - Jonathan Snook, он написал книгу об этой замечательной методологии, которую я настоятельно рекомендую вам прочитать. В том случае, если вы зарегестрированный пользователь Tuts+, скачать данную книгу можно здесь.

SMACSS подразделяет ваш CSS на следующие пять категорий:

  1. Основные стили (Base)
  2. Структура (Layout)
  3. Модуль (Module)
  4. Состояние (State)
  5. Тема (Theme)

Давайте создадим каталог для каждой из этих категорий внутри каталога sass. Используем следующие названия: base, layouts, modules, states и themes.

Figure 2 Our SMACSS folder structureFigure 2 Our SMACSS folder structureFigure 2 Our SMACSS folder structure
Структура нашего SMACSS каталога

Base

В нашем base каталоге, поместите все таблицы стилей, которые соответствуют правилу Base стилей SMACSS. Данные таблицы стилей должны использовать стили только для селекторов элемента. Также это место подойдёт для того, чтобы добавить сюда сброс (reset) CSS стилей браузера по умолчанию.

Compass включает сброс стилей по умолчанию от Eric Meyer. Однако для данного проекта я буду использовать normalize.css. Скачайте файл normalize.css и поместите его в директорию base, после чего переименуйте его в _noarmalize.scss. Не забудьте изменить файловое расширение с css на scss.

Далее, нам следует импортировать normalize таблицу стилей в наш style.scss. Для этого откройте style.scss и добавьте:

Как вы возможно заметили мы не указываем расширение файла и нижнее подчёркивание. Препроцессор Sass достаточно сообразительный и сможет импортировать необходимый файл.

Layouts

Здесь мы поместим файлы отвечающие за структура. К примеру, здесь будут находится стили для шапки, сайдбара, футера и стили отвечающие за структуру нашей страницы - _header.scss, _sidebar.scss, _footer.scss и _page.scss.

Вы можете использовать l- префикс для классов отвечающих за структуру:

Также это место подойдёт для стилей сетки. Как и в случае с base вы можете ознакомиться с правилами для стилей структуры SMACSS.

Modules

Модули элементы контента, которые можно повторно использовать. К примеру, блог пост является модулем так как он используется в различных местах на сайте. Виджеты, шорткоды, также как и иконки, всё это модули.

Модуль может содержать подмодули (sub modules). Вот вам пример модуля виджета, его заголовок - подмодуль:

Здесь мы используем BEM (Block Element Modifier) правила именования классов.

States

В данном каталоге будут располагаться стили ответственные за состояния элементов. В том случае если вы создаёте адаптивную тему, стили медиа запросов следует поместить здесь.

Давайте создадим один из них прямо сейчас.

Создайте новый файл в текстовом редакторе и сохраните его как _media_queries.scss в каталоге /sass/states/. Скопируйте стили ниже для экранов различных размеров в данный файл.

Не забудьте импортировать новую таблицу стилей в ваш style.scss:

Если к примеру, у вас есть сайдбар навигация, которая скрыта на мобильных устройствах, в данный каталог следует поместить стили отвечающее за состояние открытой навигации .is-open или скрытой .is-closed, но в большинстве случаев данные стили больше подходят для layout или как файл модуля off-canvas навигации.

Themes

Подходящее место, для кастомных стилей WordPress плагинов. К примеру, допустим, вы можете поместить кастомные стили для Contact Form 7 плагина.

Theme Info

Каждый файл style.css WordPress темы содержит мета информацию, к примеру название темы, автора, версию и так далее. Мы можем воспользоваться переменными Sass, чтобы с лёгкостью изменить информацию о каждой теме, которую мы создаём.

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

Откройте новый файл и добавьте следующие переменные:

Теперь мы должны создать файл, который будет использовать данные переменные. В текстовом редакторе создайте файл _theme_info.scss и сохраните его в sass каталоге. Заполните _theme_info.scss следующим контентом.

Ну и наконец импортируйте новый файл в style.scss, также как и компоненты Compass:

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

Helpers

Хорошая практика использовать небольшие CSS классы для стилизации элементов, вместо использования специфичного селектора. Следуйте DRY принципу, не повторяйтесь - Don't Repeat Yourself. Мы можем создать таблицу стилей для небольшого класса хлепера (helper). Для примера, я определю хелперы для структуры и типографии.

Создайте новый файл под названием _helpers.scss и сохраните его в sass каталоге. Опять также как и с файлом переменных, если файл содержащий хелперы разрастётся, советую вам разделить его на небольшие файлы.

Откройте недавно созданный файл и скопируйте следующий контент:

Как вы можете заметить мы используем префикс f- для классов относящихся к стилизации шрифтов, префикс t- для классов текстовой стилизации. Сохраните файл и импортируйте в style.scss:

Генерация спрайтов

Compass обладает невероятно полезными функциями для генерации спрайтов изображений. Мы добавим наши иконки в каталог icons и icons@2s, icons@2s будет содержать те же иконки, но размером в два раза больше для устройств с ретина экранами.

Для примера, я добавлю два файла иконок: checkmark.png и star.png, которые можно найти в исходных файлах, которые можно скачать для данного туториала.

Figure 3 The iconsFigure 3 The iconsFigure 3 The icons
Иконки

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

Compass найдёт все файлы *.png изображений внутри каталога иконок и сгенерирует два спрайта изображений в каталоге images. После чего нам следует создать CSS класс для данных изображений.

Чтобы найти необходимую позицию изображения в спрайте, мы сделаем два хелпер миксина. Для этого, создайте новый файл и назовите его _mixins.scss, откройте его и скопируйте следующий код:

Оба миксина принимают название, а также спрайт в качестве аргументов. Миксин установит ширину, высоту и позицию фона для иконки в сгенерированном спрайте. retina_sprite_icon установит соответствующий размер фона для ретина иконок.

Теперь пришло время добавить классы для иконок. Создайте _icons.scss и сохраните его внутри каталога /sass/modules/. Затем, скопируйте в него следующее содержание:

Мы обходим циклом список с именами иконок, который определён в $theme_icons и генерируем стили для ретина и обычных иконок, используя миксин. Далее мы создаём класс .icon, который будет являться основным модулем наших иконок, после чего модуль классов модификаторов для каждой иконки в списке.

В этом примере, создаётся .icon--checkmark и .icon--star классы. Вот пример использования иконки звёздочки (star icon):

Наконец, давайте импортируем миксины и модуль иконок в style.scss:

Заключение

Sass и Compass довольно мощные инструменты и могут значительно облегчить работу во время разработки WordPress темы или WordPress плагина. Данная статья поможет вам начать использовать данные инструменты для создания более эффективного рабочего процесса с WordPress.

Для тех кого интересует больше деталей и информации касательно темы рассмотренной в данном туториале взгляните на следующие статьи:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.