Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Sass, LESS, Stylus - какой лучше: перепроцессор Shootout

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Liliya (you can also view the original English article)

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

 В этой статье мы рассмотрим различные функции и преимущества использования трех разных препроцессоров: Sass, LESS и Stylus.


Вступление

 Препроцессоры создают CSS, который работает во всех браузерах.

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


Синтаксих

 Наиболее важной частью написания кода в препроцессоре CSS является понимание синтаксиса.  К счастью для нас, синтаксис (или может быть) идентичен регулярному CSS для всех трех препроцессоров.

Sass & LESS

 Sass и LESS используют стандартный синтаксис CSS.  Это упрощает преобразование существующего файла CSS в препроцессор.  Sass использует расширение .scss, а LESS использует расширение .less.  Базовый файл Sass или LESS можно настроить следующим образом:

 Как вы могли заметить, это просто обычный CSS, который отлично компилируется как в Sass, так и в LESS.

 Важно отметить, что Sass также имеет более старый синтаксис, который пропускает точки с запятой и фигурные скобки.  Хотя это все еще используют, оно устарело, и мы не будем использовать его в этом примере.  Синтаксис использует расширение .sass и выглядит так:

Stylus

 Синтаксис для Stylus более подробный.  Используя расширение файла .styl, Stylus принимает стандартный синтаксис CSS, но также принимает некоторые другие варианты, в которых скобки, двоеточия и полуколоны являются необязательными. Пример:

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


Переменные

 Переменные могут быть объявлены и использованы во всей таблице стилей.  Они могут иметь любое значение, которое является значением CSS (например, цветами, числами [включенными единицами] или текстом.), и на них можно ссылаться везде в нашей таблице стилей.

Sass

 Переменные Sass добавляются с символом $, а значение и имя разделяются точкой с запятой, как и свойство CSS.

LESS

 LESS переменные точно такие же, как переменные Sass, за исключением того, что имена переменных добавляются символом @

Stylus

 Переменные Stylus не требуют, чтобы что-то было добавлено к ним, хотя оно допускает символ $.  Как всегда, конечная точка с запятой не требуется, но знак равенства между значением и переменной есть.  Следует отметить, что Stylus (0.22.4) компилируется, если мы добавим символ @ к имени переменной, но не будем применять значение при ссылке.  Другими словами, не делайте этого.

 Скомпилированный CSS

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


Nesting

 Если нам нужно ссылаться на несколько элементов с одним и тем же источником в нашем CSS, это может быть утомительно писать его снова и снова.

 Вместо этого, используя препроцессор, мы можем записать дочерние селекторы внутри скобок родителя.  Кроме того, символ & обозначает родительский селектор.

Sass, LESS, и Stylus

 Все три препроцессора имеют одинаковый синтаксис для селекторов вложенности.

Скомпилированный CSS

 Это скомпилированный CSS из приведенного выше кода.  Это точно так же, как то когда мы начали то что удобно!


Mixins

 Mixins - это функции, которые позволяют повторно использовать свойства во всей нашей таблице стилей.  Вместо того, чтобы идти по всей нашей таблице стилей и менять свойство несколько раз, теперь мы можем просто изменить его внутри нашего mixin.  Это может быть действительно полезно для конкретного стиля элементов и префиксов поставщиков.  Когда mixins вызывается из селектора CSS, аргументы mixin распознаются, а стили внутри mixin применяются к селектору.

Sass

LESS

Stylus

Скомпилированный CSS

 Все препроцессоры составляют один и тот же код:


Наследственность

 При написании CSS старомодным способом мы могли бы использовать следующий код для одновременного применения одних и тех же стилей к нескольким элементам:

 Это отлично работает, но если нам нужно дополнительно стилизовать элементы по отдельности, для каждого из них должен быть создан другой селектор, и он может быстро стать более беспорядочным и сложным в обслуживании.  Чтобы противостоять этому, можно использовать наследие.  Наследие - это способность других селекторов CSS наследовать свойства другого селектора.

Sass & Stylus

Скомпилированный CSS (Sass & Stylus)

LESS

 LESS действительно не  наследует стили Sass и Stylus. Вместо добавления нескольких селекторов к одному набору свойств он рассматривает наследование как mixin без аргументов и импортирует стили в свои собственные селекторы. Недостатком этого является то, что свойства повторяются в вашей скомпилированной таблице стилей. Вот как вы его настроили:

