Оскільки LESS є розширенням до CSS, бібліотека не тільки зворотньо сумісна із CSS, але й використовує існуючий синтакс. Це дозволяє напрочуд легко вивчати LESS і, в разі сумнівів, повернутися до використання CSS.

Змінні

Використання досить очевидне і не потребує пояснень:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

Згенерується:

#header { color: #6c94be; }

Також можна використовувати в якості імені змінної значення іншої змінної:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

Що скомпілюється в:

content: "I am fnord.";

Якщо оголосити змінну двічі, буде використовуватися останнє оголошення (пошук із поточної області видимості і вверх). Наприклад:

@var: 0;
.class1
  @var: 1;
  .class {
    @var: 2;
    three: @var;
	@var: 3;
  }
  one: @var;
}

Скомпілюється в:

.class1 .class {
  three: 3;
}
.class {
  one: 1;
}

Це, власне, подібно до css, де використовується значення із останнього по порядку оголошення.

Домішки

В LESS можливо включати в правила набір властивостей із інших правил. Скажімо, ми маємо наступний клас:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

І хочемо використати ці властивості в іншому правилі. Для цього нам всього лиш потрібно вказати назву класу всередині блоку правила, наприклад:

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

Властивості класу .bordered тепер з’являться в обох правилах #menu a та .post a:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Будь-який CSS class чи id може бути “підмішаний” таким чином.

На замітку: Змінні можуть також підмішуватися, відтак змінні із домішки будуть досутпні в поточній області видимості. Це спірно і може бути змінено в майбутньому.

Домішки з параметрами

LESS має спеціальний тип правил, котрі можуть ’підмішуватися’ як класи, але приймають параметри. Ось показний приклад:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Ось так ми можемо підмішати властивості до правил:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

Параметризовані домішки можуть, також, оголошуватися із параметрами ’за замовчуванням’:

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Тепер їх можна викликати наступним чином:

#header {
  .border-radius;
}

І таким чином підключиться 5px border із радіусом 5px.

Також можна використовувати параметризовані домішки, котрі не приймають параметрів. Це корисно, якщо ви хочете, щоб правила, які описує домішка не відображлися у результуючому CSS, але хочете, також, використовувати властивості всередині інших правил:

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

Вивід CSS:

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

Змінна @arguments

@arguments має спеціальне значення всередині домішок, змінна містить всі передані при виклику домішки аргументи. Це корисно, коли потрібно використовувати разом передані параметри:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

Виведе:

  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

Розширені аргументи та змінна @rest

Ви можете використовувати ... якщо ваша домішка може мати змінну кількість аргументів. Якщо вказати три крапки після імені змінної, то аргументи будуть занесені в цю змінну.

