Сравнение CSS препроцессоров: Sass vs. LESS

Есть Popuplar CSS Pre-процессоры МЕНЬШЕ а также пререкаться, CSS Preprocessor в первую очередь намеревается сделать создание CSS более динамичным, организованным и продуктивным, добавив в него несколько функций программирования, таких как переменные, миксины и условные выражения. Теперь вопрос в том, кто из этих двух справляется с работой лучше?

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

Давайте начнем.

Читайте также: Начало работы с синтаксически удивительными таблицами стилей

Установка
Давайте начнем с самого фундаментального шага, Установка. Sass и LESS построены на разных платформах.

Sass: Sass требует компилятор, написанный на C ++ и требует разработчика для этого компилятора назначенного языка. Если ваш проект выполняется в приложении Node.js, вам необходимо установить Узел-компилятор, Есть один для Идти, питон, Рубин и даже C #,

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

LESS: LESS, с другой стороны, написан исключительно на JavaScript. Внедрить LESS так же просто, как связать библиотеку JavaScript с вашим HTML-документом. Существует несколько приложений с графическим интерфейсом, помогающих компилировать LESS в CSS, и большинство из них бесплатны и работают очень хорошо (например, Уинлесс а также LESS.app).

Вывод: LESS прост и быстр в установке. Он не требует компилятора Хью, чтобы запустить его

Счет на данный момент: Sass (0) – Меньше (1)

Языки
Каждый CSS препроцессор имеет свой собственный язык, и они в основном распространены. Например, как Sass, так и LESS имеют переменные, но в них нет существенной разницы, за исключением того, что Sass определяет переменные со знаком $, а LESS – со знаком @. Они все еще делают то же самое: сохраняют постоянное значение.

Ниже мы рассмотрим некоторые из наиболее часто используемых языков как в Sass, так и в LESS (основываясь на моем опыте).
гнездование
Правило вложения – это хорошая практика, позволяющая избегать многократной записи селекторов, а в Sass и LESS правила вложения одинаковы;

Sass / SCSS и LESS

nav {
поле: 50px авто 0;
ширина: 788 пикселей;
высота: 45 пикселей;
ul {
отступы: 0;
поле: 0;
}
}

Но Sass / SCSS продвигает этот метод на шаг вперед, позволяя нам также вкладывать отдельные свойства, вот пример:

nav {
поле: 50px авто 0;
ширина: 788 пикселей;
высота: 45 пикселей;
ul {
отступы: 0;
поле: 0;
}
граница: {
стиль: твердый;
оставил: {
ширина: 4 пикселя;
цвет: # 333333;
}
правильно: {
ширина: 2 пикселя;
цвет: # 000000;
}
 }
}

Этот код будет генерировать следующий вывод.

nav {
  поле: 50px авто 0;
  ширина: 788 пикселей;
  высота: 45 пикселей;
  стиль границы: твердый;
  border-left-width: 4px;
  Цвет рамки слева: # 333333;
  border-right-width: 2px;
  цвет границы справа: # 000000;
}
nav ul {
  отступы: 0;
  поле: 0;
}

Вывод: вложение отдельных свойств является хорошим дополнением и считается лучшей практикой, особенно после СУХОЙ (не повторяйся) принцип, Поэтому я думаю, что ясно, какой из них лучше в этом случае.

Оценка на данный момент: Sass (1) – Меньше (1)

Примеси
Миксины в Sass и LESS определяются немного по-разному. В Sass мы используем директиву @ mixin, а в LESS мы определяем ее с помощью селектора классов. Вот пример:

Sass / SCSS

@mixin border-radius ($ values) {
border-radius: $ values;
}

nav {
поле: 50px авто 0;
ширина: 788 пикселей;
высота: 45 пикселей;
@include border-radius (10px);
}

МЕНЬШЕ

.border (@radius) {
border-radius: @radius;
}
nav {
поле: 50px авто 0;
ширина: 788 пикселей;
высота: 45 пикселей;
.border (10px);
}

Mixins будет копировать и добавлять в свойства, где он определен.

наследование

И Sass, и LESS идут дальше с так называемым наследованием. Концепция довольно идентична Mixins, но вместо того, чтобы копировать все свойства CSS, она будет группировать селекторы, которые имеют точно такие же установленные свойства и значения, используя. Sass использует @extends, в то время как LESS использует псевдокласс: extended.

Посмотрите на этот пример ниже:

Sass / SCSS

.circle {
граница: 1px solid #ccc;
радиус границы: 50 пикселей;
переполнение: скрытое;
}
.avatar {
@extend .circle;
}

МЕНЬШЕ:

.circle {
граница: 1px solid #ccc;
радиус границы: 50 пикселей;
переполнение: скрытое;
}

.avatar: extend (.circle) {}

Этот код будет выглядеть как;

