Весенние скидки до 30 000 ₽
На все профессии до 31 марта
Главная | Все статьи | Дневник студента

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

Время чтения статьи ~1 минута
Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
SASS против LESS с точки зрения новичка главное изображение

Скажу сразу, я считаю, что 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 — такой, достаточно простой итог.

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

Аватар пользователя Шахзод Давлатов
Шахзод Давлатов 20 сентября 2021
3
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 28 марта
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 28 марта
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 28 марта
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 28 марта
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время