Скомпилированный CSS (LESS)

 Как вы можете видеть, стили из .block были вставлены в селектора, которые мы хотели бы наследовать. Важно отметить, что приоритет может стать проблемой здесь, поэтому будьте осторожны.


Импортирующий

В сообществе CSS импорт CSS не одобряется, поскольку ему требуется несколько HTTP-запросов.  Однако импорт с препроцессором работает по-разному.  Если вы импортируете файл из любого из трех препроцессоров, он будет буквально включать импорт во время компиляции, создавая только один файл. Имейте в виду, что импортирование обычных файлов .css компилируется по умолчанию с помощью  @import «file.css»; code.  Кроме того, mixins и переменные могут быть импортированы и использованы в вашей основной таблице стилей.  Импорт делает создание отдельных файлов для организации очень хорошо.

Sass, LESS, и Stylus

Скомпилированный CSS


Цветовые возможности

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

Sass

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

Цветовые функции можно использовать в любом месте, где используется цвет. Вот пример:

LESS

Список всех функций LESS можно найти, прочитав LESS Документацию.

Вот пример использования цветовой функции в LESS:

Stylus

Полный список всех функций цвета Stylus можно найти, прочитав Документацию Stylus.

Вот пример использования цветовых функций Stylus:


Эксплуатация

Выполнение математики в CSS очень полезно и теперь вполне возможно.  Это просто, и вот как это сделать:

Sass, LESS, и Stylus


Практическое применение

Мы рассмотрели множество возможностей и новых возможностей, которые могут выполнять препроцессоры, но мы не затронули практику. Вот краткий список приложений реального мира, где использование препроцессора - спасатель.

Приставка поставщиков

Это одна из раздутых причин использовать препроцессор и по очень веской причине - это экономит массу времени и слез. Создание mixin для обработки префиксов поставщиков это легко и экономит много повторений и болезненного редактирования. Вот как это сделать:

Sass

LESS

Stylus

Скомпилированный CSS

3D-текст

Подделка 3D-текста с использованием нескольких текстовых теней - умная идея. Единственная проблема  в изменении цвета когда факт трудный и громоздкий. Используя mixins и цветовые функции, мы можем создавать 3D-текст и менять цвет «на лету»!

Sass

LESS

Stylus

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

Скомпилированный CSS

Конечный результат

Столбец

Использование числовых операций и переменных для столбцов - это идея, которую я придумал, когда я впервые играл с препроцессорами CSS. Объявив желаемую ширину в переменной, мы можем легко изменить ее в течении работы без какой-либо сложной математики. Вот как это делается:

Sass

LESS

Stylus

Скомпилированный CSS


Известные причуды

Существует несколько приколов к использованию препроцессора CSS. Я собираюсь перечислить некоторые причуды, но если вам действительно интересно узнать все, я рекомендую вам изучать документацию или, еще лучше, просто начните использовать препроцессор в ежедневной кодировке.

Отчет об ошибках

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

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

Комментарии

При компиляции с препроцессором CSS любой комментарий с двойной косой чертой удаляется (например, // комментарий) и сохраняется любой комментарий косой черты (например, /* comment */). При этом используйте двойную косую черту для комментариев, которые вы хотите на не скомпилированной стороне, и слэш-звездочкой для комментариев, которые вы хотите видеть после компиляции.

 Просто примечание: если вы компилируете minified, все комментарии удаляются.


Заключение

Каждый препроцессор CSS, который мы рассмотрели (Sass, LESS и Stylus), имеет свой собственный уникальный способ выполнения той же задачи, предоставляя разработчикам возможность использовать полезные неподдерживаемые функции, сохраняя при этом совместимость браузера и чистоту кода.

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

Я призываю всех вас попробовать как можно больше препроцессоров, чтобы вы могли эффективно выбирать фаворита и знать, почему его предпочитают другие. Если вы еще не пытались использовать препроцессор для написания CSS, я настоятельно рекомендую вам попробовать.

У вас есть любимая функция препроцессора CSS, о которой я не упоминал? Есть ли что-то, что можно сделать иначе? Дайте нам знать в комментариях ниже!

Особая благодарность Karissa Smith, супер-талантливому другу, которая создала миниатюру для этой статьи.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.