Во всякой стране молодое поколение — всегда иностранцы (А. Сталь).

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 4,50 из 5)
Загрузка...

Статья опубликована: 21 октября 2016

Введение в Sass для дизайнеров тем в WordPress
В качестве новичка в дизайне темах 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 - CSS с cуперспособностями

Начало работы с Sass для развития тем WordPress

Большинство тематических дизайнеров используют местную среду разработки, чтобы работать над своими темами перед развертыванием в промежуточной среды или живого сервера. Так как Sass это язык препроцессор, вам нужно будет установить его на локальной среде разработки.

Первое , что вам нужно сделать, это установить Sass. Он может быть использован в качестве инструмента командной строки, но есть и некоторые интересные приложения с графическим интерфейсом , доступные для Sass. Мы рекомендуем использовать Koala, который является бесплатным приложением с открытым исходным кодом доступный для Mac, Windows и Linux.

Ради этой статьи, вам нужно будет создать пустую тему. Просто создайте новую папку в /wp-content/themes/. Вы можете назвать его ‘MyThemes’ или что – нибудь другое. Внутри вашей пустой папки темы создайте другую папку и назовите его style.

В папке стилей, вам нужно создать файл style.scss с помощью текстового редактора, такого как Блокнот.

Теперь вам нужно открыть Koala и нажать на иконку плюс, чтобы добавить новый проект. Затем найдите свой каталог темы и добавьте его в свой проект. Вы заметите, что Коала автоматически найдет файл Sass в каталоге стилей и отобразит его.

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

Щелкните правой кнопкой мыши на файле Sass и выберите вариант Set Output Path. Теперь выберите корень вашего каталога темы, например, /wp-content/themes/mythemes/и нажмите кнопку ввода. Koala сгенерирует выходной CSS файл в каталоге темы. Чтобы проверить это необходимо открыть файл style.scss в текстовом редакторе как Блокнот и добавить этот код:

 

Теперь вам нужно сохранить изменения и вернуться к Koala. Щелкните правой кнопкой мыши на файле Sass, и боковая панель будет откроется справа.Для компиляции файла Sass просто нажмите на кнопку ‘Compile’. Вы можете увидеть результаты, открыв файл style.css в каталоге темы, и он будет иметь обработанный CSS следующим образом:

 

Обратите внимание, что мы определили переменную $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 в директории стилей вашей темы и вставьте этот код в него.

 

Теперь вам нужно открыть свой основной файл style.scss и добавить эту строку, где вы хотите вставить файл для импорта:

 

Обратите внимание на то, что вам не нужно вводить полное имя файла. Для компиляции этого вам необходимо открыть Koala и нажать на кнопку компиляции снова. Теперь откройте главный файл style.css в вашей теме, и вы увидите ваш файл  reset CSS включен в него.

Nestin в Sass

В отличие от HTML, CSS не является вложенным языком. Sass позволяет создавать вложенные файлы, которыми легко управлять и работать. Например, вы можете вложить все элементы для раздела <article> под селектором статьи. Для дизайнеров тем в WordPress, это позволяет легко работать на разных разделах и стиля каждого элемента. Чтобы увидеть Nestin в действии, добавьте это в ваш файл style.scss:

 

После обработки он выведет следующий CSS:

 

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

Использование Mixins в Sass

Иногда вам нужно будет повторно использовать некоторые CSS вне вашего проекта, даже если правила стиля будет таким же, потому что вы будете использовать их для разных селекторов и классов. Вот где Mixins пригодится. Он позволяет добавить mixin в файл style.scss:

 

Это в основном Mixin скрывает некоторый текст для отображения. Вот пример того, как можно использовать Mixins, чтобы скрыть текст для вашего логотипа:

 

Обратите внимание на то, что вам нужно использовать @include для добавления Mixins. После обработки он будет генерировать следующий CSS:

 

Mixins также очень полезен с префиксами. При добавлении значения непрозрачности или радиус границы, используя Mixins вы можете сэкономить много времени. Посмотрите на этот пример, где мы добавили радиус границы.

 

После компиляции, он сгенерирует следующий CSS:

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

Мы надеемся, что эта статья помогла понять важность применения Sass для развития тем в WordPress. Многие дизайнеры тем WordPress уже используют его. Некоторые считают, что в будущем CSS станет препроцессором. Дайте нам знать, что вы думаете об использовании языка CSS препроцессора как Sass для развития темы WordPress, оставив комментарий ниже.


Читайте также

    Добавить комментарий

    Войти с помощью: 

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

    badge
    Обратный звонок 1
    Отправить
    galka

    Спасибо! Ваша заявка принята

    close
    galka

    Спасибо! Ваша заявка принята

    close