Less (мова стилів): відмінності між версіями
| [неперевірена версія] | [неперевірена версія] |
Вилучено вміст Додано вміст
м Єнотенко перейменував сторінку з LESS (мова стилів) на Less (мова стилів) |
мНемає опису редагування |
||
Рядок 17:
'''Less''' (іноді стилізується як '''LESS''') — це динамічна мова стилів, яка інтерпретується в [[Каскадні таблиці стилів|каскадні таблиці стилів (CSS)]]. Спроектована Алексісом Селлієром. Створена під впливом мови стилів [[Sass]], і в свою чергу вплинула на новий синтаксис Sass «SCSS», в якій також використаний синтаксис, який є розширенням [[Каскадні таблиці стилів|CSS]].<ref name="compare">[http://nex-3.com/posts/83-sass-and-less Sass and Less]</ref>
==
Less дозволяє визначати змінні. Змінні починаються зі знака (@). Присвоєння значень змінних здійснюється за допомогою [[Двокрапка|двокрапки]] (:).
Less підтримує чотири типи даних:
* [[число]]
* [[рядок]] (з [[Лапки|лапками]] чи без)
* [[Логічний тип даних|логічний (булевий) тип]]
* колір (ім'я або імена)
Змінна може бути [[Аргумент|аргументом]] чи [[Результат|результатом]] однієї чи кількох функцій. Під час трансляції значення змінних вставляються у вихідний (тобто результуючий) документ CSS.<ref name="main" />
<source lang="less">
@pale-green-color: #4D926F;
#header {
color: @pale-green-color;
}
h2 {
color: @pale-green-color;
}
</source>
Наведений вище Less код буде скомпільовано в CSS код:
<source lang="css">
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
</source>
== Вкладені правила ==
Одна з ключових особливостей Less — вкладені правила, які полегшують процес створення і редагування вкладених селекторів.
<source lang="less">
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 16px;
a {
text-decoration: none;
color: red;
&:hover {
border-width: 1px;
color: #fff;
}
}
}
}
</source>
Наведений вище Less код буде скомпільовано в CSS код:
<source lang="css">
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 16px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
</source>
== Домішки (міксини) ==
Для уникнення постійних повторень однакових правил CSS, в Less введені домішки. Домішки (міксини) дозволяють вбудовувати всі властивості класу в інший клас за рахунок включення ім'я класу в якості одної зі своїх властивостей, таким чином, вони ведуть себе як свого роду [[Константа (програмування)|константи]] або змінні. Вони також можуть вести себе як функції, і приймати аргументи. <ref name="main" />
<source lang="less">
.rounded-corners (@radius: 5px 10px 8px 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px 25px 35px 0px);
}
</source>
Наведений вище Less код буде скомпільовано в CSS код:
<source lang="css">
#header {
-webkit-border-radius: 5px 10px 8px 2px;
-moz-border-radius: 5px 10px 8px 2px;
border-radius: 5px 10px 8px 2px;
}
#footer {
-webkit-border-radius: 10px 25px 35px 0px;
-moz-border-radius: 10px 25px 35px 0px;
border-radius: 10px 25px 35px 0px;
}
</source>
Less має спеціальний тип набору правил — параметричні домішки(міксини), що можуть бути змішані подібно до класів, але приймають параметри.
== Примітки ==
<references/>
== Посилання ==
* [http://lesscss.org/ Офіційний сайт Less]
* [https://github.com/cloudhead/less.js Репозиторій вихідного коду (Git) ]
[[Категорія:Мови стилів]]
| |||