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