В качестве новичка в дизайне темах WordPress, у вас бы быстро появятся проблемы сохранения длинных CSS файлов, которые необходимо организовывать, масштабировать и делать читабельными. Вы также узнаете, что многие дизайнеры и фронтальные разработчики рекомендуют использовать язык CSS препроцессора как Sass или LESS. Но что они из себя представляют? и как надо начинать работать с ними? Эта статья представляет собой введение в Sass для новых дизайнеров тем WordPress.Мы расскажем вам, что такое CSS препроцессор, почему вам это нужно, и как установить и начать использовать его сразу.
Что такое Sass?
CSS, который мы используем был разработан, чтобы быть простым в использовании языка таблиц стилей. Однако веб претерпела изменения, и поэтому потребность дизайнеров иметь язык таблицы стилей, который позволяет им делать больше с меньшими затратами сил и времени. Языки CSS препроцессора, как Sass, позволяют использовать функции, которые в настоящее время не доступны в CSS, такие как использование переменных, основные математические операторы, Верстка, Mixins и т.д.
Он очень похож на PHP, который является язык препроцессор, который выполняет сценарий на сервере и генерирует вывод HTML. Кроме того, Sass производит предварительную обработку файлов .scss для создания файлов CSS, которые могут быть использованы браузерами.
Начиная с версии 3.8 , WordPress стили в админки были портированы для использования Sass. Есть много WordPress тематических магазинов и разработчиков, которые уже используют Sass, чтобы ускорить процесс их развития.
Начало работы с Sass для развития тем WordPress
Большинство тематических дизайнеров используют местную среду разработки, чтобы работать над своими темами перед развертыванием в промежуточной среды или живого сервера. Так как Sass это язык препроцессор, вам нужно будет установить его на локальной среде разработки.
Первое , что вам нужно сделать, это установить Sass. Он может быть использован в качестве инструмента командной строки, но есть и некоторые интересные приложения с графическим интерфейсом , доступные для Sass. Мы рекомендуем использовать Koala, который является бесплатным приложением с открытым исходным кодом доступный для Mac, Windows и Linux.
Ради этой статьи, вам нужно будет создать пустую тему. Просто создайте новую папку в /wp-content/themes/. Вы можете назвать его ‘MyThemes’ или что — нибудь другое. Внутри вашей пустой папки темы создайте другую папку и назовите его style.
В папке стилей, вам нужно создать файл style.scss с помощью текстового редактора, такого как Блокнот.
Теперь вам нужно открыть Koala и нажать на иконку плюс, чтобы добавить новый проект. Затем найдите свой каталог темы и добавьте его в свой проект. Вы заметите, что Коала автоматически найдет файл Sass в каталоге стилей и отобразит его.
Щелкните правой кнопкой мыши на файле Sass и выберите вариант Set Output Path. Теперь выберите корень вашего каталога темы, например, /wp-content/themes/mythemes/и нажмите кнопку ввода. Koala сгенерирует выходной CSS файл в каталоге темы. Чтобы проверить это необходимо открыть файл style.scss в текстовом редакторе как Блокнот и добавить этот код:
$fonts: arial, verdana, sans-serif;
body {
font-family:$fonts;
}
Теперь вам нужно сохранить изменения и вернуться к Koala. Щелкните правой кнопкой мыши на файле Sass, и боковая панель будет откроется справа.Для компиляции файла Sass просто нажмите на кнопку ‘Compile’. Вы можете увидеть результаты, открыв файл style.css в каталоге темы, и он будет иметь обработанный CSS следующим образом:
body {
font-family: arial, verdana, sans-serif; }
Обратите внимание, что мы определили переменную $fonts в нашем файле Sass. Теперь, когда нам нужно добавить семейство шрифтов нам не нужно снова вводить имена всех шрифтов. Мы можем просто использовать $fonts.
Какие еще сверхспособности Sass приносит в CSS?
Sass является невероятно мощным, обратная совместимость, и очень проста в освоении. Как мы уже упоминали ранее, вы можете создавать переменные, nesting, mixins, импорт, математические и логические операторы и т.д. Теперь мы покажем вам несколько примеров, и вы можете попробовать их на вашей теме WordPress.
Управление несколькими таблицами стилей
Одна общая проблема, с которой вы столкнетесь при разработки темы в WordPress, это большие таблицы стилей с большим количеством секций. Вы, вероятно, будете много прокручивать вверх и вниз, чтобы исправить вещи во время работы на вашей теме. Используя Sass, вы можете импортировать несколько файлов в основной таблице стилей и вывода одного файла CSS для вашей темы.
Как насчет CSS @import?
Проблема с использованием @import в файле CSS является то, что каждый раз, когда вы добавляете @import, файл CSS делает еще один запрос HTTP на сервер. Это влияет на ваше время загрузки страницы, которая не подходит для вашего проекта. С другой стороны, когда вы используете @import в Sass, он будет включать в себя файлы в файле Sass и обслуживать их все в одном файле CSS для браузеров.
Чтобы узнать, как использовать @import в Sass, сначала нужно создать файл reset.scss в директории стилей вашей темы и вставьте этот код в него.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 1;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 дисплей сброс для старых браузеров */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 2;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Теперь вам нужно открыть свой основной файл style.scss и добавить эту строку, где вы хотите вставить файл для импорта:
@import 'reset';
Обратите внимание на то, что вам не нужно вводить полное имя файла. Для компиляции этого вам необходимо открыть Koala и нажать на кнопку компиляции снова. Теперь откройте главный файл style.css в вашей теме, и вы увидите ваш файл reset CSS включен в него.
Nestin в Sass
В отличие от HTML, CSS не является вложенным языком. Sass позволяет создавать вложенные файлы, которыми легко управлять и работать. Например, вы можете вложить все элементы для раздела <article> под селектором статьи. Для дизайнеров тем в WordPress, это позволяет легко работать на разных разделах и стиля каждого элемента. Чтобы увидеть Nestin в действии, добавьте это в ваш файл style.scss:
.entry-content {
p {
font-size:14px;
line-height:140%;
}
ul {
line-height:140%;
}
a:link, a:visited, a:active {
text-decoration:none;
color: #ff6613;
}
}
После обработки он выведет следующий CSS:
.entry-content p {
font-size: 14px;
line-height: 140%; }
.entry-content ul {
line-height: 140%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
text-decoration: none;
color: #ff6613; }
В качестве дизайнера темы, вы будете проектировать другой внешний вид для виджетов, постов, меню навигации, заголовков и т.д. Использование Nestin в Sass делает его хорошо структурированным, и вы не должны писать одни и те же классы, селекторы и идентификаторы снова.
Использование Mixins в Sass
Иногда вам нужно будет повторно использовать некоторые CSS вне вашего проекта, даже если правила стиля будет таким же, потому что вы будете использовать их для разных селекторов и классов. Вот где Mixins пригодится. Он позволяет добавить mixin в файл style.scss:
@mixin hide-texts{
overflow: hidden;
text-indent: -8000px;
display: block;
}
Это в основном Mixin скрывает некоторый текст для отображения. Вот пример того, как можно использовать Mixins, чтобы скрыть текст для вашего логотипа:
.logo{
background: url("my-logo.png");
height:150px;
width:250px;
@include hide-texts;
}
Обратите внимание на то, что вам нужно использовать @include для добавления Mixins. После обработки он будет генерировать следующий CSS:
.logo {
background: url("my-logo.png");
height: 150px;
width: 250px;
overflow: hidden;
text-indent: -8000px;
display: block; }
Mixins также очень полезен с префиксами. При добавлении значения непрозрачности или радиус границы, используя Mixins вы можете сэкономить много времени. Посмотрите на этот пример, где мы добавили радиус границы.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.largebutton { @include border-radius(11px); }
.smallbutton { @include border-radius(6px); }
После компиляции, он сгенерирует следующий CSS:
.largebutton {
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
-ms-border-radius: 11px;
-o-border-radius: 11px;
border-radius: 11px; }
.smallbutton {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px; }
Мы надеемся, что эта статья помогла понять важность применения Sass для развития тем в WordPress. Многие дизайнеры тем WordPress уже используют его. Некоторые считают, что в будущем CSS станет препроцессором. Дайте нам знать, что вы думаете об использовании языка CSS препроцессора как Sass для развития темы WordPress, оставив комментарий ниже.