Less 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.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Что такое SASS и LESS и как их использовать

Откройте для себя SASS и LESS – мощные препроцессоры CSS, которые упрощают и улучшают написание стилей, делая код более модульным и организованным!

SASS and LESS working together in web development

Алексей Кодов
Автор статьи
1 июня 2023 в 11:36

SASS и LESS являются препроцессорами CSS, которые позволяют использовать переменные, вложенность, миксины и другие функциональные возможности при написании стилей. Эти инструменты существенно облегчают процесс разработки и поддержки CSS-кода, делая его более модульным, организованным и эффективным.

SASS (Syntactically Awesome Style Sheets)

SASS — это надмножество CSS, которое расширяет его возможности, добавляя переменные, вложенность, миксины, наследование и другие функции. Он предоставляет два синтаксиса: один с именем SCSS (Sassy CSS), который очень похож на обычный CSS, и другой с именем «Indented Syntax», который использует отступы для определения вложенности.

Пример кода на SASS:

body background-color: $primary-color;
font-family: ‘Arial’, sans-serif;
>

.container width: 100%;
max-width: 1200px;
margin: 0 auto;
>

LESS (Leaner Style Sheets)

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

Пример кода на LESS:

body background-color: @primary-color;
font-family: ‘Arial’, sans-serif;
>

.container width: 100%;
max-width: 1200px;
margin: 0 auto;
>

Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Как использовать SASS и LESS

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

Установите Node.js, если у вас его еще нет.
Установите SASS или LESS глобально, используя команду npm install -g sass или npm install -g less .
Создайте файл с расширением .scss или .less и напишите в нем стили, используя синтаксис SASS или LESS.
Скомпилируйте файл в обычный CSS, используя команду sass input.scss output.css или lessc input.less output.css .

Теперь у вас есть CSS-файл, который можно подключить к вашей веб-странице.

�� Помимо использования командной строки, существуют плагины для редакторов кода и интегрированные инструменты в средах разработки, которые автоматически компилируют SASS и LESS файлы при сохранении.

Заключение

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

Что такое Less и Sass?

Из дизайна двигаюсь потихоньку в фронт-энд, опыт с css и html довольно большой, но читая литературу и статьи стал наталкиваться на less и sass(я так понял, что это называется также scss).
В большинстве статьи про эти метаязыки написано, что это просто суперупрощающая жизнь технология, привезенная с Марса для научно-технической революции на Земле.
Пожалуйста, объясните по-простому зачем они нужны, то есть хотя бы один пример, из-за которого человек захочет перестать писать css, и начать «жить».
А также, есть ли преимущество у человека знающего их перед незнающим. То есть, по сути из less и sass получается тот же самый css код. То есть, я смогу написать обычным css то же самое, что великий гуру с помощью less/sass? И в чем тогда глобальная польза этих lass/sass?

Вопрос задан более трёх лет назад
44628 просмотров

1 комментарий

Оценить 1 комментарий

AlekseyNemiro

Алексей Немиро @AlekseyNemiro

При правильном использовании, LESS и S(A|C)SS позволяют упростить исходный код, облегчить процесс разработки стилей.

Из некоторых фишек, которые я вывел для себя:
0. Разбиение «проекта стилей» на части и удобная сборка на выходе.
1. Вложенные стили — довольно удобно использовать. Исходный код красивее и понятней.
2. Переменные. При правильном использовании, можно легко менять стили, сделав какой-нибудь файл конфигурации.
3. Наследование стилей — можно определить базовые стили и использовать.
4. Циклы — можно, например, сделать стили для разных разрешений экранов, определив их всего один раз.

Еще спрайты — группировка небольших изображений в одно. Но это уже косвенно к теме относится.

Из минусов:
0. Сложность поддержки. Нельзя просто взять и поменять стили, их придется пересобирать.
1. Видел много излишне сложных «стилевых» проектов. Не понимаю, как элементарные вещи можно так сильно усложнять 🙂
2. Повышаются требования к front-end разработчику, и, как следствие, стоимость работ. Школьника для такой работы уже нанять не получится.

Решения вопроса 1
Full-stack developer (Symfony, Angular)

