Тут в
топике одном заговорили о LESS, ну я и решил создать отдельную тему.
Что такое LESS - Динамический язык стилевой разметки. (LESS — Leaner CSS — Компактный CSS)
LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания, операции и функции.
Может использоваться как на стороне клиента (IE 6+, Webkit, Firefox), так и на стороне сервера, с Node.js и Rhino.
Ну это все типо официальные речевки ... далее отсебятину напишу:
LESS дает нам возможность крутить CSS во все стороны (почти). Перечислю плюшки:
- Переменные
- Примешивания
- Вложенные правила
- Функции и операции
Ну и сразу в бой:
<div class="col">
<span class="text">Text (#444)</span>
<span class="l-text">Light Text (#333)</span>
<span class="d-text">Dark Text (#777)</span>
<a href="#">Link - darken on hover (blue)</a>
</div>
LESS:
@text: #444;
@link: blue;
@col: 200px;
.col {width:@col;
a {color:@link;
&:hover {color:darken(@link, 20%);}
}
}
.text {color:@text;}
.d-text {color:@text - #111;}
.l-text {color:@text + #333;}
CSS
.col {width:200px;}
.col a {color:blue;}
.col a:hover {color:darkblue;}
.text {color:#444;}
.d-text {color:#333;}
.l-text {color:#777;}
Наверно хотите сказать, что CSS же меньше ... ну поменяйте теперь цвет текста и ссылки.
В LESS мы меняем значение 2-х переменных, а в CSS правим 5 значений.
Позже - больше .... ща пора работать ... пардоньте.
_____________________________________________________________________________________________
Теперь покрасим нашу колонку (а заодно и десяток других элементов) в градиент:
.gradient(@color: #777, @start: #000, @end: #FFF) {
background: @color;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, @start),color-stop(1, @end));
background: -ms-linear-gradient(bottom,@start,@end);
background: -moz-linear-gradient(center bottom,@start 0%,@end 100%);
}
.col {.gradient(#777, #000, #FFF);}
.element1 {.gradient(#006400, #54FF9F, #2E8B57);}
.element2 {.gradient(#B22222, #FA8072, #A52A2A);}
.element3 {.gradient(#006400, #33FF9F, #2E2257);}
.element4 {.gradient(#B22222, #FAdd72, #A52A2A);}
.element5 {.gradient(#006400, #ddFF9F, #2Edd57);}
.element6 {.gradient(#B22222, #FA8d32, #A52A2A);}
.element7 {.gradient(#006400, #54dd9F, #2E8dd7);}
.element8 {.gradient(#B22222, #d38072, #A33ffA);}
Теперь у нас колонка с градиентом от белого к черному, элемент 1 от розового к темнокрасному, элемент 2 от лазурного до темнозеленого. (цвета примерные) и т.д.
CSS пример писать не буду, попробуйте сами эту портянку накатать ))))
_____________________________________________________________________________________________
В этом примере я крашу цвет ссылок, относительно фона. У меня есть переменная @nav-bg (цвет панельки менюшки) - если она будет светлая, то ссылки будут темными. Если она будет темная - ссылки светлыми.
.mixin (@nav-bg) when (lightness(@nav-bg) < 50%) {color:lighten(@nav-bg, 50%);}
.mixin (@nav-bg) when (lightness(@nav-bg) >=50%) {color:darken(@nav-bg, 70%);}
.nav a {.mixin(@nav-bg);}
_____________________________________________________________________________________________
Подключаем файл сброса стилей (или любой другой):
Произвольный путь к картинке:
@pic-url: "http://mysite.ru/images/stories";
background-image: url("@{pic-url}/bg.png");
26.11.2012, 20:08:58