Препроцессоры CSS в WordPress — LESS-структуры

Содержание

Использование LESS для создания дочерней темы Twenty Twelve
Создание структуры файла LESS
Собираем все вместе
- Импорты
- Итоговый файл style.css
Минификация
Заключение

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

В этой части серии поговорим о том, как логически структурировать файлы .less и расскажем о том, как соединить их все с помощью импорта.

Использование LESS для создания дочерней темы Twenty Twelve

Мы будем создавать дочернюю тему для старой стандартной темы Twenty Twelve. Но все методы работают с любыми темам, а не только базовыми WordPress. Для тех из вас, кто не знаком с созданием дочерних тем, единственное, что нам нужно для создания дочерней темы, это файл style.css. Для получения дополнительной информации посетите WordPress Codex.

Сначала перейдите в папку themes внутри wp-content. Здесь вы должны увидеть папку twentytwelve. Далее мы создадим новую папку и назовем ее lessbuilt. Это будет название нашей новой дочерней темы соответственно имени папки. Откройте эту папку.

Внутри нашей новой папки lessbuilt мы создадим папку и назовем ее css. Откройте эту папку.

Внутри папки css создайте еще одну папку с именем less и также откройте ее. Внутри этой папки мы создадим новый файл style.less. Откройте его.

Для проверки убедитесь, что путь к файлу style.less следующий:

wp-content/themes/lessbuilt/css/less/style.less

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

Создание структуры файла LESS

Теперь у нас есть созданная папка less. Мы будем добавлять все наши файлы .less в эту папку.

style.less

Первое, что мы хотим сделать в нашем файле style.less, это добавить код, который позволит нам обозначить, что мы создаем дочернюю тему. Пожалуйста, добавьте следующее:

/*
Theme Name:     Less Built
Theme URI:      https://code.tutsplus.com
Description:    Child theme for the Twenty Twelve theme
Author:         Jason Bradley
Author URI:     http://everchangingmedia.com
Template:       twentytwelve
Version:        0.1.0
*/
 
@import url("../twentytwelve/style.css");

Это все, что нам нужно для начала работы. Далее мы создадим другие файлы .less, а затем свяжем их все вместе в style.less.

variables.less

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

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

// variables.less
 
// Colors
@white: #fff;
@gray: #666;
@gray-dark: #333;
@gray-light: #eee;
@blue: #4d8b97;
@blue-dark: #335c64;
 
// Content
@body-background-color: @gray;
@body-color: @gray-light;
@content-background-color: @gray-dark;
 
// Header
@site-title-color: @white;
@site-title-color-hover: @blue;
@site-description-color: @gray-light;
 
// Links
@links-color: @blue;
@links-color-hover: @blue-dark;
 
// Navigation
@menu-items-color: @gray-light;
@menu-items-color-hover: @blue;
@menu-items-color-active: @white;
 
// Posts
@entry-title-color: @white;
@border-color: @gray;
 
// Widgets
@search-form-background-color: @gray;
@search-form-border-color: @gray;
@search-form-text-color: @white;

mixins.less

Следующий файл, который мы создадим, — это файл mixins.less. Большинство изменений, которые мы будем вносить, касаются цветов ссылок. Я собираюсь создать миксин, который принимает цвет ссылки и цвет при наведении на ссылку. Он будет возвращать стиль в зависимости от того, что ему передано.

Сначала создайте файл mixins.less. Откройте этот файл и вставьте в него следующее:

// mixins.less
 
.links(@link-color: @blue, @link-color-hover: @blue-dark) {
    a {
        color: @link-color;
        &:hover {
            color: @link-color-hover;
        }
    }
}

misc.less

Следующий файл будет содержать различные стили, такие как body и links. Создайте файл misc.less и вставьте в него следующее:

// misc.less
 
body {
    background-color: @body-background-color;
    color: @body-color;
}
 
.site {
    background-color: @content-background-color;
}
 
.links();

Примечание. Сокращение misc. означает в переводе на русский язык — разное, остальное. Происходит от английского слова — miscellaneous.

navigation.less

Предлагается хранить все стили навигации в едином месте, чтобы знали куда идти, чтобы редактировать все наши меню.

Создайте файл navigation.less и добавьте в него следующее:

// navigation.less
 
.main-navigation {
    li {
        .links(@menu-items-color, @menu-items-color-hover);
    }
    .current-menu-item,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_ancestor {
    a {
        color: @menu-items-color-active;
    }
}

header.less

Далее мы добавим стили для названия и описания сайта в header. Создайте файл header.less и добавьте в него следующее:

// header.less
 
.site-title a {
    color: @site-title-color;
}
.site-header {
    h1, h2 {
        .links(@site-title-color, @site-title-color-hover);
    }
}
.site-header {
    h2 {
        color: @site-description-color;
    }
}

posts.less

Далее мы хотим добавить некоторые стили для наших статей (постов). Мы изменим цвет заголовка и цвет ссылок в заголовке и нижнем колонтитуле.

Создайте файл posts.less и добавьте в него следующее:

// posts.less
 
.site-content {
    article {
        border-bottom: 4px double @border-color;
    }
}
.entry-header {
    .entry-title {
        .links(@entry-title-color);
    }
}
.entry-header, .entry-meta {
    .links();
}

pages.less

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

Создайте файл pages.less и добавьте в него следующее:

// pages.less
 
.entry-header {
    .entry-title {
        color: @entry-title-color;
    }
}

sidebar.less

Я хотел добавить рамку слева от боковой панели, поэтому я собираюсь добавить ее в файл sidebar.less. Создайте этот файл и добавьте следующее:

// sidebar.less
 
#secondary {
    border-left: 1px solid @border-color;
    padding-left: 20px;
}