Лень двигатель прогресса. Хороший пример — принцип DRY — Don’t repeat yourself. Я весьма подозреваю что вы стараетесь соблюдать этот принцип когда делаете макеты или чем вы там занимаетесь. Так же я весьма уверен что вы хотя бы пытались чуть автоматизировать рутину своей повседневной работы. Так же у вас могли быть ситуации когда вы переиспользовали какие-то элементы. Мало ли.

организация стилей, то есть держать все в одном файле не удобно особенно когда проект длится годами
Дублирование стилей и селекторов. По мере развития проекта появляются какие-то снипиты которые можно реюзать. Так же у вас может появиться масса однообразных селекторов отличающихся лишь немного. При модульных подходах вложенности редко имеет место быть но все же имеет. Но не будем забывать что большинство фигачит селекторы просто так. В итоге если мы переместили блок или переименовали класс какого-то блока нужно отредактировать еще массу селекторов.
Привязка размеров и параметров к другим стилям, например у вас в стилях задана ширина блока, от нее зависят другие параметры, отступы для других блоков и т.д. Да, в css3 появился calc для этого но это было относительно недавно и только с недавних пор можно почти без опаски использовать эту штуку.
Таблицы стилей, как и HTML ориентированы на удобный разбор этого добра машиной, но не человеком. Человек же существо ленивое и как-то вот лень лишний раз скобку поставить или точку с запятой. Просто лень.

Есть так же хорошее правило, или идея если хотите. Если код можно сгенерить — его лучше сгенерить. То есть для решения всех выше перечисленных проблем придумали препроцессоры. Они как бы были и раньше всех этих scss/less/stylus но как-то не решали всех проблем и т.д. Что в итоге было предложено (перечисляю в том же порядке что и в списке выше).

У CSS есть такая штука как @ import. Но не очень круто импортировать сотню стилей в продакшене. Стоит сделать так что бы все стили были склеены при сборке проекта. Эта идея в итоге развилась и если разработчик использует это дело правильно, можно зайти в любой файл со стилями и увидеть список всего от чего зависят эти стили. Какие стили подключаются и т.д. Причем один файл с зависимостями может быть подключен в нескольких файлах а препроцессор сам разберется как и куда все вставлять сгенерив максимально оптимизированный по структуре файл. А разработчик получил четкую структуру файлов и возможность быстро найти где что и от чего зависит.
С селекторами проблему предложили решить наиболее логичным вариантом. Если у нас есть вложенные селекторы, то имеет смысл определять их внутри блока этого селектора. Это существенно упрощает поддержку стилей. Так же для управления снипитами и прочим добавили миксины — эдакие параметризованные или нет функции которые выплевывают шматок CSS. До появления штук вроде autoprefixer это был единственный способ писать поддерживаемые стили, использовать плюшки CSS3 и вообще новые плюшки и не сойти с ума от префиксов. Префиксы это только пример, там могут быть самые разные штуки позволяющие грамотно производить реюз стилей
Проблему зависимостей значений стилей друг от друга решили. собственно самым очевидным способом — переменные. Это удобно, легко поддерживать и в умелых руках это мощный инструмент. Нужно поменять базовые цвета — не нужно лазить по 100500 блоков и править значения руками, можно поправить переменные и все будет хорошо.
Насколько я помню SCSS/LESS не стремились решить эту проблему. Какие-то решения образовывались сами собой с течением времени. В плане минимализма и выразительности пожалуй сейчас самая крутая штука это stylus.

Что в итоге произошло. В один прекрасный момент какие-то там рубисты придумали SCSS (они вообще не любят все что не в стиле ruby в плане минимализма и выразительности). Затем чуваки подумали и сказали, SCSS это круто но почему-то они используют синтаксис знакомый именно Ruby разработчикам а не обычные для CSS конструкции. В итоге реализовали LESS, причем его уже реализовали на javascript, что с наличием node.js позволило это все добро еще на одной платформе собирать. А так как под эту платформу и так плодили препроцессоры оно удачно вписалось.

Далее уже шли какие-то модификации дальнейшие, вроде того же Stylus, где синтаксис упростили просто до нельзя.

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

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 все инструменты предназначены для предупреждения повторений в вашем коде: это принцип не повторяйся.

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