Я багато писав останнім часом про Sass, але за деякими недавніми коментарями я зрозумів, що не всі чітко уявляють, що таке Sass. Внесемо трохи ясності:
Коли ми говоримо про Sass, ми зазвичай маємо на увазі препроцесор та мову в цілому. Ми говоримо, наприклад, «ми використовуємо Sass», або «ось домішка Sass».
Тим часом, Sass (препроцесор) допускає два різні синтаксиси:
- Sass також відомий як синтаксис з відступами;
- SCSS, CSS-подібний синтаксис.
Спочатку Sass був частиною іншого препроцесора - Haml, який вигадали і написали розробники з Ruby.
Тому стилі Sass використовували Ruby-подібний синтаксис, без дужок, без крапок з комою та строгих відступів, наприклад:
// Змінна!primary-color= hotpink // Домішка =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !primary-color width= 100% overflow= hidden .my-other-element +border-radius(5px)
Як бачите, у порівнянні зі звичайним CSS різниця відчутна! Навіть якщо ви користувач Sass (препроцесора), ви можете бачити, що це дуже відрізняється від того, до чого ми звикли.
Змінна позначається через ! , а чи не $ , символ присвоєння значення = , а чи не : . Досить незвично.
Але так Sass виглядав до версії 3.0, випущеної в травні 2010 року, в якій був представлений новий синтаксис під назвою SCSS або Sassy CSS.
Його метою було наблизити синтаксис Sass до CSS, зробивши його більш сумісним із CSS:
// Змінна $primary-color: hotpink; // Домішка @mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; ) .my-element ( color: $primary -color; width: 100%; overflow: hidden; ) .my-other-element ( @include border-radius(5px); )
SCSS напевно ближчий до CSS, ніж Sass. Розробники Sass попрацювали над тим, щоб зробити обидва синтаксиси ближче один до одного, замінивши! (Знак змінної) і = (Знак присвоєння) на $ і: з CSS .
Тому при запуску нового проекту ви можете замислитись, який синтаксис використовувати. Дозвольте мені висвітлити цю тему і пояснити всі плюси та мінуси кожного із синтаксисів.
Плюси синтаксису Sassз відступамиХоча цей синтаксис може здаватися вам трохи дивним, він має кілька цікавих моментів. Насамперед, він коротший і його легше набирати. У ньому немає дужок та крапок із комою, вони не потрібні.
Навіть краще! У ньому не потрібні @mixin або @include, коли досить простого символу: = і +.
Також синтаксис Sass забезпечує чисті стандарти кодування через використання відступів. Так як неправильний відступ може зламати всю таблицю стилів .sass, тут у першу чергу забезпечується, щоб код був чистим і належним чином відформатованим.
Існує лише один метод складання кодів Sass: складати їх правильно.
Але будьте обережні! Відступи мають логічне значення в Sass. Коли застосовується відступ блоку селектора, це означає, що це вкладений селектор.
Наприклад:
Element-a color: hotpink .element-b float: left ... виводить наступний код CSS: .element-a ( color: hotpink; ) .element-a .element-b ( float: left; )
Простий факт зміщення .element-b на один рівень праворуч означає, що він є дочірнім елементомвід .element-a, що призводить до зміни результативного CSS-коду. Тож будьте обережні з відступами!
Як сторонній спостерігач, я думаю, що синтаксис на основі відступів, ймовірно, більше сподобається команді, яка працює в основному з Ruby/Python , ніж команді PHP/Java програмістів (хоча не факт, я хотів би почути зворотні думки).
Плюси SCSS синтаксисуДля початку він повністю сумісний з CSS. Це означає, що ви можете перейменувати файл CSS в .scss і він буде працювати, як ні в чому не бувало.
Створення SCSS, повністю сумісного з CSS, завжди було пріоритетом для підтримки Sass з самого моменту релізу SCSS, і, на мій погляд, це є серйозним аргументом.
Крім того, вони намагаються стежити за тим, що може стати валідним синтаксисом CSS у майбутньому, і реалізувати це (звідси @directives).
Так як SCSS сумісний із CSS, він практично не вимагає додаткового навчання. Синтаксис майже той самий: зрештою, це просто CSS із деякими доповненнями.
Це важливо для розробників-початківців: вони зможуть швидко почати складати код, майже нічого не знаючи про Sass.
Крім того, він більш читаний, тому що конкретні конструкції вже мають сенс. Коли ви бачите @mixin, ви знаєте, що це оголошення домішки; коли ви бачите @include, ви знаєте, що це виклик домішки.
Немає жодних прив'язок, і все має сенс без інтерпретації.
Також майже всі існуючі інструменти, плагіни та демо-презентації для Sass розробляються за допомогою синтаксису SCSS. Цей синтаксис стає дедалі більше орієнтованим на професіоналів і вибирається ними за умовчанням (якщо є єдино можливим).
Здебільшого з зазначених вище причин. Наприклад, стає все важче знайти підсвічування чистого синтаксису Sass з відступами; як правило, доступні лише варіанти підсвічування SCSS.
ВисновокВибір у будь-якому випадку залишається за вами, але якщо у вас немає дійсно вагомих причин використовувати синтаксис з відступами, я б настійно рекомендував використовувати SCSS, а не Sass. Це не тільки простіше, але й зручніше.
Якось я спробував синтаксис із відступами, і він мені сподобався. Особливо його стислість і простота. Я вже хотів було перевести всі свої робочі коди на Sass, але в останню хвилину передумав.
Я радий, що не зробив цей крок, тому що зараз мені було б дуже важко працювати з деякими інструментами, якби я використав синтаксис із відступами.
Крім того, зверніть увагу, Sass ніколи не позначається абревіатурою з великих літер, незалежно синтаксис це чи мову програмування. У той час, як SCSS завжди позначається великими літерами. Бажаєте дізнатися чому? Ознайомтеся з SassnotSASS.com!
Переклад статті "What's the Difference Between Sass and SCSS" був підготовлений дружньою командою проекту
Поки що у мене не виникла одна цікава ситуація кілька місяців тому. CSS ніколи не було для мене проблемою (хоча там у принципі нічого складного те й немає), але я був натхненний ідеєю про використання змінних для створення щось на зразок ліній палітри кольорів для шаблонів та веб-сайтів. Палітра з фіксованим числом опцій допомагає запобігти змішуванню кольорів та виділенню їх із вибраного стилю.
Як зрозуміти, навіщо використовувати LESS, а навіщо Sass? У принципі вони досить схожі між собою. Давайте розглянемо їх загальні характеристики:
* Mixins – класи для класів.
* Parametric mixins – класи, до яких можна застосувати параметри типу функцій.
* Nested Rules – класи всередині класів, які зрізають код, що повторюється.
* Operations - математика в межах CSS.
* Color functions – редагування кольорів.
* Namespaces - групи стилів, які можуть бути викликані посиланнями.
* Scope – добуток локальних змін у стилях.
* javascript evaluation - javascript-вирази, визначені в CSS.
Основна відмінність між LESS та Sass полягає в тому, яким чином вони виробляються. LESS – у бібліотеці JavaScript та, відповідно, виконує роботу на стороні клієнта.
Sass, у свою чергу, запускає Ruby та працює на серверній стороні. Багато розробників не користуються LESS через те, що на обробку коду движком javascript потрібно більше часу, і в результаті ми отримуємо змінений CSS-код для браузера. Існує кілька шляхів оперування. Я користуюсь тим, коли LESS використовується лише під час розробки. Як тільки я закінчую, я копіюю і вставляю результат, отриманий LESS в зменшувач коду, а потім в окремий CSS-файл, який повинен бути включений замість файлів LESS. Інший спосіб полягає у застосуванні для компіляції та мінімізації ваших файлів LESS. Обидва способи мінімізують наповнення ваших стилів, а також допоможуть уникнути проблем, які можуть виникнути, якщо браузер клієнта не підтримує JavaScript. Це буває рідко, але дану можливістьвиключати не можна.
Просимо вас також враховувати відгук від Адама Стковіака (Adam Stacoviak), який був написаний після бурхливих обговорень статті від Smashing Magazine у Twitter: «Насправді, Sass вимагає Ruby, хоча він і не повинен бути скомпільований у CSS-документі на сервері. Він може бути скомпільований локально (як було зазначено в LESS), і цей скомпільований файл може бути переміщений разом з вашим проектом, шаблоном для WordPress, Expression Engine і так далі. Так як це Smashing Magazine, і контингент користувачів може значно відрізнятися, я припускаю, що багато хто з вас використовують Mac. Отже, Ruby за замовчуванням є на всіх машинах Mac, так що проста установка Sass дозволить вам відразу ж розпочати роботу.
Як тільки ви встановили Sass, ви можете локально конвертувати його в CSS та переправити код із проектом, як я вже розповідав. Якщо ви не впевнені в тому, як розпочати роботу з Sass (або Compass), то ми написали досить детальний посібник під назвою «» (приступаємо до роботи з Sass або Compass)». Давайте все дружно подякуємо Адаму!
LESS – більше!
Встановлення
LESS досить просто впровадити у будь-який проект, над яким ви працюєте:
Змінні
Якщо ви розробник, то, напевно, змінні – ваші кращі друзі. Якщо вам потрібно кілька разів використовувати ту саму інформацію (наприклад, колір), налаштування змінної має велике значення. Таким чином, ви гарантуєте собі згуртованість документа і звільняєте себе від постійного скролінгу документа в пошуках потрібного hex-значення, щоб скопіювати його і використовувати в новому елементі. Ви навіть можете потішитись, додавши або виключивши hex-значення, які вам потрібно генерувати. Візьмемо даний приклад:
@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;
Якщо ми застосуємо дані стилі до трьох div'ів, то в нас вийде ефект градації, створений за допомогою додавання та виключення значення до та від природного синього:
Перехід від @light_blue до @blue до @dark_blue.
Єдина різниця між змінними в LESS і Sass полягає в тому, що LESS використовує @, а Sass - $. Існує також інші відмінності, але їх не так складно вивчити.
Mixins
По можливості, ми можемо створити стиль, призначений для використання повторно в тому самому документі таблиць стилів. Ніхто не забороняє вам використовувати кілька класів, застосовувати їх до елементів HTML, але ви також можете зробити це, не закриваючи документ CSS. Потрібно лише використовувати LESS. Для того, щоб продемонструвати це, я ставив деякий уривок коду, за допомогою якого можна стилізувати два елементи на сторінці.
Border (
border-top: 1px dotted #333;
}
article.post (
background: #eee;
.border;
}
ul.menu (
background: #ccc;
.border;
}
У вас вийде щось схоже на те, що ви сподівалися отримати, повернувшись до HTML-документу і додавши клас «.bordered» до обох елементів. Але важливо врахувати, що ви реалізували це, не закриваючи документ CSS. Це працює таким чином:
Як article, і невпорядкований список поділяють між собою стиль кордону.
За допомогою Sass ви оголошуєте @mixin пріоритетним для стилю для того, щоб визначити його як mixin. Далі ви оголошуєте @include для того, щоб викликати його.
@mixin border (
border-top: 1px dotted #333;
}
article.post (
background: #eee;
@include border;
}
ul.menu (
background: #ccc;
@include border;
}
Параметричні Mixins
За типом того, як ви використовуєте функції CSS, дана функціяможе бути особливо корисною для тих, хто охоче використовує і без того, начебто, безмежні можливості сучасних CSS. Найкращий і корисний приклад її використання відноситься до багатьох префіксів виробників браузерів, з якими стикаємося під час переходу від CSS2 до CSS3. Nettuts+ опублікували від Джеффрі Уея (Jeffrey Way), яка включає в себе детальну інформаціюпро впровадження файлу, що повністю складається з корисних параметричних mixin'ів. Стаття охоплює ваші улюблені параметри CSS3 із префіксами виробників. Наприклад, простий mixin для управління закругленими кутами в різних формах:
Border-radius(@radius: 3px) (
-webkit-border-radius: @ radius;
-moz-border-radius: @ radius;
border-radius: @ radius;
}
В даному випадку, клас «.border-radius» має радіус у 3 пікселі за замовчуванням, але ви можете ввести будь-яке завгодне значення, та отримати закруглені кути. Наприклад, ".border-radius (10px)" закруглить кути на 10 пікселів.
Синтаксис у Sass дуже схожий на LESS. Просто для змінних використовуйте $, і викликайте mixin'и за допомогою методів @mixin і @include, про які я згадував раніше.
Selector Inheritance (спадковість селектора)
Давайте розглянемо щось, чого немає в LESS. За допомогою даної можливості, ви можете застосувати селектор до вже встановленого селектора без потрібні вдаватися до формату з поділом через кому.
Menu (
border: 1px solid #ddd;
}
Footer (
@extend .menu;
}
/* will render like so: */
.menu, .footer (
border: 1px solid #ddd;
}
Nested Rules (Розгалужені правила)
Розгалуження класів та id у CSS – це, напевно, найкращий спосібзахистити ваші каскадні таблиці стилів від змішування з, або навпаки направити їх на взаємодію з іншими доданими таблицями. Але цей підхід часто може спричинити хороші обсяги коду. Використовуючи селектор типу «#site-body.post.post-header h2», у нас виходить дуже приємний оку код, який займає досить багато простору. За допомогою LESS ви можете розгалужувати id, класи та елементи як завгодно. Використовуючи наведений вище приклад, ви можете створити щось на кшталт цього:
#site-body (...
Post-header (...
&:visited ( … )
&:hover ( … )
}
}
}
}
Наведений вище код є абсолютно ідентичним некрасивому селектору, про який ми згадали в попередньому абзаці, але його набагато легше прочитати і зрозуміти, і займає він набагато менше місця. Ви також можете в стилізації елементів послатися на їх псевдо-елементи використовуючи "&" - в даному випадку ця функція схожа на "this" в javascript.
Операції
Тут буде приблизно те, чого ви й очікуєте: використання точних чисел або змінних для виконання математичних операцій у стилях.
@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page/2;
@quarter_page: (@full_page / 2) / 2;
До речі, я знаю, що я також можу розділяти елементи на 4 і отримувати змінні типу @quarter_page, але мені хотілося б продемонструвати те, що тут також доречне правило з круглими дужками. Дужки також будуть обов'язковими, якщо ви захочете провести операцію всередині параметра. Наприклад, "border: (@width / 2) solid #000".
Sass набагато універсальніший у випадку з цифрами, ніж LESS. Він був убудований в конверсійні таблиці для комбінування порівнюваних одиниць. Sass може працювати з невизначеними одиницями вимірів, а також виявляти їх. Ця властивість була представлена у спробі вкоренити значущість бібліотеки проти змін, які були внесені до W3C.
/* Sass */
2in + 3cm + 2pc = 3.514in
/* LESS */
2in + 3cm + 2pc = Error
Функції кольорів
Раніше я вже згадував, як LESS допомагає мені орудувати з колірною схемою в процесі написання коду. З цим також нероздільно пов'язана функція кольорів. Припустимо, що ви використовуєте стандартний синій колір по всьому документу стилів, і вам хочеться застосувати цей колір до відправної кнопки Submit у формі. Ви можете відкрити Photoshop або будь-який інший редактор, щоб отримати звідти hex значення (для кольору, який трохи світліший або темніший). Або можна просто використовувати функцію кольорів, передбачену в LESS.
Submit (
padding: 5px 10px;
border: 1px solid @blue;
background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}
Функція "lighten" у прямому сенсі освітлює колір за процентною шкалою. В даному випадку, функція висвітлить основний синій на 10%. Цей спосібдозволяє вам змінювати колір градованих елементів та будь-які інші елементи з таким самим кольором, просто змінюючи сам основний колір. Це може запропонувати значні можливості в процесі оформлення. До того ж, якщо ви використовували параметричну функцію (з тих, що описані вище), ви можете полегшити собі роботу над браузерними префіксами, перетворити їх на щось на кшталт «.linear-gradient(lighten(@blue), @blue, 100%) ;».
З іншого боку, у вас вийде досить гарний ефект:
Так і вийшла наша гарна градована кнопка Submit, заснована на змінній.
Існують і інші функції кольору для затемнення або зміни кольору кольорів, а також для обертання колеса до інших кольорів. Я рекомендую вам спробувати їх для того, щоб з'ясувати - які функції вам найбільше знадобляться.
Умовності та контроль
Ще одна досить корисна штуковина, запропонована в LESS. За допомогою Sass, у вас є можливість використовувати умовні вирази "if() else()", а також цикли "for()". Він підтримує оператори "and", "or" і "not", а також "", "=" та "==".
/* Sample Sass "if" statement */
@if lightness($color) > 30% (
background-color: #000;
) @else (
background-color: #fff;
}
/* Sample Sass "for" loop */
@for $i з 1px to 10px (
.border-#(i) (
border: $i solid blue;
}
}
Namespaces
Namespaces можуть бути використані для того, щоб додати ще один рівень у код CSS, що дозволяє нам створювати групи найбільш часто використовуваних стилів, а потім вибирати їх на ходу. Наприклад, якщо ми створили групу стилів під назвою defaults, ми можемо вибрати з цієї групи те, що нам потрібно, коли зберемося обробити певний елемент.
#defaults (
.nav_list () (
list-style: none;
margin: 0; padding: 0;
}
.button () ( … )
.quote () ( … )
}
Далі, у нашому коді, якщо ми зустрічаємося з елементом "ul" всередині елемента "nav", ми знатимемо, що нам буде потрібно стиль default. Отже, ми легко можемо застосувати його.
Nav ul (
#defaults > .nav_list;
}
Scope (облік рамок)
Враховувати рамки у програмуванні – це норма, отже, це така сама норма і в LESS. Якщо ви визначите змінну на кореневому рівні каскадну таблицю стилів, вона буде доступна для всього документа. Якщо ж ви, тим не менше, перевизначите змінну і прикріпите її до селектора типу id або class, то вона буде доступна лише з даним значенням лише в рамках цього селектора.
@color: #00c; /* blue */
#header (
@color: #c00; /* red */
Border: 1px solid @color; /* will have a red border */
}
#footer (
border: 1px solid @color; /* will have a blue border */
}
Так як ми знову оголосили змінну в селекторі «#header», значення до цієї змінної буде відрізнятися і буде застосовано тільки всередині цього селектора. Все, що буде до або після нього, збереже початкове оголошення.
Scope у Sass виконаний трохи іншим чином. У наведеному вище коді, коли змінна «@color» змінена на «red», вона буде інтерпретована в коді як є.
Comments (Коментарі)
Ця частина досить проста. У LESS валідні два типи коментарів. Стандартний CSS-коментар «/* comment */» - валідний і буде проведений через обробку і далі представлений. Однорядкові коментарі «// comment» також працюють, але вони не будуть проведені та виведені. Отже, можна повісити ярлик «silent».
Імпорт
Імпорт також цілком стандартний. Стандартний @import: "classes.less"; працює цілком непогано. Якщо ви імпортуєте інший файл LESS, розширення файлу буде опціональним. Отже, і @import "classes"; також буде працювати добре. Якщо ви хочете імпортувати щось без етапу обробки в LESS, ви можете використовувати розширення.css (наприклад, «@import: "reset.css";»).
String Interpolation (Інтерполяція рядків)
Рядкові дані також можуть бути використані в змінних і викликані в межах стилю за допомогою @ (name).
@base_url = "http://coding.smashingmagazine.com";
background-image: url("@(base_url)/images/background.png");
Escaping
Трапляються моменти, коли потрібно включати значення, яке не валідно для синтаксису CSS або яке LESS не розпізнає. Найчастіше така ситуація виникає за необхідності реалізувати якийсь хак для нормалізації роботи програми у продукції Microsoft. Щоб уникнути помилок та краху LESS, вам потрібно буде виключити їх.
Class (
filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}
/* Will actually be outputted like this: */
.class (
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}
javascript Evaluation (Визначення javascript)
Це одна з моїх улюблених частин у роботі з LESS: дуже просто використовувати JavaScript у стилях. Ви можете використовувати вирази, а також звертатися до функцій середовища розробки за допомогою зворотного апострофа (`).
@string: ``howdy''.toUpperCase()`; /* @string becomes "HOWDY" */
/* Вам може бути використано попередньо mentioned interpolation: */
@string: "howdy";
@var: ~`"@(string)".topUpperCase()`; /* becomes "HOWDY" */
/* Here we access part of the document */
@height = `document.body.clientHeight`;
Форматування на виході
Хоча LESS немає налаштувань при виведенні, Sass пропонує 4 версії виведення: гілляста, компактна, стисла і розширена.
Підсумок
Ці дві чудові бібліотеки поділяють багато спільного. Обидві є чудовими інструментами для дизайнерів, хто розробляє код, а також вони можуть допомогти розробникам працювати більш ефективно та швидше. Якщо ви фанат Ruby або HAML, то Sass точно вам підійде. Як на мене (а я розробник PHP та javascript), я дотримуюсь LESS, тому що його набагато простіше інтегрувати, а також здійснювати доступ до javascript-виразів та атрибутів документа. Я сумніваюся, що колись вдавався до справді серйозних навичок програмування, поки розробляв таблиці стилів, але думаю, що варто спробувати. Якщо ви користувалися обома бібліотеками, то мені хотілося б почути вашу думку та поради! Наш ресурс завжди радий отримувати коментарі!
- Переклад
"Яка препроцесорна мова варто використовувати для CSS?" є дуже актуальним питанням останнім часом. Кілька разів мене питали про це особисто, і здавалося б, кожні пару днів це питання порушувалося в мережі. Дуже приємно, що розмова перейшла з теми про плюси та мінуси препроцессингу до обговорення, яка ж мова є кращою. За справу!
Якщо бути коротким: SASS.
Трохи розгорнута відповідь: SASS краще по всіх пунктах, але якщо ви вже щасливі з LESS – це круто, принаймні ви вже спростили собі життя, використовуючи препроцесинг.
Графік навчання з Ruby та командним рядком Єдиним пунктом є синтаксис. Для компіляції створених вами файлів варто використовувати таку програму як CodeKit. Ви повинні знати основи Ruby або командного рядкаабо ще чогось іншого. Напевно, вам варто це знати, але не обов'язково, так що це не відіграє великої ролі.Переможець: ні.
CSS3 З будь-якою мовою ви можете створювати власні домішки для спрощення життя з префіксами. Тож тут немає переможця. Але чи знаєте ви, як зробити так, щоб не оновлювати ці префікси у своїх проектах? (Ні, не знаєте). Також вам, швидше за все, не доведеться оновлювати ваш власний файл із домішками. SASS дозволяє використовувати Compass завдяки автооновленням якого ви можете забути про проблеми з префіксами. Звичайно ж, ви можете оновлювати програмне забезпеченняі іноді його компілювати, але це очевидне завдання і не варто на цьому зациклюватися.Так що все це зводиться до наступного: у SASS є Compass, а у LESS його немає. Насправді все трохи заплутаніше. Усі спроби створити проект типу Compass для LESS зазнали невдачі. Справа в тому, що LESS не є достатньо сильною мовою, щоб зробити це коректно. Трохи докладніше буде нижче.
Переможець: SASS
Здібності мови: логіка/цикли LESS дозволяє створювати «захищені домішки». Ці домішки набудуть чинності тільки якщо умова правильна. Допустимо ви захочете змінити колір тла, який буде залежати від поточного кольору тексту. Якщо колір тексту "досить світлий" ви, напевно, захочете зробити темне тло. Якщо ж він "досить темний" - ви захочете світле тло. Таким чином у вас вийде домішка, розбита на дві частини з цими «захисниками», які гарантують, що тільки один з них буде виконаний.LESS
.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) ( background: black; ) .set-bg-color (@text-color) when (lightness(@text -color)< 50%) {
background: #ccc;
}
Після використання ви отримаєте відповідний фон:
LESS
.box-1 ( color: #BADA55; .set-bg-color(#BADA55); )
Це дуже просто, але суть, сподіваюся, зрозуміла. Ви можете робити речі набагато крутіше за це. LESS також дозволяє робити рекурсії, що посилається на себе, домішки яких можуть викликати самих себе з оновленими значеннями.
LESS
.loop (@index) when (@index > 0) ( .myclass ( z-index: @index; ) // Call itself .loopingClass(@index - 1); ) // Stop loop .loopingClass (0) () // Outputs stuff .loopingClass (10);
На цьому логіка/цикли в LESS закінчуються. SASS володіє актуальними логічними та циклічними операторами. if/then/else, цикл for, цикл while та цикл each. Без будь-яких трюків, справжнє програмування. SASS є досить надійною мовою, що робить можливим використання Compass.
Наприклад, у Compass є домішка background, яка є настільки потужною, що ви можете покласти в неї все, що захочете і в результаті отримаєте саме те, що вам потрібно. Картинки, градієнти та будь-яка їх комбінація, розділена комою - і ви отримуєте потрібний результат (включаючи префікси та інше).
Короткий шматок коду:
SCSS
.bam ( @include background(image-url("foo.png"), linear-gradient(top left, #333, #0c0), radial-gradient(#c00, #fff 100px)); )
Перетворюється цей код на монстра нижче (який, на жаль, потрібен з метою кросбраузерності):
CSS
.bam ( 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)); : url("/foo.png"), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px); .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); , radial-gradient(#cc0000, #ffffff 100px);
Переможець: SASS
Переможець: LESS
@extend концепція Припустимо, ви створили клас з деяким набором стилів. Потім вам доведеться створити ще один, який буде як попередній, але з деякими доповненнями. LESS дозволяє зробити це так:LESS
.module-b ( .module-a(); /* Copies everything from .module-a down here */ border: 1px solid red; )
Насправді це типовий «include». Ви також можете використовувати цю вставку в SASS, але краще це робити, використовуючи @extend . @extend не просто копіює стилі з .module-a в .module-b (що виробляє до роздування файлу), він змінює назву селектора .module-a на .module-a, .module-b у скомпілюваному CSS (що є більш ефективним способом).
SCSS
.module-a ( /* A bunch of stuff */ ) .module-b ( /* Some unique styling */ @extend .module-a; )
Компілюється в:
CSS
.module-a, .module-b ( /* A bunch of stuff */ ) .module-b ( /* Some unique styling */ )
Ви це бачите? SASS перевизначає селектори, і це ефективніший шлях.
Переможець: SASS
Обробка змінних LESS використовує @, SASS використовує $. Знак долара не використовується в CSS, чого не можна сказати про @. Він використовується для оголошення @keyframes або блоків @media. Ви можете вважати, що використання того чи іншого спецсимволу це справа смаку, але я думаю, що SASS має тут перевагу саме за рахунок того, що не плутає базові концепції.SASS має дивну властивість - якщо ви перевизначите «глобальну» змінну «локальною», глобальна змінна набуде її значення. Трохи дивно.
SCSS
$color: black; .scoped ( $color: white; color: $color; ) .unscoped ( // LESS = black (global) // SASS = white (overwritten by local) color: $color; )
Це трюк може бути корисним, але він зовсім не інтуїтивний, особливо якщо ви пишете Javascript.
Переможець: треба кинути монетку :)
Робота з правилами media Майже кожен із нас, починаючи працювати з правилами @media, додає блоки з ними внизу головної сторінкистилів. Це працює, але призводить до роз'єднання стилів, наприклад:CSS
.some-class ( /* Default styling */ ) /* Hundreds of lines of CSS */ @media (max-width: 800px) ( .some-class ( /* Responsive styles */ ) )
За допомогою SASS або LESS можна об'єднати ці стилі за допомогою вкладень.
SCSS
.some-class ( /* Default styling */ @media (max-width: 800px) ( /* Responsive styles */ ) )
"respond-to" - досить крута техніка SASS (ознайомтеся з кодом Chris Eppstein, Ben Schwarz, і Jeff Croft).
SCSS
=respond-to($name) @if $name == невеликий-скрін @media тільки екран і (min-width: 320px) @content @if $name == large-screen @media only screen and (min-width: 800px) @content
Далі використовувати їх можна дуже лаконічно:
SCSS
.column width: 25% +respond-to(small-screen) width: 100%
Примітка: для використання цієї техніки вам буде потрібний SASS 3.2, який поки що знаходиться в альфі, встановити його можна командою gem install sass --pre . Я думаю, що тут не повинно бути сумнівів у тому, що це дійсно корисна річ у розробці.
Переможець: SASS
Метематика В основному, математична частина в обох мовах досить схожа, але є деякі дивацтва при обробці одиниць вимірювання.Наприклад, LESS візьме за одиницю виміру значення першої змінної, ігноруючи решту.
LESS
div (width: 100px + 2em; // == 102px (weird))
SASS дасть вам чітко і ясно зрозуміти, що тут сховалася помилка:
Incompatible units: "em" і "px" . Звичайно, це спірне питання що краще – помилка чи неправильне значення, але особисто я – за перше. Особливо якщо ви віддаєте перевагу змінним замість використання цифр, це дуже ускладнює їх відстеження.
SASS дозволяє проводити математичні операції з невідомими одиницями вимірювання, які можуть з'явитися до наступного оновлення. LESS цього не дозволяє. Є ще дивніші відмінності, наприклад, як SASS множить числа з одиницями виміру, але про це не сьогодні.
Переможець: SASS (з натяжкою)
Від автора: насамперед, що таке препроцесор? Коротко препроцесор - це програма, що модифікує дані під вхідні вимоги іншої програми. Препроцесори CSS – це скриптова мова, що розширює можливості звичайного CSS змінними, правилами вкладеності, функціями та логічними блоками.
Навіщо мені його використати?Часто ви потраплятимете в ситуацію, коли доведеться використовувати однакове значення для певної якості в різних місцях. Наприклад, спочатку ви вказали червоний первинним кольором сайту. Потім вам потрібно змінити його на зелений.
Зі змінними вам не потрібно шукати і замінювати всі згадки червоного в стилях. Ви визначаєте значення змінної, наприклад, «primary color», а потім використовуєте цю змінну як значення.
Значення кольору primary змінюється в одному місці. Можна також імпортувати CSS файли з інших джерел, не думаючи про кількість мережевих запитів, оскільки перед компіляцією їх можна об'єднати в один файл.
Завдяки вкладеній природі CSS препроцесорів, Ви отримаєте компактний код з таким самим результатом. В основі LESS і SCSS лежить принцип DRY, який розшифровується як Don't repeat yourself або не повторюйтеся.
Препроцесори. Швидкий старт
Що не так із LESS?У мережі вже повно обговорень, що краще: LESS або SCSS. Тому я не докладно розкриватиму обидві теми. Натомість я розповім про маленькі проблеми, які у мене виникли з LESS.
SCSS використовує символ $ визначення змінних, а LESS – @. Оскільки CSS також використовує символ @ для медіа запитів, імпортів та keyframe анімації, це може ввести розробників в оману.
Символ $ не використовується в CSS. Символ @ є в SCSS, але він використовується для директив @if, @else, @each, @for та @while.
Хоча цей сценарій є реальним не для всіх, краще використовувати різні ідентифікатори для розділення елементів.
SCSS підтримує традиційні логічні вирази типу if/else, блоки та цикли. Guarded міксини в LESS легше для ока, але їх важче зрозуміти.
Можна зробити за допомогою LESS…
… чи просто за допомогою SCSS.
LESS визначає лише один guarded міксин. Тому не можна просто передати другий аргумент і обробити його в тому ж міксині, продублювавши код для всіх можливих сценаріїв. Насправді LESS (менше) означає більше (гра слів).
Я знаю, що можна скоротити код, використовуючи аугментовані значення як імена властивостей для цього випадку, але проблема в тому, що я не можу умовно зіставляти дві різні частини одного і того ж міксину з LESS.
З таким кодом головного болю більше…
Препроцесори. Швидкий старт
Вивчіть ази роботи з препроцесорами Less та Sass з повного нуля менш ніж за 2 тижні
… чим із таким.
Щоб досягти такого ж результату за допомогою LESS, мені довелося визначати все, писати міксин, отримувати позицію індексу, ітерувати його з моєю логікою доти, доки значення індексу не буде рівним нулю, і викликати міксин вручну.
Хоча це особисто моя думка, мені здається, що SCSS в цілому краще обробляє значення обчислень та математичні значення.
Що із цим не так?LESS, з іншого боку, набагато складніше. Наприклад, коли я використовую його, я не намагаюся проводити обчислення. Але навіть якби я це робив, відколи 100% мінус 50px дорівнює 50%?
LESS, чому ти ігноруєш значення з одиницями змін?
Навіщо ти змушуєш мене навчати твої милиці, коли я вже знаю CSS?
І останнє. Завдяки проекту LibSass, SCSS має багато обгорток для інших мов, наприклад, C, Go, PHP, Python, Dart і т.д.
Чому ми вирішили відмовитися від LESS для SCSS?Поки ми розробляли JotForm Cards, нам потрібно було заздалегідь обробляти значення змінних – попередня компіляція та кешування на стороні сервера одночасно; і все це потрібно було зробити ідеально.
Ми хотіли, щоб користувачі могли налаштовувати зовнішній виглядформ. Щоб будь-які зміни миттєво та одночасно відображалися та кешувалися на сервері. Заради наших користувачів ми не хотіли запускати клієнтську LESS-оболонку, тому що це вимагатиме обчислювальної потужності клієнта і багато чого може піти не так.
Ми не розпочали цикл розробки з метою переходу від LESS до SCSS. Але на півдорозі, займаючись цими незначними проблемами, відсутність гідної обгортки для LESS стала останньою краплею.
При цьому відмінності між LESS та SCSS менш важливі, ніж те, що їх поєднує. Зрештою, немає значення, який препроцесор ви використовуєте, якщо його використовуєте.
Намагатися керувати величезним проектом з одним CSS-файлом та традиційною структурою CSS набагато складніше, ніж використовувати препроцесор із кількома проблемами.
Синтаксис SASS мені імпонує більше, ніж SCSS за його стислість. Але велика вкладеність стилів у SASS може швидко ліквідувати всі переваги його стислості. У будь-якому разі різницю між SASS та SCSS не принципова. LESS виявився ближчим до SCSS ніж до SASS. І, загалом, це теж саме. Відмінностей небагато, але парочка їх принципово змінюють розстановку сил.
1. LESS – може client-side з використанням JS.Точніше він не те, щоб може, він на це і розрахований. Звичайна практика використання LESS-коду:
Це вже до нього прикрутили можливість компіляції на сервері (і js і ruby).
На перший погляд, якась дивна властивість. Навіщо компілити на стороні клієнта, якщо можна добре скомпилити на сервері і віддавати вже готову стиснуту CSS як ми звикли з SASS?
Причина стає видно після вивчення найпоказніших останніх рядках документації до LESS :
@height: `document.body.clientHeight`;
Ось такий маленький одинокий рядок дає можливості про які тільки мріяли верстальники з початку освоєння стилів. Виклик із CSS ява-скрипта на стороні клієнта та облік фактичних параметрів браузера під час створення стилів.
Тобто у нас з'явилася можливість спочатку завантажити DOM, а потім під нього створити спеціальний CSS прямо на стороні клієнта. Далі самі думайте, які можливості цей відкриває.
Чи потрібно це вашому проекту це питання інше. Зрозуміло, що всі звикли до клієнтської невідомості/незалежності та верстки у стилі «робимо універсально, щоб більш-менш показувалося у всіх на всіх дозволах». Але це не привід забувати, що тепер така можливість є і з нею ви можете робити, наприклад, ну дуже гумову верстку.
2. LESS, на відміну від SASS/SCSS немає логіки.У LESS немає if/then, for тощо. Хоча, враховуючи те, що в нього легко вбудовується JS, думаю логіку цілком можливо прикрутити. Не пробував.
3. У LESS простіше міксинг + мікс можна класи.Дуже сподобалося те, що в LESS можна включати визначення якості інших класів. Власне, клас і є міксином. Це ще одна особливість якої немає у SASS/SCSS. Ви можете включити в LESS звичайний CSS файл і використовувати його класи визначення своїх властивостей. Наприклад:
Wrap (
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre (.wrap)
За винятком 1-го пункту різниця не велика і вибір більша на любителя.
Особисто для мене LESS виглядає привабливішим через свою простоту. Цикли та умови у стилях мені ще ніколи не були потрібні. Класичні утиліти типу «box-shadow, linear-gradient, darken» у LESS є.
Так, під SASS написано вже багато готових бібліотек (