Реализовано на SASS

Эта заметка о том, почему SASS лучше LESS. Если вы ищите объективное исследование о том, почему sass предпочтительнее less, можете обратиться к статье sass vs less . В данной же заметке приведены важные особенности SASS, которые не реализованы в LESS.

Вендорные префиксы

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

sass

@mixin border-radius($argument) {
-webkit-border-radius: $argument;
-ms-border-radius: $argument;
-moz-border-radius: $argument;
-o-border-radius: $argument;
border-radius: $argument;
}

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

sass

@mixin vendor-prefix($name, $argument) {
-webkit-#{$name}: $argument;
-ms-#{$name}: $argument;
-moz-#{$name}: $argument;
-o-#{$name}: $argument;
#{$name}: $argument;
}
@mixin border-radius($argument) {
@include vendor-prefix(border-radius, $argument);
}

@mixin box-shadow($argument) {
@include vendor-prefix(box-shadow, $argument);
}

Код становится намного компактнее, но это, к сожалению, не реализовано на LESS.

Функции

Предположим, вы захотите пересчитать пикселы в em. Функции SASS приходят на помощь:

sass

@function pixels-to-ems($target, $context: 16) {
@return ($target / $context) * 1em;
}
.container {
width: pixels-to-ems(800);
}

Теперь мы можем многократно использовать функцию для преобразования пикселей в em. К сожалению, функции не поддерживаются в LESS.

@extend

Когда приходится использовать примеси неоднократно, CSS-файл на выходе получается большего размера, чем нам необходимо. SASS позволяет нам эффективно справиться с этой проблемой при помощи @extend. @extend не просто копирует стили из clearfix в footer и header, он «соединяет» элементы (то есть проставляет селекторы через запятую) в скомпилированном CSS.

sass

%clearfix {
overflow: none;
*zoom: 1;
}

header {
@extend %clearfix;
}
footer {
@extend %clearfix;
}

На выходе:

sass

header, footer {
overflow: none;
*zoom: 1;
}

К сожалению, на LESS вы так не сделаете.

Почему LESS?

Все вышеприведенные особенности помогают создать чистый и структурированный код. Почему же некоторые верстальщики предпочитают LESS?

LESS имеет простой и приятный синтаксис.

LESS имеет javascript-компилятор, что позволяет компилировать CSS файл на лету.

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

Источник