В первой части серии я дал краткий обзор популярных препроцессоров LESS и SASS . Я также рассмотрел рамки, с которыми они обычно связаны.
Во второй части серии я глубоко погрузился в LESS и подробно описал некоторые его особенности. Мы рассмотрели переменные, вложенность и миксины.
В этой части серии я расскажу, как логически структурировать ваши файлы .less . Я также расскажу, как соединить их все с помощью импорта, и, наконец, быстро охватить увеличение.
Использование LESS для создания темы «Двадцать двенадцать детей»
Мы собираемся создать дочернюю тему для темы Twenty Twelve по умолчанию. Для тех из вас, кто не знаком с созданием дочерних тем, единственное, что нам нужно для создания дочерней темы, — это файл style.css . Для получения дополнительной информации посетите Кодекс WordPress .
Сначала мы хотим перейти к папке тем внутри wp-контента . Вы должны увидеть двадцать двенадцать папок внутри здесь. Далее мы собираемся создать новую папку и назовите ее lessbuilt . Откройте эту папку.
Внутри нашей новой папки lessbuilt мы создадим папку и назовем ее css . Откройте эту папку.
Внутри папки css создайте еще одну папку с именем less, а затем откройте ее. Внутри этой папки мы хотим создать новый файл style.less . Откройте это.
Для выборочной проверки убедитесь, что у вас есть следующий путь к файлу style.less :
wp-content/themes/lessbuilt/css/less/style.less
Создание файловой структуры LESS
Теперь, когда у нас есть меньше созданной папки. Мы будем добавлять все наши файлы .less в эту папку.
style.less
Первое, что мы хотим сделать в нашем файле style.less, это добавить код, который позволит нам указать, что мы создаем дочернюю тему. Пожалуйста, добавьте следующее:
|
01
02
03
04
05
06
07
08
09
10
11
|
/*
Theme Name: Less Built
Theme URI: http://wp.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 .
Откройте новый файл и вставьте следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
// 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 . Откройте этот файл и вставьте в него следующее:
|
01
02
03
04
05
06
07
08
09
10
|
// mixins.less
.links(@link-color: @blue, @link-color-hover: @blue-dark) {
a {
color: @link-color;
&:hover {
color: @link-color-hover;
}
}
}
|
misc.less
Следующий файл будет содержать различные стили, такие как тело и ссылки. Создайте файл misc.less и вставьте следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
// misc.less
body {
background-color: @body-background-color;
color: @body-color;
}
.site {
background-color: @content-background-color;
}
.links();
|
navigation.less
Рекомендуется сохранить все стили навигации, чтобы мы могли быстро узнать, куда идти, чтобы редактировать наши меню.
Создайте файл navigation.less и добавьте в него следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
// 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.less и добавьте в него следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
// 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 и добавьте в него следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
// 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 и добавьте следующее:
|
1
2
3
4
5
6
7
|
// pages.less
.entry-header {
.entry-title {
color: @entry-title-color;
}
}
|
sidebar.less
Я хотел добавить границу слева от боковой панели, поэтому я собираюсь добавить это в файл sidebar.less . Создайте этот файл и добавьте следующее:
|
1
2
3
4
5
6
|
// sidebar.less
#secondary {
border-left: 1px solid @border-color;
padding-left: 20px;
}
|
widgets.less
Мы хотим сделать заголовки виджетов белыми и сделать так, чтобы ссылки в наших виджетах соответствовали другим ссылкам в нашей дочерней теме. Я также хочу изменить цвета формы поиска.
Рекомендуется поместить любой стиль для виджетов в widgets.less и сохранить стиль для контейнера вокруг них в sidebar.less .
Создайте файл widgets.less и добавьте в него следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
// 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 и добавьте в него следующее:
|
1
2
3
4
5
|
// footer.less
footer[role=»contentinfo»] {
.links();
}
|
Собираем все вместе
Таким образом, мы создали все наши отдельные файлы .less, чтобы разбить наши изменения стиля в логическую структуру. Вы должны были видеть, что, когда мы создавали наши файлы, мы использовали переменные, которые мы создали в variables.less во всех наших других файлах .less . Мы также часто использовали наш миксин .links () из mixins.less .
Мы собираемся соединить все эти файлы .less вместе с помощью импорта.
импорт
Импорт в CSS и LESS аналогичен импорту в других языках. Вы говорите своему компилятору, что хотите, чтобы ваш текущий файл знал и использовал другие файлы. Это похоже на импорт библиотеки или фреймворка, который вы используете в .NET, Ruby gems и т. Д.
Синтаксис для импорта файла с LESS аналогичен синтаксису CSS. Поскольку все наши файлы .less находятся в одной папке, мы будем использовать следующее:
|
1
|
@import «filename.less»;
|
Это сообщит нашему LESS-компилятору, что когда вы компилируете этот файл, вы также должны использовать и этот другой файл.
В нашем файле style.less мы хотим добавить импорт для каждого из файлов .less , которые мы создали. Это также гарантирует, что любой файл .less, который вы импортируете в style.less, также будет подключен.
Например, если мы импортируем variables.less и widgets.less в нашем файле style.less , переменные, которые мы определили в variables.less, будут доступны в widgets.less .
Окончательный файл style.css
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
/*
Theme Name: Less Built
Theme URI: http://wp.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 .
Мы рассмотрели, как настроить вывод нашего .less файла в предыдущем посте.
Завершение с минификацией
Преимущество использования LESS для создания и компиляции вашего CSS заключается в том, что вы можете выбирать, в какой формат вы хотите компилировать. Это означает, что вы можете скомпилировать его в обычную форму или минимизировать ваши файлы.
Определенно рекомендуется минимизировать все файлы .css вашего сайта. Чем меньше файл, тем быстрее будет загружаться ваш сайт. Вам нужен наименьший размер файла, потому что каждая страница не будет загружаться и просматриваться пользователем до тех пор, пока не будут загружены файлы .css . Скорость загрузки вашей страницы также влияет на ваш SEO.
С помощью CodeKit изменить настройку вывода для минимизации так же просто, как изменить стиль вывода на минимизированный. Теперь каждый раз, когда вы вносите изменения в любой из ваших файлов .less, CodeKit автоматически их компилирует и преобразует в файл style.css вашей дочерней темы.
Вывод
Я ознакомился с рекомендациями по структурированию ваших файлов .less в вашей теме или дочерней теме. Я также говорил о структуре папок и о том, где размещать ваши файлы .less .
Я рассказал вам о создании всех файлов .less и рассказал о том, как соединить их все с вашим файлом style.less с помощью импорта. Наконец, я говорил о том, где установить путь вывода вашего файла style.less и как заставить CodeKit минимизировать ваши файлы .less при его компиляции.
Я также добавил менее встроенную дочернюю тему в GitHub, чтобы вы могли ее разветвить или скачать .