CSS препроцессоры сравнивали Sass с LESS
Существует несколько CSS-препроцессоров, LESS, Sass, Stylus и Swith CSS, и это лишь некоторые из них.. CSS препроцессор, как мы часто говорили ранее, в первую очередь предназначен для того, чтобы сделать разработку CSS более динамичной, организованной и продуктивной. Но, вопрос в том, кто из них делает работу лучше?
Ну, конечно, мы не будем рассматривать каждый из них, вместо этого мы будем сравнивать только два наиболее популярных: Дерзко и менее. Чтобы решить, мы сравним два из семи факторов: тот, который работает лучше, получает одно очко; в случае ничьей оба получат одно очко.
Давай начнем.
Монтаж
Давайте начнем с самого фундаментального шага, Монтаж. И Sass, и LESS построены на разных платформах, Sass работает на Ruby, а LESS - это библиотека JavaScript (которая было на самом деле также построен на Ruby вначале).
Sass: Для работы Sass требуется Ruby, в Mac он был предварительно установлен, но в Windows вам, вероятно, нужно установить его, прежде чем вы сможете начать играть с Sass. Кроме того, Sass необходимо установить через терминал или командную строку. Есть несколько приложений с графическим интерфейсом, которые вы можете использовать на месте, но они не являются бесплатными.
МЕНЬШЕ: LESS построен на JavaScript, поэтому внедрить LESS так же просто, как связать библиотеку JavaScript с вашим HTML-документом. Есть также несколько приложений с графическим интерфейсом, которые помогут скомпилировать LESS в CSS, и большинство из них бесплатны и работают очень хорошо (например, WinLess и LESS.app).
Заключение: LESS явно лидирует.
расширения
И Sass, и LESS имеют расширения для более быстрой и простой веб-разработки..
пререкаться: В нашем последнем посте мы обсуждали Compass, текущее и популярное расширение на основе Sass. У Compass есть несколько Mixins для написания синтаксиса CSS3 за меньшее время.
Но Compass - это больше, чем просто CSS3 Mixins, он добавил другие очень полезные функции, такие как Helpers, Layout, Typography, Grid Layout и даже Sprite Images. Он также имеет config.rb файл, в котором мы можем контролировать вывод CSS и некоторые другие параметры. Короче говоря, Compass - это универсальный пакет для веб-разработки с Sass..
МЕНЬШЕLESS также имеет несколько расширений, но в отличие от Compass, в котором есть все необходимое в одном месте, они разделены, и каждое из них создано разными разработчиками. Это не будет проблемой для опытных пользователей, но для тех, кто только начинает работать с LESS, им нужно некоторое время, чтобы выбрать правильные расширения, которые соответствуют их рабочему процессу..
Вот несколько расширений LESS, которые вам может понадобиться включить в ваш проект:
- CSS3 Mixins: LESS Elements, Предварительная загрузка, LESS Mixins.
- сетка: 960.gs, Безрамное, Semantic.gs
- раскладка: Даже меньше
- Разное: Twitter Bootstrap
Заключение: Я думаю, что мы должны согласиться, что Sass и Compass - отличный дуэт, а функция изображения Sprite действительно потрясающая, поэтому один момент для Sass здесь.
Языки
Каждый препроцессор CSS имеет свой собственный язык, и они в основном распространены. Например, как Sass, так и LESS имеют переменные, но в этом нет существенной разницы, за исключением того, что Sass определяет переменные с $ в то время как LESS делает это с @ знак. Они все еще делают то же самое: хранить постоянное значение.
Ниже мы рассмотрим некоторые из наиболее часто используемых языков как в Sass, так и в LESS (основываясь на моем опыте).
гнездование
Правило вложения - это хорошая практика, чтобы избежать многократного написания селекторов, а в Sass и LESS правила вложения одинаковы;
Sass / Scss и LESS
nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; ul padding: 0; поле: 0;
Но Sass / Scss продвигает этот метод на шаг вперед, позволяя нам также вкладывать отдельные свойства, вот пример:
nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; ul padding: 0; поле: 0; рамка: стиль: сплошной; слева: ширина: 4 пикселя; цвет: # 333333; справа: ширина: 2 пикселя; цвет: # 000000;
Этот код будет генерировать следующий вывод.
nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; стиль границы: твердый; border-left-width: 4px; цвет рамки слева: # 333333; border-right-width: 2px; цвет границы справа: # 000000; nav ul padding: 0; поле: 0;
Заключение: Вложение отдельных свойств является хорошим дополнением и считается лучшая практика, особенно если мы будем следовать принципу СУХОЙ (не повторяй себя). Итак, я думаю, что ясно, какой из них лучше в этом случае.
Наследование миксинов и селекторов
Mixins в Sass и LESS определены немного по-разному. В Sass мы используем@mixin директива, в то время как в LESS мы определяем это с помощью селектора класса. Вот пример:
Sass / SCSS
@mixin border-radius ($ values) border-radius: $ values; nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; @include border-radius (10px);
МЕНЬШЕ
.border (@radius) border-radius: @radius; nav margin: 50px auto 0; ширина: 788 пикселей; высота: 45 пикселей; .border (10px);
Mixins, в Sass и LESS, используется для включают свойства из одного набора правил в другой набор правил. В Sass этот метод получил дальнейшее развитие Наследование селектора. Концепция идентична, но вместо копирования целых свойств Sass расширит или сгруппирует селекторы, которые имеют одинаковые свойства и значения, используя @extend директива.
Посмотрите на этот пример ниже:
.круг граница: 1px solid #ccc; радиус границы: 50 пикселей; переполнение: скрытое; .avatar @extend .circle;
Этот код будет выглядеть как;
.круг, .avatar border: 1px solid #ccc; радиус границы: 50 пикселей; переполнение: скрытое;
Заключение: Sass на шаг впереди благодаря уникальному наследованию миксов и селекторов.
операции
И Sass, и LESS могут выполнять основные математические операции, но иногда они возвращают разные результаты. Посмотрите, как они выполняют этот случайный расчет:
Sass / SCSS
маржа в долларах: 10px; div margin: $ margin - 10%; / * Синтаксическая ошибка: несовместимые единицы: '%' и 'px' * /
МЕНЬШЕ
@margin: 10 пикселей; div margin: @margin - 10%; / * = 0px * /
ЗаключениеВ этом случае Sass делает это более точно; поскольку% и px не эквивалентны, они должны возвращать ошибку. Хотя, я на самом деле надеюсь, что это может быть что-то вроде 10px - 10% = 9px.
Уведомления об ошибках
Уведомление об ошибке важно, чтобы увидеть, что мы делаем неправильно. Представьте себе тысячи строк кода и небольшую ошибку где-то в хаосе. Чистота уведомление об ошибке будет лучшим способом быстро решить проблему.
пререкатьсяВ этом примере я просто использую командную строку для запуска компилятора. Sass выдаст уведомление об ошибке всякий раз, когда в коде есть недействительность. В этом случае мы удалим одну точку с запятой в строке 6, и это должно привести к ошибке. Посмотрите на скриншот ниже.
Когда я впервые увидел это уведомление, я едва мог его понять. Кроме того, кажется, что Sass немного отличается от того, где ошибка. Он сказал, что ошибка на строка 7, вместо 6.
МЕНЬШЕ: С тем же сценарием ошибки, LESS уведомление более хорошо представлено, и оно также кажется более точным. Посмотрите на этот скриншот:
Заключение: LESS обеспечивает лучший опыт в этом вопросе, и выигрывает руки вниз.
Документация
Документация является очень важной частью для каждого продукта; даже опытным разработчикам было бы трудно обойтись без Документация.
пререкатьсяЕсли мы посмотрим документацию на официальном сайте, лично мне кажется, что я нахожусь в середине библиотеки, документация очень полная. Тем не менее, внешний вид, если это имеет значение для вас, не мотивирует для чтения, плюс фон просто белый.
Презентация больше похожа на документацию W3 или WikiPedia. Я не знаю, является ли это стандартом отображения документации в Интернете, но это не единственный способ.
МЕНЬШЕС другой стороны, документация LESS более понятна без слишком большого количества текстовых пояснений и прямо в примерах. Он также имеет хорошую типографику и лучшую цветовую гамму. Я думаю, что именно поэтому LESS привлек мое внимание в первую очередь, и я могу выучить это быстрее благодаря макету и представлению документации.
Заключение: Презентация документации LESS лучше, хотя у Sass есть более полная документация, так что я думаю, что мы можем назвать это галстуком.
Последняя мысль
Я думаю, что это четкий вывод, что Sass лучше с общим счетом 5 против 3 для МЕНЬШЕ. Однако это не значит, что МЕНЬШЕ плохое; им просто нужно быть лучше. В конце концов, все еще зависит от решения конечного пользователя выбрать препроцессор по своему выбору. Будь то Sass или МЕНЬШЕ, если они удобны и продуктивны, тогда это победитель в их списке.
Наконец, если у вас есть какие-либо мысли по этому вопросу, не стесняйтесь поделиться этим в поле для комментариев ниже.
