Я работал с WordPress три года, но только год назад я серьезно задумался о разработке WordPress. В частности, я увлечен детской тематикой и провожу большую часть своего времени, работая над развитием тем.
За последние пару лет мы наблюдали рост числа препроцессоров CSS — главным образом инструментов, которые облегчают написание таблиц стилей и делают их более удобными в обслуживании.
В этой серии мы рассмотрим, что такое препроцессоры, какие популярные и как мы можем интегрировать их в нашу разработку тем.
Куда нас ведут
Когда дело доходит до разработки пользовательского интерфейса, речь идет не только о том, как сделать вещи великолепно, но и о том, как сделать вещи хорошо структурированными и как можно более производительными, и я считаю, что это должно быть чем-то, что происходит в наших проектах WordPress. , также.
В этой серии я планирую немного рассказать о том, что такое препроцессоры, и осветить некоторых ключевых игроков в этой области. Я также расскажу о некоторых из наиболее популярных фреймворков. Затем я перейду к более глубокому погружению в LESS и объясню, почему я предпочитаю его использовать. Наконец, я расскажу, как использовать его с CodeKit для компиляции вашего CSS для вашей темы.
О CSS препроцессорах
Как уже упоминалось, существует ряд препроцессоров CSS, наиболее часто используемыми являются LESS и SASS. Оба синтаксически похожи и могут значительно увеличить скорость, с которой вы можете написать свой CSS.
Есть несколько отличий, таких как их компиляторы и расширения или структуры, с которыми они могут быть объединены.
МЕНЬШЕ
LESS — это динамический язык стилей. Вы можете написать свой CSS программно в файле .less и скомпилировать свой вывод в файл .css . Языком компиляции для LESS является JavaScript. Это здорово, потому что вы можете запустить компилятор на стороне сервера или на стороне клиента.
Некоторые из функций LESS включают в себя:
- Переменные — переменные могут быть определены и использоваться во всем файле. Внесите изменения в одном месте и обновите их везде, где они используются.
- Mixins — Mixins включают в себя набор свойств из одного набора правил в другой набор правил. Вы также можете использовать параметрические миксины, которые принимают аргументы.
- Вложенные правила — Вложенные правила дают вам возможность использовать вложение вместо или в сочетании с каскадированием.
- Пространства имен — Пространства имен позволяют группировать переменные или миксины для организационных целей или просто для обеспечения некоторой инкапсуляции.
Я буду вдаваться в подробности синтаксиса для них в следующем посте этой серии.
Две из наиболее популярных интерфейсных сред, использующих LESS:
SASS
SASS является расширением CSS3. Он имеет два синтаксиса: .scss и .sass . .SCSS — самый распространенный синтаксис, но он также поддерживает более старый синтаксис с отступом .
Некоторые из особенностей SASS включают в себя:
- Переменные — переменные могут быть определены и использоваться во всем файле. Внесите изменения в одном месте и обновите их там, где они используются, как МЕНЬШЕ.
- Mixins — Mixins позволяют вам повторно использовать целые куски CSS, свойства или селекторы, такие как LESS
- Вложение — Избегайте повторения, вкладывая селекторы друг в друга, как LESS
- Наследование селектора — он может сказать одному селектору наследовать все стили другого без дублирования свойств CSS. Недоступно в LESS.
Вот несколько платформ, которые включают SASS и SCSS:
Вывод
CSS препроцессоры, безусловно, растущая тенденция в веб-дизайне. Они могут значительно сократить время, которое вы тратите на написание стилей для своих сайтов.
Они также могут помочь структурировать ваш CSS, как если бы вы работали на других языках, таких как PHP или JavaScript. Если вы еще не используете CSS-препроцессоры в своем веб-проекте, вы должны обязательно это учесть.
Теперь, когда мы взглянули на два наиболее популярных препроцессора, я углублюсь в LESS и объясню некоторые причины, по которым я лично решил использовать его в следующем посте. Я также покажу вам, как начать использовать CodeKit с вашими проектами WordPress.