Как новый дизайнер тем WordPress, вы быстро узнаете, как сложно поддерживать длинные файлы CSS, сохраняя их организованность, масштабируемость и читабельность. Вы также узнаете, что многие дизайнеры и front-end разработчики рекомендуют использовать язык препроцессора CSS, такой как Sass или LESS. Но что это за штуки?? и как вам начать с ними работать?? Эта статья — введение в Sass для начинающих дизайнеров тем WordPress. Мы расскажем вам, что такое CSS-препроцессор, зачем он нужен, как его установить и начать использовать прямо сейчас.
Что такое Sass?
CSS, который мы используем, был разработан как простой в использовании язык стилей. Однако веб развивается, и дизайнерам необходим язык таблиц стилей, который позволяет им делать больше с меньшими затратами времени и сил. Языки препроцессоров CSS, такие как Sass, позволяют использовать возможности, которые в настоящее время недоступны в CSS, такие как использование переменных, основных математических операторов, вложенность, миксины и т.д.
Он очень похож на PHP, который является языком препроцессора, выполняющим скрипт на сервере и генерирующим HTML-вывод. Аналогично, Sass выполняет препроцессирование .scss файлы для генерации CSS файлов, которые могут быть использованы браузерами.
Начиная с версии 3.8, Стили области администратора WordPress были перенесены на использование Sass для разработки. Многие магазины и разработчики тем WordPress уже используют Sass для ускорения процесса разработки.
Начало работы с Sass для разработки тем WordPress
Большинство дизайнеров тем используют локальную среду разработки для работы над своими темами, прежде чем развернуть их в среде постановки или на живом сервере. Поскольку Sass — это язык препроцессора, вам нужно будет установить его в локальной среде разработки.
Первое, что вам нужно сделать, это установить Sass. Его можно использовать как инструмент командной строки, но есть также несколько хороших GUI-приложений для Sass. Мы рекомендуем использовать Koala — бесплатное приложение с открытым исходным кодом, доступное для Mac, Windows и Linux.
Для этой статьи вам нужно будет создать пустую тему. Просто создайте новую папку в /wp-content/themes/ . Вы можете назвать ее ‘mytheme’ или как угодно. Внутри папки с пустой темой создайте еще одну папку и назовите ее stylesheets.
В папке stylesheets необходимо создать стиль.scss файл с помощью текстового редактора, например, Блокнота.
Теперь вам нужно открыть Koala и нажать на значок плюса, чтобы добавить новый проект. Далее, найдите каталог вашей темы и добавьте его в качестве проекта. Вы заметите, что Koala автоматически найдет файл Sass в вашей директории stylesheets и отобразит его.
Щелкните правой кнопкой мыши на вашем файле Sass и выберите Установить путь вывода опция. Теперь выберите корень каталога вашей темы, например, /wp-content/themes/mytheme/ и нажмите клавишу enter. Koala теперь создаст выходной файл CSS в директории вашей темы. Чтобы проверить это, вам нужно открыть стиль файла Sass.scss в текстовом редакторе типа Блокнот и добавьте этот код:
$fonts: arial, verdana, sans-serif; body
Теперь нужно сохранить изменения и вернуться в Koala. Щелкните правой кнопкой мыши на вашем Sass-файле, и боковая панель сдвинется вправо. Чтобы скомпилировать ваш Sass-файл, просто нажмите на кнопку ‘Compile’ кнопку. Вы можете увидеть результаты, открыв стиль.css файл в директории вашей темы, и он будет иметь обработанный CSS следующим образом:
body
Обратите внимание, что мы определили переменную $fonts в нашем Sass файле. Теперь, когда нам нужно добавить семейство шрифтов, нам не нужно снова вводить названия всех шрифтов. Мы можем просто использовать $fonts .
Какие еще суперспособности Sass привносит в CSS?
Sass невероятно мощный, обратно совместимый и очень простой в освоении. Как мы уже упоминали ранее, вы можете создавать переменные, вложенность, миксины, импорт, партиции, математические и логические операторы и т.д. Сейчас мы покажем вам несколько примеров, и вы сможете опробовать их на своей теме WordPress.
Управление несколькими таблицами стилей
Одна из распространенных проблем, с которой вы столкнетесь как дизайнер тем WordPress, — большие таблицы стилей с большим количеством секций. Вы, вероятно, будете часто прокручивать страницу вверх и вниз, чтобы исправить что-то во время работы над вашей темой. Используя Sass, вы можете импортировать несколько файлов в вашу основную таблицу стилей и вывести один файл CSS для вашей темы.
Что насчет CSS @import?
Проблема с использованием @import в вашем CSS-файле заключается в том, что каждый раз, когда вы добавляете @import, ваш CSS-файл делает еще один HTTP-запрос к серверу. Это влияет на время загрузки страницы, что не очень хорошо для вашего проекта. С другой стороны, когда вы используете @import в Sass, он будет включать файлы в ваш Sass файл и подавать их все в одном CSS файле для браузеров.
Чтобы научиться использовать @import в Sass, сначала нужно создать сброс.scss файл в директории стилей вашей темы и вставьте в него этот код.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Лицензия: none (public domain) */ 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: 0; font-size: 100%; font: inherit; vertical-align: baseline; >/* HTML5 display-role reset для старых браузеров */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >body < line-height: 1; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >таблица
Теперь вам нужно открыть ваш основной стиль.scss файл и добавьте эту строку там, где вы хотите, чтобы файл сброса был импортирован:
@import 'reset';
Обратите внимание, что вам не нужно вводить полное имя файла. Чтобы скомпилировать это, вам нужно открыть Koala и снова нажать кнопку компиляции. Теперь откройте основной стиль вашей темы.css файл, и вы увидите, что ваш reset css включен в него.
Вложенность в Sass
В отличие от HTML, CSS не является вложенным языком. Sass позволяет создавать вложенные файлы, которыми легко управлять и работать с ними. Например, вы можете вложить все элементы для раздела под селектор статьи. Как дизайнер тем WordPress, это позволит вам работать над разными разделами и легко стилизовать каждый элемент. Чтобы увидеть nestin в действии, добавьте это в свой стиль.scss файл:
.entry-content < p < font-size:12px; line-height:150%; >ul < line-height:150%; >a:link, a:visited, a:active < text-decoration:none; color: #ff6633; >>
После обработки он выведет следующий CSS:
.entry-content p < font-size: 12px; line-height: 150%; >.entry-content ul < line-height: 150%; >.entry-content a:link, .entry-content a:visited, .entry-content a:active
Будучи дизайнером темы, вы будете создавать различный внешний вид и оформление для виджетов, постов, меню навигации, заголовка и т.д. Использование nestin в Sass делает его хорошо структурированным, и вам не придется писать одни и те же классы, селекторы и идентификаторы снова и снова.
Использование миксинов в Sass
Иногда вам нужно повторно использовать некоторые CSS в вашем проекте, даже если правила стиля будут одинаковыми, потому что вы будете использовать их в разных селекторах и классах. Вот где пригодятся миксины. Добавьте миксин в свой стиль.scss-файл:
@mixin hide-text
Этот миксин, по сути, скрывает от отображения некоторый текст. Вот пример того, как вы можете использовать этот миксин, чтобы скрыть текст для вашего логотипа:
.логотип
Обратите внимание, что вам нужно использовать @include, чтобы добавить миксин. После обработки он сгенерирует следующий CSS:
.логотип
Миксины также очень полезны при работе с префиксами поставщиков. При добавлении значений непрозрачности или радиуса границы использование миксинов может сэкономить вам много времени. Посмотрите на этот пример, где мы добавили миксин для добавления радиуса границы.
@mixin border-radius($radius) < -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; >.bigbutton < @include border-radius(10px); >.маленькая кнопка
После компиляции будет сгенерирован следующий CSS:
.bigbutton < -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; >.маленькая кнопка
Надеемся, что эта статья вызвала у вас интерес к Sass для разработки тем WordPress. Многие дизайнеры тем WordPress уже используют его. Некоторые утверждают, что в будущем все CSS будут проходить предварительную обработку, и разработчикам тем WordPress необходимо повысить свою квалификацию. Дайте нам знать, что вы думаете об использовании языка препроцессора CSS, такого как Sass, для разработки темы WordPress, оставив комментарий ниже.
Источник: www.wpbeginner.com