2. ИСТОРИЯ LESS
Динамический язык стилей, который разработал Alexis Sellier
Это продукт с открытым исходным кодом.
Первая версия была написана на Ryby, однако в последующих версиях
решено отказаться от использования в пользу JavaScript.
Валидный CSS будет валидной less-программой
3. • Удобен в использовании
• Регулярные обновления и множество документации
• Позволяет писать упрощенный css-код
• (Который затем компилируется в чистый CSS.)
• Реализация переменных
• (Теперь нет необходимости десятки раз копировать
один и тот же участок
• кода, достаточно раз запихнуть его в переменную и
просто указывать ее,
• когда требуется.)
• Так же добавляются операции, function-like элементы и
примеси
ЧЕМ LESS МОЖЕТ БЫТЬ
ПОЛЕЗЕН В РАЗРАБОТКЕ
4. Есть два способа использования LESS. Вы
можете создать LESS файл и конвертировать
его при помощи Javascript на лету или
скомпилировать его заранее и использовать
получившийся CSS файл.
КАК ИСПОЛЬЗОВАТЬ LESS
5. Для начала нужно скачать с сайта LESS
Javascript файл и привязать его к страничке
как любой другой js скрипт.
<script src="less.js“ type="text/javascript"></script>
Затем создадим файл с расширением .less и
привяжем его с помощью такого кода:
<link rel="stylesheet/less" type="text/css" href="style.less">
ИСПОЛЬЗУЕМ LESS И
JAVASCRIPT ФАЙЛ
6. Чтобы не конвертировать код при каждой
загрузке страницы можно использовать
результирующий CSS файл.
Для его компиляции существует множество
оффлайн и онлайн ресурсов.
КОМПИЛИРУЕМ LESS ФАЙЛ
7. ВЛОЖЕННЫЕ ПРАВИЛА
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
LESS даёт возможность вкладывать
определения вместо либо
вместе с каскадированием. Пусть, например, у
нас есть такой
CSS: CSS поддерживает логическое
каскадирование, но один
блок кода в другой вложен быть не может.
LESS позволяет
вложить один селектор в другой. Это делает
наследование
более ясным и укорачивает таблицы стилей.
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration:
none;
&:hover {
border-
width: 1px
}
}
}
}
8. Переменные в LESS работают так же как в PHP, JS и
в большинстве других языков программирования.
Имя переменной предваряется символом @. В качестве знака
присваивания используется двоеточие (:).
@header-font: Georgia;
h1, h2, h3, h4 {
font-family: @header-font;
}
.large {
font-family:@header-font;
}
ПЕРЕМЕННЫЕ
9. Область видимости переменных описывает места, где они
доступны. Если вы определите переменную в самом начале
LESS файла, то она будет доступна для любого кода
написанного после.
Также можно определять переменную внутри CSS правила. В
этом случае переменные не будут доступны вне этого
правила, они могут быть использованы локально.
a {
@color: #ff9900;
color:@color;
}
button {
background: @color;
}
ОБЛАСТЬ ВИДИМОСТИ
ПЕРЕМЕННЫХ
Данный код скомпилится с ошибкой.
Т.к. переменная color
не будет видна для button
10. ОПЕРАЦИИ
Благодаря операциям можно складывать,
вычитать, делить и умножать
значения свойств и цветов, что можно
использовать для создания
сложных отношений между свойствами.
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
11. ПРИМЕСИ
Примеси позволяют включать целый набор
свойств из одного набора
правил в другой путём включения имени
класса в качестве одного из
свойств другого класса. Они также могут
вести себя подобно функциям,
принимая аргументы.
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
#header {
-webkit-border-radius:
5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius:
10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
12. И Sass, и LESS — это препроцессоры CSS, позволяющие
писать ясный CSS с использованием программных
конструкций вместо статических правил.
LESS вдохновлен Sass. Sass был спроектирован с целью как
упростить, так и расширить CSS, в первых версиях фигурные
скобки были исключены из синтаксиса (этот синтаксис
называется sass). LESS разработан с целью быть как можно
ближе к CSS, поэтому у них идентичный синтаксис. В
результате существующие CSS можно использовать в качестве
LESS кода. Новые версии Sass также включают CSS-подобный
синтаксис, который называется SCSS (Sassy CSS).
СРАВНЕНИЕ С ДРУГИМИ
ПРЕПРОЦЕССОРАМИ CSS
