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

() translation by (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 structure — Структура директорий

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

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

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

1	cd /Desktop/tutsplus/

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

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

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

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "/"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

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

Отлично! Теперь когда у нас есть файл с конфигурацией, настало время создать наш первый 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 на следующие пять категорий:

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

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

Figure 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 и добавьте:

1	// Base
2	@import "base/normalize";

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

Layouts

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

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

// _header.scss
.l-main-header {
    margin: 30px;
    padding: 20px;
    font-size: 16px;
}

// _navigation.scss
.l-main-nav {
    position: relative;
}

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

Modules

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

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

1	<li class="widget">
2	<h4 class="widget__title">Recent Posts</h4>
3	</li>

.widget {
    padding: 10px;
}

.widget__title {
    font-size: 15px;
}

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

States

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

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

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

1	/*! =Media Queries
2	-------------------------------------------------------------- */
3
4	/* 956-768px */
5	@media only screen and (min-width: 768px) and (max-width: 959px) {
6
7	}
8
9	/* 767-480px */
10	@media only screen and (min-width: 480px) and (max-width: 767px) {
11
12	}
13
14	/* 479px */
15	@media only screen and (max-width: 479px) {
16
17	}

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

// Base 
@import "base/normalize";

// States 
@import "states/media_queries"

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

Themes

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

Theme Info

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

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

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

// Theme Information
//--------------------------------------------//
$theme_name: "My Theme";
$theme_uri: "#";
$theme_description: "My WordPress Theme";
$theme_version: "1.0";
$theme_author: "my name";
$theme_author_uri: "#";
$theme_license: "GPL";
$theme_tags: "responsive-layout, post-formats";

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

/*!

Theme Name: #{ $theme_name }
Theme URI: #{ $theme_uri }
Description: #{ $theme_description }
Version: #{ $theme_version }
Author: #{ $theme_author }
Author URI: #{ $theme_author_uri }
License: #{ $theme_license }
License URI: License.txt
Tags: #{ $theme_tags }

*/

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

@import "compass";

@import "vars";
@import "theme_info";

// Base 
@import "base/normalize";

// States 
@import "states/media_queries";

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

Helpers

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

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

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

/*! =Helpers
-------------------------------------------------------------- */

// Layout
//--------------------------------------------//
.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.hide {
    display: none;
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

.clearfix {

    &:before,
    &:after {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }
}

.center-block {
    display: block;
    margin: 0 auto;
}

// Typography
//--------------------------------------------//
.f-normal {
    font-weight: normal;
}

.f-bold {
    font-weight: bold;
}

.f-italic {
    font-style: italic;
}

.t-strike {
    text-decoration: line-through;
}

.t-overline {
    text-decoration: overline;
}

.t-underline {
    text-decoration: underline;
}

.t-left {
    text-align: left;
}

.t-right {
    text-align: right;
}

.t-center {
    text-align: center;
}

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

@import "compass";

@import "vars";
@import "theme_info";

// Base 
@import "base/normalize";

// Helpers 
@import "helpers";

// States 
@import "states/media_queries";

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

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

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

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

// Icons
//--------------------------------------------//
// map *.png icon files
$icons_sprite: sprite-map( "icons/*.png" ); 
$icons_sprite2x: sprite-map( "icons@2x/*.png" );

// generate the icons sprites
$sprites_file: sprite-url( $icons_sprite );
$sprites2x_file: sprties-url( $icons_sprite2x );

$sprites_url: url( "images/" + sprite-path( $icons_sprite ) );
$sprites2x_url: url( "images/" + sprite-path( $icons_sprite2x ) );

// list with theme icons file names (found in icons and icons@2x folders)
$theme_icons: ( "checkmark", "star" );

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

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

// Icons
//--------------------------------------------//
@mixin sprite_icon( $name, $sprite ) {
    
    @include sprite-dimensions( $sprite, $name );
    background-position: sprite-position( $sprite, $name );
}

@mixin retina_sprite_icon( $name, $sprite ) {
    
    $pos: sprite-position( $sprite, $name );
    background-position: nth( $pos, 1 ) nth( $pos, 2 ) / 2;
    @include background-size( ceil( image-width( sprite-path( $sprite ) ) / 2 ) auto );
}

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

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

/*! =Icons 
-------------------------------------------------------------- */
@if ( length( $theme_icons ) > 0 ) {

    .icon {
        display: inline-block;
        background: $sprites_url no-repeat;
    }
                
    @each $icon in $theme_icons {
        
        .#{ "icon--" + $icon } {
            
            @include sprite_icon( $icon, $icons_sprite );
        }
    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) {

        .icon {
            background: $sprites2x_url;
        }

        @each $icon in $theme_icons {
            
            .#{ "icon--" + $icon } {

                @include retina_sprite_icon( $icon, $icons_sprite2x );
            }
        }
    }

}

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

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

1	<i class="icon icon--star"></i>

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

@import "compass";

@import "vars";
@import "mixins";
@import "theme_info";

// Base 
@import "base/normalize";

// Helpers 
@import "helpers";

// Modules
@import "modules/icons";

// States
@import "states/media_queries";

Заключение

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

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