Препроцессоры CSS в WordPress — LESS + CodeKit

Содержание

Что я использую и почему
LESS
Использование CodeKit
- Конфигурирование проекта
Заключение

В первой части этой серии статей я дал краткий обзор популярных CSS-препроцессоров LESS и SASS. Я также рассказал о некоторых фреймворках, в которых они используются.

Во второй части мы более глубоко погрузимся в LESS и поговорим о тех частях языка, которые я использую чаще всего. Я также планирую показать вам, как начать использовать его с CodeKit.

Что я использую и почему

Лично я использую LESS для большинства проектов WordPress. Я провожу много времени, работая с темой Standard, а она использует Bootstrap в качестве своего фреймворка.

Поскольку Bootstrap использует LESS для компиляции CSS, я научился использовать его файлы .less для внесения изменений. Но я знаю других веб-дизайнеров и разработчиков, которые предпочитают использовать Foundation, а поскольку Foundation использует SASS, они научились использовать его вместо Бутстрапа и LESS.

Я недавно начал работать над другим веб-проектом, в котором используется SASS, и благодаря моему опыту работы с LESS мне было относительно легко во всем разобраться.

Напоминаю, что на сайте уже есть ряд полезных руководств по WordPress:

LESS

Взглянем на препроцессор LESS более внимательно и немного разберемся из чего он состоит.

Переменные

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

Вот пример:

// Variables
@red: #ff0000;
@green: #00ff00;
@blue: #0000ff;
 
// Styling
 
// Links
a { color: @blue; }
a:visited { color: @blue; }

После работы компилятора вы увидите вот это:

