Эта заметка о том, почему 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 приходят на помощь:
Код
@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.
