Less (мова стилів): відмінності між версіями

Змінна може бути [[Аргумент|аргументом]] чи [[Результат|результатом]] однієї чи кількох функцій. Під час трансляції значення змінних вставляються у вихідний (тобто результуючий) документ CSS.<ref name="main" />

 

@pale-green-color: #4D926F;

 

color: @pale-green-color;

}

 

Наведений вище Less код буде скомпільовано в CSS код:

#header {

color: #4D926F;

color: #4D926F;

}

 

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

Одна з ключових особливостей Less&nbsp;— вкладені правила, які полегшують процес створення і редагування вкладених селекторів.

 

#header {

h1 {

}

}

 

Наведений вище Less код буде скомпільовано в CSS код:

#header h1 {

font-size: 26px;

color: #fff;

}

 

== Домішки (міксини) ==

Для уникнення постійних повторень однакових правил CSS, в Less введені домішки. Домішки (міксини) дозволяють вбудовувати всі властивості класу в інший клас за рахунок включення імені класу як одної зі своїх властивостей, таким чином, вони ведуть себе як свого роду [[Константа (програмування)|константи]] або змінні. Вони також можуть вести себе як функції, і приймати аргументи. <ref name="main" />

 

.rounded-corners (@radius: 5px 10px 8px 2px) {

-webkit-border-radius: @radius;

.rounded-corners(10px 25px 35px 0px);

}

 

Наведений вище Less код буде скомпільовано в CSS код:

#header {

-webkit-border-radius: 5px 10px 8px 2px;

border-radius: 10px 25px 35px 0px;

}

Less має спеціальний тип набору правил&nbsp;— параметричні домішки(міксини), що можуть бути змішані подібно до класів, але приймають параметри.

 

Less дозволяє виконувати операції та функції. До дозволених операцій входять додавання, віднімання, ділення і множення значень властивостей і кольору, які можуть бути використані для створення складних взаємозв'язків між властивостями.

 

@the-border: 1px;

@base-color: #111;

border-color: desaturate(@red, 10%);

}

 

Наведений вище Less код буде скомпільовано в CSS код:

 

#header {

color: #333333;

border-color: #7d2717;

}

 

== Примітки ==