widgets.less

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

Рекомендуется поместить все стили для виджетов в файл widgets.less и оставить стили для контейнера вокруг них в файле sidebar.less.

Создайте файл widgets.less и добавьте в него следующее:

// widgets.less
 
.widget-area{
    .widget {
        .widget-title {
            color: @gray-light;
        }
        .links();
    }
}
 
// Search form
#s, #searchsubmit {
    background: @search-form-background-color;
    border-color: @search-form-border-color;
    color: @white;
}

footer.less

Последний файл, который мы создадим — footer.less. Он будет содержать все стили для подвала нашей дочерней темы.

Создайте файл footer.less и добавьте в него следующее:

// footer.less
 
footer[role="contentinfo"] {
    .links();
}

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

Итак, мы создали все наши отдельные файлы .less, чтобы разбить наши изменения стилей на логичную структуру. Вы должны были заметить, что при создании файлов мы использовали переменные, созданные в variables.less, во всех остальных файлах .less. Мы также часто использовали миксин .links() из файла mixins.less.

Способ, которым мы собираемся соединить все эти файлы .less вместе, — это использование импорта — import.

Импорты

Импорт в CSS и LESS такой же, как и в других языках. Вы сообщаете компилятору, что хотите, чтобы ваш текущий файл знал о других файлах и использовал их. Это похоже на импорт библиотеки или фреймворка, который вы используете в .NET, Ruby и т.д.

Синтаксис для импорта файла в LESS такой же, как и в CSS. Поскольку все наши файлы .less находятся в одной папке, мы будем использовать следующее:

@import "filename.less";

Это скажет нашему компилятору LESS, что при компиляции этого файла следует использовать и другой файл.

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

Например, если мы импортируем variables.less и widgets.less в наш файл style.less, переменные, которые мы определили в variables.less, будут доступны в widgets.less.

Итоговый файл style.css

/*
Theme Name:     Less Built
Theme URI:      https://code.tutsplus.com
Description:    Child theme for the Twenty Twelve theme
Author:         Jason Bradley
Author URI:     http://everchangingmedia.com
Template:       twentytwelve
Version:        0.1.0
*/
 
// Import parent theme styles
@import url("../twentytwelve/style.css");
 
/*
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ CONTENTS /\/\/\/\/\/\/\/\/\/\/\/\/\/\//\/\/\/\
 
  1. Miscellanous
    - Variables
    - Mixins
    - Misc
  2. Navigation
  3. Header
  4. Posts
  5. Pages
  6. Sidebar
  7. Widgets
  8. Footer
*/
 
/* ---------------------------------------------------------------------- 1. Miscellanous */
 
// Variables
@import "variables.less";
 
// Mixins
@import "mixins.less";
 
// Misc
@import "misc.less";
 
/* ---------------------------------------------------------------------- 2. Navigation */
 
@import "navigation.less";
 
/* ---------------------------------------------------------------------- 3. Header */
 
@import "header.less";
 
/* ---------------------------------------------------------------------- 4. Posts */
 
@import "posts.less";
 
/* ---------------------------------------------------------------------- 5. Pages */
 
@import "pages.less";
 
/* ---------------------------------------------------------------------- 6. Sidebar */
 
@import "sidebar.less";
 
/* ---------------------------------------------------------------------- 7. Widgets */
 
@import "widgets.less";
 
/* ---------------------------------------------------------------------- 8. Footer */
 
@import "footer.less";

Когда мы создали все наши файлы .less и импортировали их в файл style.less, нам нужно установить путь вывода style.less в CodeKit. Напоминаю, что также вы можете использовать Koala, если работаете на локальном сервере.

Мы рассмотрели, как установить путь вывода нашего файла .less в предыдущей части.

Минификация

Замечательная особенность использования LESS для создания и компиляции CSS заключается в том, что вы можете выбирать, в какой формат компилировать. Это означает, что вы можете либо скомпилировать его в обычную форму, либо минифицировать файлы.

Определенно рекомендуется минифицировать все .css-файлы вашего сайта. Чем меньше файл, тем быстрее загружается ваш сайт. Вам нужен наименьший размер файла, потому что каждая страница не будет загружаться и отображаться пользователем до тех пор, пока не будут загружены .css-файлы. Скорость загрузки страницы также влияет на SEO.

С CodeKit изменить настройку вывода на минификацию (minify) достаточно просто, — нужно изменить стиль вывода на Minified. Теперь каждый раз, когда вы вносите изменения в любой из ваших .less файлов, CodeKit будет автоматически компилировать их и минифицировать в файл style.css вашей дочерней темы.

Заключение

Я рассмотрел лучшие методики структурирования файлов .less в вашей теме или дочерней теме. Я также рассказал о структуре папок и о том, где размещать файлы .less.

Я провел вас через создание всех файлов .less и рассказал о том, как подключить их к файлу style.less с помощью импорта. Наконец, я рассказал о том, как задать путь вывода файла style.less и как заставить CodeKit минифицировать файлы .less при компиляции.

Я также добавил дочернюю тему lessbuilt на GitHub, чтобы вы могли сделать форк или скачать ее.

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

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

13 декабря 2022 в 15:06

HTML и CSS, WordPress