Введение в Sass для новых дизайнеров тем WordPress

Как новый дизайнер тем WordPress, вы быстро узнаете, как сложно поддерживать длинные файлы CSS, сохраняя их организованность, масштабируемость и...

Как новый дизайнер тем 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 и отобразит его.

Добавление проекта в Koala

Щелкните правой кнопкой мыши на вашем файле 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

Оцените статью
Добавить комментарий