.mixin (...) {        // 0-N аргументів
.mixin () {           // рівно 0 аргументів
.mixin (@a: 1) {      // 0-1 аргументів
.mixin (@a: 1, ...) { // 0-N аргументів
.mixin (@a, ...) {    // 1-N аргументів

Крім того:

.mixin (@a, @rest...) {
   // в @rest занесуться аргументи після @a
   // в @arguments будуть всі аргументи
}

Шаблони

Інколи потрібно змінити поведінку домішки, в залежності від переданих параметрів. Розпочнемо із простого:

.mixin (@s, @color) { ... }

.class {
  .mixin(@switch, #888);
}

Тепер, скажімо, нам потрібно щоб .mixin працював інакше, в залежності від значення параметру @switch. Для цього можна оголосити .mixin наступним чином:

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

Тепер, якщо ми скомпілюємо

@switch: light;

.class {
  .mixin(@switch, #888);
}

Результуючий CSS виглядатиме так:

.class {
  color: #a2a2a2;
  display: block;
}

Де колір, переданий у .mixin перетворюється у світліший. Якщо значення @switch буде dark, результатом буде темніший колір.

Ось як працює таке ’перевантаження’:

• Перша домішка не підходить, оскільки значення її першого аргументу повинне бути dark.
• Друга домішка підходить, оскільки приймає першим аргументом light. - Третя домішка також підходить, оскільки її приймає довільні значення аргументів.

Використовуються лише ті домішки, котрі підходять. Змінні можуть співпадати і прив’язуватися до будь-якого значення. Все, що не є змінною, дає співпадіння, якщо дорівнює самому собі.

Можна також порівнювати арність, як приклад:

.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

Якщо тепер викликати .mixin з одним аргументом, отримаємо вивід першої домішки, але якщо передати два аргументи, виведеться результат виконання другої домішки.

Обмеження допустимих параметрів

Обмеження корисні, якщо потрібно порівнювати параметри із виразами, а не простими значеннями чи арністю. Якщо ви знайомі з фенкціональним програмуванням, то, певне, вже зустрічалися із подібними конструкціями.

Намагачись максимально відповідати декларативності CSS, LESS реалізує механізм умов через запобіжні домішки (на перевагу if/else операторам), в стилі специфікації @media query.

Наприклад:

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

Ключовим є вказання оператора when, котрий описує запобіжний вираз (в даному прикладі лише з однією умовою). Тому, якщо запустимо наступний код:

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

Отримаємо:

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

Повний список операторів порівняння, що використовуються в запобіжних умовах: > >= = =< <. Додатково, ключове слово true означає булеву істину, тому ці дві домішки еквівалентні:

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

Будь яке значення, відмінне від ключового true є булева хибність:

.class {
  .truth(40); // Не спрацює жодна із вещенаведених домішок.
}

Умови можуть бути розділені комами ’,’ – якщо одна із умов справдиться, домішка виконується:

.mixin (@a) when (@a > 10), (@a < -10) { ... }

Зверніть увагу, що ви також можете порівнювати аргументи один з одним, або із не-аргументами:

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

Нарешті, якщо ви хочете використовувати умови, базовані на типі змінної, можна використовувати функції вигляду is*:

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

Ось базові функції перевірки типу:

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

Якщо необхідно перевірити, що значення є не тільки числом, але і належить до певного натурального типу можна використовувати функції:

• ispixel
• ispercentage
• isem

Також можна використовувати ключове слово and для вказування додаткових обмежень всередині умови:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

І слово not для заперечення:

.mixin (@b) when not (@b > 0) { ... }

Вкладені правила

LESS надає можливість використовувати вкладення замість або разом із каскадуванням. Припустимо, маємо наступний CSS:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

В LESS, можна також записати його наступним чином:

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Або так:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

Як результат, коду менше і він повторює структуру дерева DOM.

Зверніть увагу на елемент & – він використовується у випадку, коли вкладений селектор потрібно сконкатевувати із батьківським, замість того, щоб використовувати його безпосередньо, як вкладений. Це особливо корисно при використанні псевдокласів, як то :hover та :focus.

Для прикладу:

.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}

Виведе:

.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}

Вкладені Media Queries

Media queries можуть бути вкладеними, так як і селектори, наприклад:

.one {
    @media (width: 400px) {
		font-size: 1.2em;
	    @media print and color {
		    color: blue;
        }			
	}
}

Виведе

@media (width: 400px) {
  .one {
	font-size: 1.2em;
  }
}
@media (width: 400px) and print and color {
  .one {
	color: blue;
  }
}

Використання &

Символ & можна використовувати у селекторах для того, щоб змінювати (інвертувати) порядок вкладеності та для “помноження” класів.

Наприклад:

.child, .sibling {
    .parent & {
	    color: black;
	}
	& + & {
	    color: red;
	}
}

Виведе

.parent .child,
.parent .sibling {
    color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
    color: red;
}

Ви, також, можете використовувати & в домішках, щоб посилатися на інші домішки, які знаходяться поза межами вашої.

Операції

З будь-яким числом, кольором чи змінною можна проводити математичні операції. Ось декілька прикладів:

@base: 5%;
@filler: (@base * 2);
@other: (@base + @filler);

color: (#888 / 4);
background-color: (@base-color + #111);
height: (100% / 2 + @filler);

Результат обрахунків доволі очікуваний — LESS розуміє різницю міє значеннями кольорів та іншими одиницями виміру. Якщо використовувати одиниці виміру у подібних наступній операціях:

@var: (1px + 5);

LESS використовуватиме для результату вказану одиницю виміру, у даному прикладі — 6px.

Дужки також дозволяються в операціях:

width: ((@var + 5) * 2);

Функції

LESS також має декілька функцій для перетворення кольорів, маніпулювання рядками і виконання математичних операцій. Вони докладно задокументовані у розділі функцій.

Використання доволі очевидне. У наступному прикладі використовується percentage для перетворення 0.5 в 50%, збельшення насиченості (saturation) базового кольору на 5% а потім встановлення кольору фону у підсвічений на 25% і повернутий на 8 градусів:

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(0.5); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Простори імен

Інколи, з метою організації, чи просто для інкапсуляції, виникає потреба згрупувати змінні чи домішки. Це робиться доволі інтуїтивно в LESS — скажімо, ви хочете об’єдняти ряд домішок та змінних в блоці #bundle для повторного використання, або розповсюдження:

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

Тепер, якщо потрібно ’змішати’ клас .button із #header a, можна записати це так:

#header a {
  color: orange;
  #bundle > .button;
}

Область видимості

Зони видимості в LESS дуже схожі із іншими мовами програмування. Змінні та домішки спочатку шукаються в локальній області видимості і якщо не знаходяться, компілятор перевіряє батьківський блок і т.д.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red
}

Коментарі

В LESS використовуються коментарі у стилі CSS:

/* Привіт, я коментар у стилі CSS! */
.class { color: black }

До того ж, однорядкові коментарі також дозволяються, але в скомпільованому коді вони не відображатимуться:

// Привіт, я ’мовчазний’ коментар, я не хочу показуватися у твоїх CSS
.class { color: white }

Імпорт

.less файли можна імпортувати, і всі змінні та домішки в них стануть доступними в файлі, в який вони імпотуються. Вказувати розширення .less не обов’язково, тому обидва записи правильні:

@import "lib.less";
@import "lib";

Якщо потрібно вмпортувати CSS файл і компілятор не повинен його обробляти, просто явно вкажіть розширення .css:

@import "lib.css";

Файл не буде підвантажуватися і відобразиться лише у скомпільованому CSS.

Якщо потрібно завантажити файл тільки у тому випадку, якщо він ще не був завантажений, використовуйте @import-once

@import-once "lib.less";
@import-once "lib.less"; // проігнорується

@import-once - поведінка “за замовчуванням” для @import у версії 1.4.0

Інтерполяція рядків

Змінні можна вставляти всередину рядків таким самим чином, як і в ruby чи PHP, використовуючи @{name} конструкцію:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

Екранування

Інколи потрібно вивести синтаксично не валідну CSS змінну, чи застосувати пропрієтарний синтаксис, який LESS не розпізнає.

Для того, щоб вивести подібні дані, помітіть їх всередині рядка із префіксом ~, наприклад:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

Це “екранована змінна”, результатом компіляції якої буде:

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

Інтерполяція селекторів

Якщо ви хочете використовувати змінні LESS всередині сеекторів, просто вкажіть змінну наступним чином: @{selector}, тобто, як і при інтерполяції рядків. Наприклад:

@name: blocked;
.@{name} {
    color: black;
}

виведе

.blocked {
    color: black;
}

Примітка: до версії LESS 1.3.1 підтримувався тип селеторів (~"@{name}"). Підтримка цього буде видалена у версії 1.4.0.

JavaScript вставки

JavaScript вирази можуть виконуватися всередині .less файлів. Ми рекомендуємо обережно використовувати цю можливість, оскільки LESS може не скомпілюватися і це робить підтримку LESS важчою. Якщо можливо, просто подумайте над функцією, яку можна додати, та зверніться з цього приводу на github. Є плани дозволити розширення функцій “за замовчуванням”. У будь-якому разі, якщо ви досі хочете використовувати JavaScript в .less, вкажіть код всередині зворотніх лапок:

@var: `"hello".toUpperCase() + '!'`;

Результат:

@var: "HELLO!";

Зверніть, також, увагу, що мо жна використовувати інтерполяцію та екранування, як і з рядками:

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

Результат:

@var: HELLO!;

Також є доступ до середовища JavaScript:

@height: `document.body.clientHeight`;

Якщо потрібно розпарсити рядок JavaScript, як hex колір, можна використати функцію color:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

  #Індекс

escape(@string);               // URL кодування рядку
e(@string);                    // екранування вмісту рядка
%(@string, values...);         // форматування рядка

unit(@dimension, [@unit: ""]); // видалити чи змінити одиниці вимірювання
color(@string);				   // розбір рядка в колір

ceil(@number);                 // округлити "вверх" до цілого значення
floor(@number);                // округлити "вниз" до цілого значення
percentage(@number);           // перетворення у відсотки %, напр. 0.5 -> 50%
round(number, [places: 0]);	   // оуркглити із точністю places

rgb(@r, @g, @b);                             // конвертація в колір
rgba(@r, @g, @b, @a);                        // конвертація в колір
argb(@color);                                // створити #AARRGGBB
hsl(@hue, @saturation, @lightness);          // створити колір
hsla(@hue, @saturation, @lightness, @alpha); // створити колір
hsv(@hue, @saturation, @value);              // створити колір
hsva(@hue, @saturation, @value, @alpha);     // створити колір

hue(@color);        // повертає `hue` канал кольору @color
saturation(@color); // повертає `saturation` канал кольору @color
lightness(@color);  // повертає 'lightness' канал кольору @color
red(@color);        // повертає 'red' канал кольору @color
green(@color);      // повертає 'green' канал кольору @color
blue(@color);       // повертає 'blue' канал кольору @color
alpha(@color);      // повертає 'alpha' канал кольору @color
luma(@color);       // повертає 'luma' значення (перцептивну яскравість) кольору @color

saturate(@color, 10%);                  // повертає колір на 10% *більш* насичений
desaturate(@color, 10%);                // повертає колір на 10% *менш* насичений
lighten(@color, 10%);                   // повертає колір на 10% *світліший*
darken(@color, 10%);                    // повертає колір на 10% *темніший*
fadein(@color, 10%);                    // повертає колір на 10% *менш* прозорий
fadeout(@color, 10%);                   // повертає колір на 10% *більш* прозорий
fade(@color, 50%);                      // повертає колір @color із прозорістю 50%
spin(@color, 10);                       // повертає на 10 градусів більший у відтінку колір
mix(@color1, @color2, [@weight: 50%]);  // поверає суміш @color1 та @color2
greyscale(@color);                      // повертає сірий, 100% ненасичений колір
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); 
                                        // повертає @darkcolor якщо @color1 яскравіший на 43%  
	                                    // у іншому випадку повертає @lightcolor

multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);

Функції роботи із текстом

escape

Застосовує URL-кодування до спеціальний символів у вхідному рядку.

* Наступні символи - виключення і не кодуються: ,, /, ?, @, &, +, ', ~, ! та $. * Найчастіші символи що кодуються: <space>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ та =.

Параметри:

• string: Рядок для кодування

Повертає: екранований string без лапок.

Приклад:

escape('a=1')

Результат:

a%3D1

Примітка: Поведінка функції, якщо параметр не рядок, або не визначений. Поточна реалізаціє повертає undefined для кольору і незмінене вхідне значення для аргументів іншого типу. Така поведінка може змінитися у наступних версіях.

e

CSS екранування, синтакс подібний до ~"value". Функція очікує аргументом рядок і повертає його вміст “як є”, але без лапок. Це можна використовувати для виводу CSS значення котре має або не валідний CSS синтакс, або використовує синтакс, який не підтримується LESS.

Параметри:

• string: Рядок для екранування

Повертає: string без лапок.

Приклад:

filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

Результат:

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

Примітка: Функція приймає, також, ~"" екрановані значення і числа, як параметри. Будь-що інше призведе до помилок.

% format

Функція %("format", arguments ...) форматує рядок. Перший аргумент - рядок із плейсхолдерами (placeholders). Всі плейсхолдери починаються із символу відсотка %, за яким йде літера s,S,d,D,a, чи A. Інші аргуманти містять значення для заміни плейсхолдерів. Якщо потрібно вивести символ відсотку, екрануйте його іншим символом відсотку %%.

Використовуйте плейсхолдери у верхньому регістрі, якщо потрібно екранувати спеціальні символи у їх utf-8 escape коди. Функція екранує всі спеціальні символи, крім ()'~!. Пробіл кодується як %20. Плейсхолдери у нижньому регістрі залишають спеціальні символи “як є”.

Плейсхолдери: * d, D, a, A - можуть бути замінені будь аргументами будь-якого типу (колір, число, екранована змінна, вираз, …). Якщо ви використовуєте їх у комбінації із рядком, буде використаний рядок повністю, із лапками. Тим не менше, лапки будуть вставлені у рядок “як є”, не екрановані ”/” чи подібно. * s, S - можуть бути замінені аргументами будь-якого типу, крім кольору. Якщо використовувати їх у комбінації із рядком, тільки значення рядка буде використовуватися - лапки пропустяться.

Параметри:

• string: формат рядка із плейсхолдерами,
• anything* : значення для заміни плейсхолдерів.

Повертає: форматований рядок string.

Приклад:

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");

Результат:

format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";

Змішані функції

color

Парсить колір, таким чином, рядок, що репрезентує колір, стає кольором.

Параметри:

• string: рядок із кольором

Приклад:

color("#aaa");

Результат:

#aaa

unit

Видалити або змінити одиниці виміру

Параметри:

• dimension: число із, або без, точності
• unit: Опціонально: одиниця виміру, в яку конвертувати, або, якщо пропущено, видалити одиницю виміру

Приклад:

unit(5, px)

Результат:

5px

Приклад:

unit(5em)

Результат:

5

Математичні функції

ceil

Округлення “вверх” до наступного, більшлго цілого значення.

Параметри:

• number: Дійсне число.

Повертає: ціле число

Приклад:

ceil(2.4)

Результат:

3

floor

Округлення числа “вниз” до попереднього, меншого цілого числа.

Параметри:

• number: Дійсне число.

Повертає: ціле число ціле число

Приклад:

floor(2.6)

Результат:

2

percentage

Конвертує дійсне число у відсотки.

Параметри:

• number: Дійсне число.

Повертає: string

Приклад:

percentage(0.5)

Результат:

50%

round

Округлення.

Параметри:

• number: Дійсне число.
• decimalPlaces: Опціонально: Точність округлення. За замовчуванням 0.

Повертає: number

Приклад:

round(1.67)

Результат:

2

Приклад:

round(1.67, 1)

Результат:

1.7

Функції кольору

Визначення кольору

rgb

Створює об’єкт непрозорого кольору із десяткових red, green та blue (RGB) значень. Стандартне значення кольору HTML/CSS формату можна також використовувати, наприклад #ff0000.

Параметри:

• red: Ціле цисло 0-255 або відсоток 0-100%.
• green: Ціле цисло 0-255 або відсоток 0-100%.
• blue: Ціле цисло 0-255 або відсоток 0-100%.

Повертає: колір

Приклад:

rgb(90, 129, 32)

Результат:

#5a8120

rgba

Створює об’єкт прозорого кольору із десяткових red, green, blue та alpha (RGBA) значень.

Параметри:

• red: Ціле число 0-255 або відсоток 0-100%.
• green: Ціле число 0-255 або відсоток 0-100%.
• blue: Ціле число 0-255 або відсоток 0-100%.
• alpha: Число 0-1 чи відсоток 0-100%.

Повертає: колір

Приклад:

rgba(90, 129, 32, 0.5)

Результат:

rgba(90, 129, 32, 0.5)

argb

Створює hex зображення кольору у форматі #AARRGGBB (НЕ #RRGGBBAA!).

Параметри:

• color: Об’єкт кольору.

Повертає: string

Приклад:

argb(rgba(90, 23, 148, 0.5));

Результат:

#805a1794

hsl

Створює об’єкт непрозорого кольору із hue, saturation та lightness (HSL) значень.

Параметри:

• hue: Ціле число 0-360, градуси.
• saturation: Відсоток 0-100% або число 0-1.
• lightness: Відсоток 0-100% або число 0-1.

Повертає: колір

Приклад:

hsl(90, 100%, 50%)

Результат:

#80ff00

Це корисно, якщо потрібно створити новий колір, базований на каналі іншого кольору, наприклад:

@new: hsl(hue(@old), 45%, 90%);

@new буде мати значення hue із @old і власні saturation та lightness.

hsla

Створює об’єкт прозорого кольору із hue, saturation, lightness та alpha (HSLA) значень.

Параметри:

• hue: Ціле число 0-360, градуси.
• saturation: Відсоток 0-100% або число 0-1.
• lightness: Відсоток 0-100% або число 0-1.
• alpha: Відсоток 0-100% або число 0-1.

Повертає: колір

Приклад:

hsl(90, 100%, 50%, 0.5)

Результат:

rgba(128, 255, 0, 0.5)

hsv

Створює об’єкт непрозорого кольору із hue, saturation та value (HSV) значень. Візьміть до уваги, що це не те ж, що і hsl.

Параметри:

• hue: Ціле число 0-360, градуси.
• saturation: Відсоток 0-100% або число 0-1.
• value: Відсоток 0-100% або число 0-1.

Повертає: колір

Приклад:

hsv(90, 100%, 50%)

Результат:

#408000

hsva

Створює об’єкт прозорого кольору із hue, saturation, value та alpha (HSVA) значень. Візьміть до уваги, що це не те ж, що і hsla.

Параметри:

• hue: Ціле число 0-360, градуси.
• saturation: Відсоток 0-100% або число 0-1.
• value: Відсоток 0-100% або число 0-1.
• alpha: Відсоток 0-100% або число 0-1.

Повертає: колір

Приклад:

hsva(90, 100%, 50%, 0.5)

Результат:

rgba(64, 128, 0, 0.5)

Інформація каналу кольору

hue

Обрахувати канал hue об’єкту кольору.

Параметри:

• color: Об’єкт кольору.

Повертає: ціле число 0-360

Приклад:

hue(hsl(90, 100%, 50%))

Результат:

90

saturation

Обрахувати канал saturation об’єкту кольору.

Параметри:

• color: Об’єкт кольору.

Повертає: відсотки 0-100

Приклад:

saturation(hsl(90, 100%, 50%))

Результат:

100%

lightness

Обрахувати канал lightness об’єкту кольору.

Параметри:

• color: Об’єкт кольору.

Повертає: відсотки 0-100

Приклад:

lightness(hsl(90, 100%, 50%))

Результат:

50%

red

Обрахувати канал red об’єкту кольору.

Параметри:

• color: Об’єкт кольору.

Повертає: ціле число 0-255

Приклад:

red(rgb(10, 20, 30))

Результат:

10

green

Обрахувати канал green об’єкту кольору.

Параметри:

• color: Об’єкт кольору.

Повертає: ціле число 0-255

Приклад:

green(rgb(10, 20, 30))

Результат:

20

blue

Обрахувати канал blue об’єкту кольору.

Параметри:

• color: Об’єкт кольору.

Повертає: ціле число 0-255

Приклад:

blue(rgb(10, 20, 30))

Результат:

30

alpha

Обрахувати канал alpha об’єкту кольору.

Параметри:

• color: Об’єкт кольору.

Повертає: дійсне число 0-1

Приклад:

alpha(rgba(10, 20, 30, 0.5))

Результат:

0.5

luma

Обраховує значення luma) (сприйняття яскравості) для об’єкту кольору. Використовується SMPTE C / Rec. 709 коефіцієнти, оскільки рекомендовані WCAG 2.0. Ці розрахунки також використовуються у функції контрасту.

Параметри:

• color: Об’єкт кольору.

Повертає: відсотки 0-100%

Приклад:

luma(rgb(100, 200, 30))

Результат:

65%

Операції із кольором

Функції операції із коьлором приймають параметри в одиницях виміру таких же, як і значення, які вони змінюють і відотки опрацьовуються, як абсолютні значення, тобто збільшення 10% відсоткового значення на 10% відсотків дасть у результаті 20%, а не 11%, і значння будуть у їх допустимих межах, тобто не вийдуть за рамки допустимих значень. Де вказані значання, що повертаються, ми також навели формати, для того щоб прояснити, що робить кожна функція, на додаток до hex варіантів, з якими, зазвичай, проводиться робота..

saturate

Збільшення насиченості кольору на абсолютне значення.

Параметри:

• color: Об’єкт кольору.
• amount: Відсоток 0-100%.

Повертає: колір

Приклад:

saturate(hsl(90, 90%, 50%), 10%)

Результат:

#80ff00 // hsl(90, 100%, 50%)

desaturate

Зменшення насиченості кольору на абсолютне значення.

Параметри:

• color: Об’єкт кольору.
• amount: Відсоток 0-100%.

Повертає: колір

Приклад:

desaturate(hsl(90, 90%, 50%), 10%)

Результат:

#80e51a // hsl(90, 80%, 50%)

lighten

Збільшення яскравості кольору на абсолютне значення.

Параметри:

• color: Об’єкт кольору.
• amount: Відсоток 0-100%.

Повертає: колір

Приклад:

lighten(hsl(90, 90%, 50%), 10%)

Результат:

#99f53d // hsl(90, 90%, 60%)

darken

Зменшення яскравості кольору на абсолютне значення.

Параметри:

• color: Об’єкт кольору.
• amount: Відсоток 0-100%.

Повертає: колір

Приклад:

darken(hsl(90, 90%, 50%), 10%)

Результат:

#66c20a // hsl(90, 90%, 40%)

fadein

Зменшення прозорості (чи збільшення непрозорості) кольору, зробити його більш непрозорим. Не має ніякого ефекту на повністю непрозоорих кольорах. Для застосування алгоритму у іншому напрямку використовуйте fadeout.

Параметри:

• color: Об’єкт кольору.
• amount: Відсоток 0-100%.

Повертає: колір

Приклад:

fadein(hsla(90, 90%, 50%, 0.5), 10%)

Результат:

rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

Збільшення прозорості (або зменшення непрозорості) кольору, зробити його менш непрозорим. Для застосування алгоритму у іншому напрямку використовуйте fadein.

Параметри:

• color: Об’єкт кольору.
• amount: Відсоток 0-100%.

Повертає: колір

Приклад:

fadeout(hsla(90, 90%, 50%, 0.5), 10%)

Результат:

rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.6)

fade

Встановити абсолютне значення прозорості лля кольору. Застосовне до кольорів, не зважаючи на те чи мають вони значення прозорості, або ні.

Параметри:

• color: Об’єкт кольору.
• amount: Відсоток 0-100%.

Повертає: колір

Приклад:

fade(hsl(90, 90%, 50%), 10%)

Результат:

rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

spin

Повернути кут відтінку (hue) у іншому напрямку. Кут відтінку приводиться до вигляду у межах 0-360, тобто кути від 360 до 720 та в межах 0-360 дадуть один і той самий результат. Візьміть до уваги, що до кольорів застосовується RGB перетворення, тобто значення hue не зберігається для сірих кольорів (оскільки відтінок не має сенсу, якщо немає насичення), тому переконайтеся, що застосовуєте функції таким чином, щоб зберегти відтінок, наприкад, не робіть наступним чином:

@c: saturate(spin(#aaaaaa, 10), 10%);

Правильно:

@c: spin(saturate(#aaaaaa, 10%), 10);

Кольори завжди повертаються, як RGB значення, тому застосування spin до сірого кольору не дасть результату.

Параметри:

• color: Об’єкт кольору.
• angle: Кількість градусів для повороту (+ or -).

Повертає: колір

Приклад:

spin(hsl(10, 90%, 50%), 20)
spin(hsl(10, 90%, 50%), -20)

Результат:

#f27f0d // hsl(30, 90%, 50%)
#f20d33 // hsl(350, 90%, 50%)

mix

Змішати два кольори разом, пропорційно. Прозорість також обраховується за пропорціями.

Параметри:

• color1: Об’єкт кольору.
• color1: Об’єкт кольору.
• weight: Опціонально, Відсоток - точка балансу між двома кольорами, за замовчуванням 50%.

Повертає: колір

Приклад:

mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)

Результат:

#800080
rgba(75, 25, 0, 0.75)

greyscale

Remove all saturation from a color; the same as calling desaturate(@color, 100%). Because the saturation is not affected by hue, the resulting color mapping may be somewhat dull or muddy; luma may provide a better result as it extracts perceptual rather than linear brightness, for example greyscale('#0000ff') will return the same value as greyscale('#00ff00'), though they appear quite different in brightness to the human eye.

Параметри:

• color: Об’єкт кольору.

Повертає: колір

Приклад:

greyscale(hsl(90, 90%, 50%))

Результат:

#808080 // hsl(90, 0%, 50%)

contrast

Вибрати, який із двох кольорів більш контрастний від іншого. Це корисно для того щоб переконатися, що колір читається на фоні, що також корисно для забеспечення доступності. Ця функція працює так само як contrast function in Compass for SASS. У відповідності до WCAG 2.0, кольори порівнються, використовуючи їх значення luma, а не яскравість.

Параметри:

• color: Об’єкт кольору з яким порівнювати.
• dark: optional - Темніший колір (за замовчуваннями чорний).
• light: optional - Світліший колір (за замовчуваннями білий).
• threshold: optional - Відсоток 0-100%, що вказує де знаходиться перехід від “темного” до “світлого” (за замовчуваннями 43%). Використовується для “зсуву” контрасту, наприклад, для того, щоб було можливим вирішити, чи 50% сірий фон дає у результаті чорний чи білий текст. Встановіть значення меншим для ‘світліших’ палітер та більшим для ‘темніших’ палітер. За замовчуванням 43%.

Повертає: колір

Приклад:

contrast(#aaaaaa)
contrast(#222222, #101010)
contrast(#222222, #101010, #dddddd)
contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%);
contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);

Результат:

#000000 // чорний
#ffffff // білий
#dddddd
#000000 // чорний
#ffffff // білий

Змішування кольорів

Ці операції однакові до змішування мод, як у редакторах, на кшталт Photoshop, Firework or GIMP, тому можна використовувати її для того, щоб зробити CSS кольори більш органічними до зображень.

multiply

Множення двох кольорів. Для кожного із двох кольорів RGB канал перемножується, а потім ділиться на 255. Результатом є темніший колір.

Параметри:

• color1: Об’єкт кольору для множення.
• color2: Об’єкт кольору для множення.

Повертає: колір

Приклади:

multiply(#ff6600, #000000);

multiply(#ff6600, #333333);

multiply(#ff6600, #666666);

multiply(#ff6600, #999999);

multiply(#ff6600, #cccccc);

multiply(#ff6600, #ffffff);

multiply(#ff6600, #ff0000);

multiply(#ff6600, #00ff00);

multiply(#ff6600, #0000ff);

screen

Ефект, протилежний до множення. Результатом є яскравіший колір.

Параметри:

• color1: Об’єкт кольору для операції screen.
• color2: Об’єкт кольору для операції screen.

Повертає: колір

Приклад:

screen(#ff6600, #000000);

screen(#ff6600, #333333);

screen(#ff6600, #666666);

screen(#ff6600, #999999);

screen(#ff6600, #cccccc);

screen(#ff6600, #ffffff);

screen(#ff6600, #ff0000);

screen(#ff6600, #00ff00);

screen(#ff6600, #0000ff);

overlay

Комбінує ефект multiply та screen. Відносно робить світлі канали світлішими і темні канали темнішими. Примітка: Результат умови визначається за першим параметром.

Параметри:

• color1: Об’єкт кольору для перекриття. Також визначає результат: світліший, чи темніший.
• color2: Об’єкт кольору для перекривання.

Повертає: колір

Приклад:

overlay(#ff6600, #000000);

overlay(#ff6600, #333333);

overlay(#ff6600, #666666);

overlay(#ff6600, #999999);

overlay(#ff6600, #cccccc);

overlay(#ff6600, #ffffff);

overlay(#ff6600, #ff0000);

overlay(#ff6600, #00ff00);

overlay(#ff6600, #0000ff);

softlight

Подібно до overlay, але дозволяє уникнути у результаті цілком білого, або цілком чорного кольору.

Параметри:

• color1: Об’єкт кольору для “_пом’якшення_”.
• color2: Об’єкт кольору що буде “_пом’якшений_”.

Повертає: колір

Приклад:

softlight(#ff6600, #000000);

softlight(#ff6600, #333333);

softlight(#ff6600, #666666);

softlight(#ff6600, #999999);

softlight(#ff6600, #cccccc);

softlight(#ff6600, #ffffff);

softlight(#ff6600, #ff0000);

softlight(#ff6600, #00ff00);

softlight(#ff6600, #0000ff);

hardlight

Подібно до overlay, але використовує другий колір, для визначення світлих і темних каналів, замість того, щоб використовувати перший колір.

Параметри:

• color1: Об’єкт кольору для перекриття іншого.
• color2: Об’єкт кольору який буде перекритим. Також визначальний колір для результату: світлішого чи темнішого.

Повертає: колір

Приклад:

hardlight(#ff6600, #000000);

hardlight(#ff6600, #333333);

hardlight(#ff6600, #666666);

hardlight(#ff6600, #999999);

hardlight(#ff6600, #cccccc);

hardlight(#ff6600, #ffffff);

hardlight(#ff6600, #ff0000);

hardlight(#ff6600, #00ff00);

hardlight(#ff6600, #0000ff);

difference

Віднімає другий колір від першого. Операція виконується для кожного RGB каналу. Результатом є темніший колір.

Параметри:

• color1: Об’єкт кольору, ділене.
• color2: Об’єкт кольору, дільник.

Повертає: колір

Приклад:

difference(#ff6600, #000000);

difference(#ff6600, #333333);

difference(#ff6600, #666666);

difference(#ff6600, #999999);

difference(#ff6600, #cccccc);

difference(#ff6600, #ffffff);

difference(#ff6600, #ff0000);

difference(#ff6600, #00ff00);

difference(#ff6600, #0000ff);

exclusion

Подібно до difference із меншим контрастом.

Параметри:

• color1: Об’єкт кольору, ділене.
• color2: Об’єкт кольору, дільник.

Повертає: колір

Приклад:

exclusion(#ff6600, #000000);

exclusion(#ff6600, #333333);

exclusion(#ff6600, #666666);

exclusion(#ff6600, #999999);

exclusion(#ff6600, #cccccc);

exclusion(#ff6600, #ffffff);

exclusion(#ff6600, #ff0000);

exclusion(#ff6600, #00ff00);

exclusion(#ff6600, #0000ff);

average

Обчислити середнє значення двох кольорів. Операція виконується по-канально (RGB).

Параметри:

• color1: Об’єкт кольору.
• color2: Об’єкт кольору.

Повертає: колір

Приклад:

average(#ff6600, #000000);

average(#ff6600, #333333);

average(#ff6600, #666666);

average(#ff6600, #999999);

average(#ff6600, #cccccc);

average(#ff6600, #ffffff);

average(#ff6600, #ff0000);

average(#ff6600, #00ff00);

average(#ff6600, #0000ff);

negation

Протилежний до difference ефект. Результатом є яскравіший колір. Примітка: Під ефектом opposite не розуміється ефект інвертування як результат операції додавання.

Параметри:

• color1: Об’єкт кольору, ділене.
• color2: Об’єкт кольору, дільник.

Повертає: колір

Приклад:

negation(#ff6600, #000000);

negation(#ff6600, #333333);

negation(#ff6600, #666666);

negation(#ff6600, #999999);

negation(#ff6600, #cccccc);

negation(#ff6600, #ffffff);

negation(#ff6600, #ff0000);

negation(#ff6600, #00ff00);

negation(#ff6600, #0000ff);