Sass и LESS препроцессоры

Содержание

1 Sass в Ruby, а LESS в Javascript
2 Чтобы назначить переменные, Sass использует ‘$’, а LESS использует ‘@’
3 У Sass есть компас, а у LESS есть предзагрузка
4 МЕНЬШЕ имеет лучшие сообщения об ошибках, чем Sass
5 У LESS больше удобной документации, чем у Sass

Кокс или Пепси, Mac или ПК, Marvel или DC? В каждом сообществе есть спор о том, что лучше. Для веб-дизайнеров или разработчиков эта дискуссия — Sass или LESS.

Синтаксически Awesome Stylesheets (Sass) и Leaner CSS (LESS) являются препроцессорами CSS. Это специальные расширения таблиц стилей, которые делают проектирование проще и эффективнее. И Sass, и LESS компилируются в таблицы стилей CSS, чтобы браузеры могли их читать. Это необходимый шаг, потому что современные браузеры не могут читать файлы типа .sass или .less.

Если вы планируете быть в мире веб- разработки , неплохо бы разбираться в одном из двух препроцессоров, если не в обоих . Когда дело доходит до этого, у них много общего. Они делают написание CSS более простым, более объектно-ориентированным и более приятным. Тем не менее, есть несколько ключевых отличий.

Sass в Ruby, а LESS в Javascript

Дизайнеры рассматривают идеи на настольном компьютере — Шеннон Фаган / Getty Images

Sass основан на Ruby и требует установки Ruby. Это не страшно, если у вас есть Mac . Тем не менее, это более длительная установка, если у вас есть компьютер с Windows.

LESS был построен в Ruby, как и Sass, но он был портирован на JavaScript. Чтобы использовать LESS, вы должны загрузить соответствующие файлы JavaScript на свой сервер или скомпилировать листы CSS с помощью автономного компилятора.

Чтобы назначить переменные, Sass использует ‘$’, а LESS использует ‘@’

два мужских программиста CSS сидят перед ноутбуком и настольным монитором в офисе — Луис Альварес / Getty Images

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

В Sass это знак доллара ($). В LESS это символ «at» (@). Единственным недостатком LESS является то, что есть несколько существующих CSS-селекторов, которые уже используют @. Это осложнение может немного усложнить обучение.

У Sass есть компас, а у LESS есть предзагрузка

группа веб-программистов, сидящих с ноутбуками, один ноутбук отображает строки кода — Caiaimage / Gertty Images

У Sass и LESS есть расширения для интеграции миксинов (возможность хранить и обмениваться объявлениями CSS по всему сайту).

Sass использует Compass для mixins, который включает в себя все опции, доступные с обновлениями для будущей поддержки.

У LESS есть Preboot.less, LESS Mixins, LESS Elements, gs и Frameless. Программная поддержка LESS более фрагментирована, чем Sass, что приводит к множеству различных вариантов расширений, которые могут работать не одинаково. Для вашего проекта вам может понадобиться использовать несколько (или все) из перечисленных расширений для репликации производительности Compass.

МЕНЬШЕ имеет лучшие сообщения об ошибках, чем Sass

программист-компьютерщик просматривает строки кода — Разван Чису / Getty Images

И Sass, и LESS были протестированы на способность сообщать об ошибках в синтаксисе. LESS имеет более точные сообщения об ошибках в тестах — он сообщал правильное местоположение ошибки. Это может пригодиться, когда опечатка портит код. Сообщения об ошибках LESS могут помочь вам быстро выявить проблему.

У LESS больше удобной документации, чем у Sass

веб-программист сидит перед ноутбуком в кафе — Изображения героя / Getty Images

Документация LESS визуально привлекательна и проще для начинающих пользователей. Документация Sass требует либо гораздо больше базовых знаний, либо частых перекрестных ссылок с вики во время установки.

Этот факт сам по себе может сильно повлиять на скорость принятия Sass или LESS.