a { color: #0000ff; }
a:visited { color: #0000ff; }

Если вы хотите изменить цвет обоих стилей ссылок, то вам просто нужно изменить переменную:

@blue

И вместо:

#0000ff

Написать, например:

#0000a4

Вы вносите изменение в одном месте, перекомпилируете, и вы изменили все экземпляры этой переменной во всем файле.

Другим отличным способом использования этих переменных было бы использование более семантического именования, например:

@primaryColor

И вот так:

@secondaryColor

Затем вы можете использовать эти переменные во всем коде. Когда ваш дизайнер захочет использовать новые цвета, вы можете просто изменить их один раз в переменных, перекомпилировать, и всё!

Вложения

Вложенность используется так же, как вложенность логики в блоке if/else в PHP или JavaScript: Вы устанавливаете селектор более высокого уровня, например .post, а затем размещаете внутри него другие селекторы. Это избавит вас от необходимости многократно набирать .post перед другими селекторами, например, так:

// Post
.post {
    padding: 20px;
    .post-header {
        margin: 20px 0;
    }
}

Примечание редактора. Можно также применить термин из программирования — наследование, но на мой взгляд — наследование является более широким понятием.

Как итог, код выше скомпилируется вот в это:

.post { padding: 20px; }
.post .post-header { margin: 20px 0; }

Вы также можете использовать & для объединения селекторов. В качестве примера можно привести ситуацию, когда вы хотите выбрать конкретные виджеты в боковой панели. Допустим, вы хотите по-разному оформить цвет фона виджетов Recent Posts и Recent Comments. Вы можете сделать следующее в LESS:

.widget {
    padding: 20px;
    &.widget_recent_entries {
        background-color: white;
    }
    &.widget_recent_comments {
        background-color: black;
    }
}

В результате получится следующее:

.widget { padding: 20px; }
.widget.widget_recent_entries { background-color: white; }
.widget.widget_recent_comments { background-color: black; }

Вы также можете использовать его для псевдоклассов :hover, :active, :visited, :before и :after.

// Links
a {
    color: blue;
    &:hover {
        color: red;
    }
    &:visited {
        color: red;
    }
}

Это скомпилируется следующим образом:

a { color: blue; }
a:hover { color: red; }
a:visited { color: red; }

Миксины

Миксины — это несколько атрибутов стиля, которые вы хотите сгруппировать вместе. Отличный пример — атрибуты, которые различаются в разных браузерах, например, радиус границы.

Вместо того чтобы запоминать каждый из них, вы можете вызвать свой миксин, и он предоставит каждый атрибут за вас. Вот пример:

// Mixin
.border-radius {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
// Widget
.widget {
    .border-radius;
}

Это скомпилируется следующим образом:

.widget {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

[yellow]Внимание! Если вы в примере выше после .border-radius поставите пустые скобки (), то стили этого класса не отразятся в итоговом файле CSS, но в классе .widget данные параметры пропишутся.[/yellow]

Что если вы хотите использовать радиус границы несколько раз в файле .less, но для каждого из них нужны разные значения? Тогда вы можете использовать параметрический миксин.

Это просто означает, что вы можете повторно использовать миксин и передать ему аргумент для использования. Пример:

// Mixin
.border-radius (@radius: 4px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
 
// Widget
.widget {
    .border-radius();
}
 
// Post
.post {
    .border-radius(8px);
}

Это скомпилируется следующим образом:

.widget {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.post {
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

Собираем все вместе

Пример одновременного использования переменных, вложенности и миксинов:

// Variables
@widget-recent-posts-border-radius: 4px;
@widget-recent-posts-background-color: white;
@widget-recent-posts-link-color: @blue;
 
@widget-recent-comments-border-radius: 8px;
@widget-recent-comments-background-color: black;
@widget-recent-comments-link-color: @red;
 
// Colors
@blue: #0000ff;
@red: #ff0000;
 
// Mixins
.border-radius (@radius: 4px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
 
// Widgets
.widget {
    &.widget_recent_entries {
        background-color: @widget-recent-posts-background-color;
        .border-radius(@widget-recent-posts-border-radius);
        ul li a {
            color: @widget-recent-posts-link-color;
        }
    &.widget_recent_comments {
        background-color: @widget-recent-comments-background-color;
        .border-radius(@widget-recent-comments-border-radius);
        ul li a {
            color: @widget-recent-comments-link-color;
        }
    }
}

Все это можно скомпилировать в следующий код CSS:

.widget.wiget_recent_entries {
    background-color: white;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.widget.widget_recent_entries ul li a { color: #0000ff; }
.widget.wiget_recent_comments {
    background-color: black;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.widget.widget_recent_entries ul li a { color: #ff0000; }

Использование CodeKit

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

Примечание редактора. Для формирования CSS файлов на лету при изменении файлов LESS можно использовать программу для десктопа Koala.

После этого CodeKit автоматически просканирует все файлы в этой папке, а затем сгруппирует их по следующим категориям:

Стили
Скрипты
Страницы
Изображения

Препроцессоры CSS в WordPress - LESS + CodeKit

Конфигурирование проекта

Итак, вы импортировали файлы проекта. Далее нам нужно задать путь вывода файлов .less. Я бы посоветовал иметь папку css и папку less внутри нее. Вы должны убедиться, что все ваши файлы в папке less указывают на ваш файл style.less.

Переключитесь на представление «Стили». Мы хотим, чтобы файл style.less был скомпилирован в корневую папку вашей темы как style.css. Для этого щелкните правой кнопкой мыши на файле style.less и выберите «Set output path…». Откроется браузер файлов.

Затем щелкните на текстовом вводе Output filename and extension. После этого может автоматически появиться файл style.css. Если этого не произойдет, то вам нужно будет ввести style.css. И наконец, нажмите кнопку Select to save.

Мы почти закончили! Далее нам нужно выбрать настройки компиляции. Вы увидите экран настроек компиляции, когда нажмете на файл .less. У нас есть три доступных стиля вывода:

Обычный
Минифицированный
Сжатый (YUI)

Выберите один из вышеперечисленных вариантов и нажмите «Compile». Вы должны получить уведомление о том, что ваш файл style.less скомпилирован. Если весь синтаксис верен, компиляция пройдет успешно. Если есть какие-либо ошибки, вы перейдете к просмотру журнала и получите номер строки и объяснение ошибки.

Если все скомпилировано правильно, вы сможете открыть файл style.css и увидеть результат. По мере редактирования и сохранения файлов .less CodeKit будет автоматически перекомпилировать их. Все аналогичные программы, типа Koala, работают по схожему принципу.

[red]Внимание! Убедитесь, что вы не внесли никаких изменений в файл style.css, потому что после перекомпиляции файлов .less ваши изменения будут отменены.[/red]

Заключение

Теперь мы более глубоко изучили LESS и разобрали несколько популярных функций. Я объяснил несколько причин, почему лично я решил использовать LESS в своих проектах WordPress и как использовать CodeKit для компиляции всех моих файлов.

В следующей статье я более подробно расскажу о том, как структурировать файлы ‘.less’ и связать их воедино.

Перевод материала Джейсонd Брэдли с сайта tutsplus.com.

Опубликовано 13 декабря 2022 в 00:36 (обновлено 4 февраля 2023 в 16:29)

13 декабря 2022 в 00:36

HTML и CSS, WordPress