Less sass что это

SASS против LESS с точки зрения новичка

Благодаря Compass в SASS вы можете превратить данный код:

В LESS вам такое не повторить.

@­extend

SASS, в отличие от LESS, не просто копирует свойства в новый селектор, а меняет его название. Например:

 .selector-b < /* Какой-то текст */ @­extend .selector-a; >

Будет скомпилировано в это:

 .selector-b < /* Какой-то текст */ >

Как по мне — так гораздо лаконичнее.

Переменные

Тут всё просто, мне как-то удобнее использовать $, который не используется в CSS, в отличии от @

Итог

Лучше познавайте SASS и не тратьте своё время на LESS — такой, достаточно простой итог.

На этом у меня всё, спасибо за внимание!

Sass, SCSS и Less

Оба применяются уже несколько лет. Мы будем использовать Sass.

Sass и SCSS

У Sass есть два доступных синтаксиса:

Сам Sass (Syntactically Awesome StyleSheets) в файлах .sass;
SCSS (Sassy CSS) в файлах .scss, что-то на полпути между обычным CSS и Sass.

Разница между Sass и SCSS достаточно тонкая.

Следует помнить, что:

• Sass это название препроцессора;
• SCSS учить легче;
• все ресурсы в Интернете (вроде The Sass Way) упоминают Sass, не SCSS;
• все возможности доступны в обоих синтаксисах;
• всё в SCSS доступно и в Sass.

Мы на самом деле собираемся писать SCSS, но по прежнему называем это Sass.

Почему сперва SCSS

Мы собираемся использовать SCSS по нескольким причинам:

• читаемость: синтаксис очень похож на CSS;
• кривая обучения: добавляется только несколько дополнительных возможностей к CSS;
• совместимость: CSS-файл является корректным SCSS-файлом;
• ресурсы: много статей для чтения и библиотек с открытым исходным кодом для использования;
• расширяемость: легко перейти от SCSS к Sass.

Возможности

Sass предлагает следующее:

• переменные: вместо повторения #fce473 во всём файле CSS, просто установите $yellow: #fce473 один раз;
• вложения: правила CSS могут быть вложены друг в друга;
• примеси: пользовательские функции, которые могут принимать параметры и исключить бесполезные повторы;
• расширения: самый простой способ наследовать одинаковые свойства другого селектора;
• операторы: сложение, вычитание, умножение и деление значений, вроде 960px / 4 или $space * 2.

Не повторяйся

В Sass все инструменты предназначены для предупреждения повторений в вашем коде: это принцип не повторяйся.

• переменные предупреждают повторяющиеся значения;
• вложения предупреждают повторение селекторов;
• примеси и расширения предупреждают повторяющиеся свойства.

В чём отличие между less и sass?

Служат для одной и той же цели, имеют похожие методы, а в сущности различаются только синтаксисом и расширением? По мне все же sass поудобнее(покороче) будет, как считаете?

Отслеживать
AndreyTalanin
задан 14 ноя 2013 в 18:26
AndreyTalanin AndreyTalanin
1,209 1 1 золотой знак 11 11 серебряных знаков 28 28 бронзовых знаков
Давайте, может, переименуем вопрос вo «В чём отличие между less и sass»?
15 ноя 2013 в 1:39

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

отличий куча во первых sass на ruby, less на js синтаксис оч сильно отличается посмотри на примеры:

• http://lesscss.org/
• http://sass-lang.com/

ну а про расширение я бы сказал в последнюю очередь. Чтобы окончательно все расставить по местам читай вот что: SASS против LESS

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 15 ноя 2013 в 1:58
user12902 user12902

На самом деле less попроще, удобнее и очень легко понять суть препроцессоров на нем. SASS имеет разные плюшки, более строгий. Лично я для себя использую LESS, в первую очередь из-за простоты и скорости сборки. К SASS есть прикольная надстройка Compass. По-моему если уж SASS, то тогда с Compass. Но компилится он жутко долго. У меня LESS версия бутстрапа — 1-2 секунды против 10-15 SASS. Чувтсвуется разница, не так-ли?

Ну и да, смотрите статью на хабре в ответе Павла.

Отслеживать
ответ дан 10 ноя 2014 в 12:10
2,868 12 12 золотых знаков 56 56 серебряных знаков 103 103 бронзовых знака

• less
• вёрстка
• sass
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.26.3951

Краткий обзор отличий LESS от SASS

Вчера пол дня потратил на подробное изучение LESS и его отличие от используемых нами SASS/SCSS.

Синтаксис SASS мне импонирует больше чем SCSS за его краткость. Но большая вложенность стилей в SASS может быстро ликвидировать все преимущества его краткости. В любом случае разницу между SASS и SCSS не принципиальна. LESS оказался ближе к SCSS чем к SASS. И, в общем, это тоже самое. Отличий не много, но парочка из них принципиально меняют расстановку сил.

1. LESS — может client-side с использованием JS.

Точнее он не то чтобы может, он на это и расчитан. Обычная практика использования LESS-кода:

Это потом уже к нему прикрутили возможность компиляции на сервере (и на js и на ruby).

На первый взгляд какое-то странное свойство. Зачем компилить на стороне клиента, если можно отлично скомпилить на сервере и отдавать уже готовую ужатую CSS как мы привыкли с SASS?

Причина становится видна после изучения невзрачных самых послених строках документации к LESS:

Вот такая маленькая одинокая строчка дает возможности о которых только мечтали верстальщики с начала освоения стилей. Вызов из CSS ява-скрипта на стороне клиента и учет фактических параметров браузера при создании стилей.

Тоесть у нас появилась возможность сначала загрузить DOM, а потом под него создать специальный CSS прямо на стороне клиента. Дальше сами думаейте какие возможности этот открывает.

Нужно ли это вашему проекту это вопросу другой. Понятно что все привыкли к клиентской неизвестности/независимости и верстке в стиле «делаем универсально, чтобы более-менее показывалось у всех на всех разрешениях». Но это не повод забывать что теперь такая возможность есть и с ней вы можете делать, к примеру, ну очень резиновую верстку.

2. LESS, в отличии от SASS/SCSS не имеет логики.

В LESS нет if/then, for и т.п. Хотя, учитывая то, что в него легко встраивается JS думаю логику вполне возможно прикрутить. Не пробовал.

3. В LESS проще миксинг + миксить можно классы.

Очень понравилось то, что в LESS можно включать в определение свойства других классов. Собственно класс и является миксином. Это еще одна особенность которой нет в SASS/SCSS. Вы можете включить в LESS обычный CSS файл и использовать его классы для определия своих свойств. Например:

.wrap text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
>
pre < .wrap >

Резюме

За исключением 1-го пункта разница не велика и выбор большена любителя.

Лично для меня LESS выглядит более привлекательным из-за своей простоты. Циклы и условия в стилях мне еще никогда не были нужны. Классические утилиты типа «box-shadow, linear-gradient, darken’ в LESS есть.

Да, под SASS написано уже множество готовых библиотек (compass, bourbone и достаточно широкое сообщество), но под LESS есть тот же Twitter Bootstrap и этого более чем достаточно.

P.S. Нашел старницу сравнения SASS vs LESS и вместе с ней открыл для себя любопытный сервис аргументированных сравнений wrangl.com