[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Все для Веб-Мастера » CSS » Реализовано на SASS (Эта заметка о том, почему SASS лучше LESS)
Реализовано на SASS
Дата: Среда, 03.04.2013, 16:27 | Сообщение # 1
Администраторы - Толик
  • Сообщений: 5
  • Репутация: 2
Эта заметка о том, почему 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.
Форум » Все для Веб-Мастера » CSS » Реализовано на SASS (Эта заметка о том, почему SASS лучше LESS)
Страница 1 из 11
Поиск:

Администрация проекта не несет какую-либо ответственность за
публикуемые пользователями материалы. Хостинг от uCoz.
Главный администратор сайта - Tolik.
Дизайн от life_man, верстка от sp1nn15.