LESS - динамический CSS - Вопросы по CSS - Форум русской поддержки Joomla!

Pazys

Завсегдатай
1738
241 / 4
<a>А где я ошибся-то?

Тут в топике одном заговорили о LESS, ну я и решил создать отдельную тему.

Что такое LESS - Динамический язык стилевой разметки. (LESS — Leaner CSS — Компактный CSS)

LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания, операции и функции.
Может использоваться как на стороне клиента (IE 6+, Webkit, Firefox), так и на стороне сервера, с Node.js и Rhino.

Ну это все типо официальные речевки ... далее отсебятину напишу:

LESS дает нам возможность крутить CSS во все стороны (почти). Перечислю плюшки:

- Переменные
- Примешивания
- Вложенные правила
- Функции и операции

Ну и сразу в бой:

Код: html4strict

<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:

Код: css

@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

Код: 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 значений.

Позже - больше .... ща пора работать ... пардоньте.
_____________________________________________________________________________________________

Теперь покрасим нашу колонку (а заодно и десяток других элементов) в градиент:

Код: css

.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 (цвет панельки менюшки) - если она будет светлая, то ссылки будут темными. Если она будет темная - ссылки светлыми.

Код: css

.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);}

_____________________________________________________________________________________________
Подключаем файл сброса стилей (или любой другой):

Код: css

@import "reset.css";

Произвольный путь к картинке:

Код: css

@pic-url: "http://mysite.ru/images/stories";
background-image: url("@{pic-url}/bg.png");

« Последнее редактирование: 07.05.2012, 19:39:21 от Pazys »

Записан

Ишак меня нюхал ...
Если помог - плюсуйте в карму.

Fedor Vlasenko

Живу я здесь
3845
733 / 7
https://fedor-vlasenko.web.app

SW JProjects v.2.5.0 - компонент каталога цифровых проектов на Joomla

Обновление Nevigen Audit v.1.3.2 для JoomShopping 5

Как триггерить события для плагинов на манер Joomla 5+?В Joomla 6 должны удалить метод...

Похожие темы