.circle, .avatar {
  граница: 1px solid #ccc;
  радиус границы: 50 пикселей;
  переполнение: скрытое;
}

Рекомендуемое чтение: Наследование селектора Easy Way: Представляем @extend

Вывод: и Sass, и LESS работают довольно хорошо, за исключением того, что LESS: расширение псевдокласс выглядит странно, особенно если мы не добавляем дополнительные свойства в селекторе или если мы используем его вместе со стандартным псевдоклассом CSS, например: not and: nth -child. Поэтому я думаю, что Sass реализует эту функцию лучше.

Оценка на данный момент: Sass (2) – Меньше (1)

операции
И Sass, и LESS могут выполнять основные математические операции, но могут возвращать разные результаты. Посмотрите, как они выполняют этот случайный расчет:

Sass / SCSS

маржа в долларах: 10px;
div {
маржа: $ маржа – 10%; / * Синтаксическая ошибка: несовместимые единицы: «%» и «px» * /
}

МЕНЬШЕ

@margin: 10 пикселей;
div {
маржа: @margin – 10%; / * = 0px * /
}

Вывод: в этом случае Sass делает это более точно; поскольку% и px не эквивалентны, они должны возвращать ошибку. Хотя на самом деле я надеюсь, что это может быть что-то вроде 10px – 10% = 9px.

Оценка на данный момент: Sass (3) – Меньше (1)

Обработка ошибок
Уведомление об ошибках также является важным фактором, облегчающим отладку кода. Представьте себе тысячи строк кода и небольшую ошибку где-то в хаосе. Четкое уведомление об ошибке будет лучшим способом быстро определить проблему.

Sass: в этом примере я буду запускать компиляцию Sass через CLI. Sass будет генерировать уведомление об ошибке всякий раз, когда он видит код в действительном. В этом случае мы удалим добавить переменную, которая не определена, и это определенно должно выдать ошибку. Посмотрите на скриншот ниже.
Сообщение об ошибке довольно просто. Он говорит, что есть неопределенная переменная (которая является истинной) и выделяет переменную offedning. Мы также можем увидеть, какая строка вызвала эту ошибку. В ней есть все, что нам нужно для устранения ошибки. Но помимо этой встроенной ошибки, Sass также ввел дополнительную директиву для лучшей обработки ошибки, а именно @error, @warn и @debug.

Директивы Sass @error и @warn позволяют выдавать пользовательские сообщения об ошибках. Эта дополнительная функция хороша, например, когда вы создаете систему проектирования или фреймворк на основе Sass. Вы бы хотели, чтобы оно выдавало сообщение, если они используют устаревшие миксины или когда передают правильное значение, например:

@mixin border-radius ($ рад) {
@warn “В версии 5.2 миксин border-radius ()устарел, используйте вместо него "corner-radius () mixin “;
border-radius: $ рад;
}

Директива @debug работает аналогично console.log () в JavaScript или var_dump () в PHP. Вот пример.

$ space: 10px;
div {
@debug $ space;
поле: ($ пробелы * 2);
}

Выше будет выводить:
МЕНЬШЕ: При том же сценарии сообщение об ошибке МЕНЬШЕ, я думаю, более хорошо представлено. Сначала он показывает весь блок кода ошибки, а не только ошибочную строку, и выделяет ошибку. В настоящий момент LESS не предоставляет специальной директивы для обработки пользовательских ошибок, таких как Sass.
Вывод: и Sass, и LESS прекрасно справляются с ошибками, но Sass требует дополнительных директив для обработки пользовательских сообщений об ошибках, поэтому это выигрыш для Sass.

Оценка: Sass (4) – Меньше (1)

Документация
Документация является очень важной частью для каждого продукта; даже опытным разработчикам было бы трудно делать вещи без Документации.

Sass: документация Sass аккуратна. Каждый раздел разделен на подраздел. Примеры кода также представлены на вкладке с тремя разделами для Sass, SCSS и скомпилированной версии для CSS, что полезно для получения полной картины о том, как будет компилироваться код Sass / SCSS.
МЕНЬШЕ: МЕНЬШАЯ документация лаконична. Он сгруппирован по разделам и подразделам, а также предоставляет примеры кода со скомпилированным выводом, хотя он не размещен во вкладке.
Вывод: документация как Sass, так и LESS хорошо представлена, поэтому я думаю, что мы можем назвать это ничьей.

Оценка на данный момент: Sass (5) – Меньше (2).

Последняя мысль
Я думаю, что это четкий вывод, что Sass лучше с общим счетом 5 против 2 для LESS. В конце концов, все еще зависит от решения конечного пользователя выбрать препроцессор CSS по своему выбору. Будь то Sass или LESS, если они удобны и более продуктивны, тогда это победитель в их списке.

И наконец, если вы что-то думаете по этому вопросу, не стесняйтесь поделиться этим в поле для комментариев ниже.