Скажу сразу, я считаю, что LESS вам никогда не понадобится, если вы изучили SASS. Да и тот же Bootstrap нормально работает только с SASS, так что выбор фреймворка становится ещё более очевидным.
Но давайте всё же сравним их более подробно.
Логика и циклы
Благодаря Compass в SASS вы можете превратить данный код:
.selector {
@include background(
image-url("foo.png"),
linear-gradient(top left, #333, #0c0),
radial-gradient(#c00, #fff 100px)
);
}
в этот:
.selector {
background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
}
В LESS вам такое не повторить.
@extend
SASS, в отличие от LESS, не просто копирует свойства в новый селектор, а меняет его название. Например:
.selector-a {
/* Какой-то текст */
}
.selector-b {
/* Какой-то текст */
@extend .selector-a;
}
Будет скомпилировано в это:
.selector-a, .selector-b {
/* Какой-то текст */
}
.selector-b {
/* Какой-то текст */
}
Как по мне — так гораздо лаконичнее.
Переменные
Тут всё просто, мне как-то удобнее использовать $, который не используется в CSS, в отличии от @
Итог
Лучше познавайте SASS и не тратьте своё время на LESS — такой, достаточно простой итог.
На этом у меня всё, спасибо за внимание!