Препроцессоры CSS в WordPress — что это такое?

Я работаю с WordPress уже три года, но только год назад я серьезно занялся разработкой WordPress. В частности, я увлекаюсь дочерними темами и провожу большую часть своего времени, занимаясь разработкой тем.

В последние пару лет мы наблюдали рост препроцессоров CSS — в основном, инструментов, которые облегчают написание таблиц стилей и делают их более удобными в обслуживании.

В этой серии статей мы рассмотрим, что такое препроцессоры, какие существуют и как мы можем интегрировать их в разработку наших тем WordPress.

К чему мы идем

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

В этой серии статей я планирую дать краткую информацию о том, что такое препроцессоры, и рассказать о некоторых ключевых игроках в этой области. Я также расскажу о некоторых наиболее популярных фреймворках. Затем перейдем к более глубокому погружению в LESS и объясним, почему я предпочитаю использовать именно его. Наконец, я расскажу, как использовать его вместе с CodeKit для компиляции CSS в вашей теме.

Препроцессоры CSS

Как уже упоминалось, существует несколько препроцессоров CSS, наиболее часто используемыми из которых являются LESS и SASS. Оба они синтаксически схожи и могут значительно увеличить скорость написания CSS.

Есть несколько различий, например, их компиляторы и расширения или фреймворки, с которыми они могут быть объединены.

LESS

LESS — это язык динамических таблиц стилей. Вы можете написать свой CSS программно в файле .less и скомпилировать результат в файл .css. Языком компиляции для LESS является JavaScript. Это очень удобно, поскольку компилятор можно запускать как на стороне сервера, так и на стороне клиента.

Некоторые из особенностей LESS включают:

• Переменные — Переменные могут быть определены и используются во всем файле. Внесите изменение в одном месте и увидите, как оно будет обновлено везде, где оно используется.
• Миксины — Миксины включают набор свойств из одного набора правил в другой набор правил. Вы также можете использовать параметрические миксины, которые принимают аргументы.
• Вложенные правила — Вложенные правила дают вам возможность использовать вложенность вместо или в сочетании с каскадированием.
• Пространства имен — Пространства имен позволяют группировать переменные или миксины в организационных целях или просто для обеспечения некоторой инкапсуляции.

Более подробно о синтаксисе для них я расскажу в следующей статье этой серии.

Два наиболее популярных front-end фреймворка, использующих LESS, это:

• Bootstrap
• Frameless

SASS

SASS является расширением CSS3. Он имеет два синтаксиса: .scss и .sass. Наиболее часто используется синтаксис .SCSS, но он также поддерживает более старый синтаксис с отступами.

Некоторые особенности SASS включают:

• Переменные — Переменные могут быть определены и используются во всем вашем файле. Внесите изменение в одном месте и увидите, как оно будет обновлено везде, где оно используется, как в LESS.
• Миксины — Миксины позволяют повторно использовать целые фрагменты CSS, свойства или селекторы, как в LESS.
• Вложенность — Избегайте повторений, вкладывая селекторы друг в друга, как в LESS.
• Наследование селекторов — Можно указать одному селектору наследовать все стили другого без дублирования свойств CSS. Внимание! Недоступно в LESS.

Вот несколько фреймворков, которые включают SASS и SCSS:

• Foundation
• Gravity
• Frameless

Заключение

Препроцессоры CSS, безусловно, являются растущей тенденцией в веб-разработке. Они могут значительно ускорить время, которое вы тратите на написание стилей для своих сайтов.

Они также помогают структурировать CSS, как это делается в других языках, таких как PHP или JavaScript. Если вы еще не используете препроцессоры CSS в своем веб-проекте, то вам обязательно стоит подумать об этом.

Теперь, когда мы рассмотрели два наиболее популярных препроцессора, я более подробно остановлюсь на LESS и приведу несколько причин, по которым я лично решил использовать именно его, в следующей статье. Я также покажу вам, как начать использовать CodeKit в ваших проектах WordPress.

Перевод материала Джейсонd Брэдли с сайта tutsplus.com.

Опубликовано 12 декабря 2022 в 15:57 (обновлено 4 февраля 2023 в 16:29)