Инструменты пользователя

Инструменты сайта


less

Назад

Php класс для интерпретации

Динамический язык стилевой разметки.

LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания, операции и функции.

LESS может использоваться как на стороне клиента (IE 6+, Webkit, Firefox), так и на стороне сервера, с Node.js и Rhino.

LESS позволяет вести логику в CSS файлы.

Переменные

Переменные позволяют определить постоянно используемые значения в одном месте, а затем повторно использовать их в любом месте таблицы стилей, что облегчает внесение глобальных изменений буквально до изменения одной строки кода.

/*  Объявление переменных */
@body_bg_color: #E6F0FF; /* Цвет основного фона */
@header_color: black; /* Цвет заголовков */
 
/* Воспользуемся переменными */
body {
	background-color: @body_bg_color;
	font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
}
h1 {
	color: @header_color;
	font-size: 30pt;
}
h2 {
	color: @header_color;
	font-size: 20pt;
}
 
/* Переменные могут быть включены внутрь строк, как в ruby или в PHP, при помощи конструкции @{name}: */
@images_folder: "media/images";
 
body {
	background-image: url("@{images_folder}/background.png");
}
 
/* Можно также определять переменную, ссылаясь на другую переменную по ее имени: */
@dark: #333333;
@light: #616263;
 
@var: 'dark';
p {
	color: @@var;
}

Примешивания (mixins)

Примешивания (mixins) позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств. Это напоминает использование переменных, но в отношении целых классов. Примешивания могут вести себя как функции, и принимать аргументы, как показано в нижеследующем примере.

/* Примешивания */
.text-shadow {
	text-shadow: rgba(255, 255, 255, 0.9) 1px 1px 0px; /* Стандартная текстовая тень в нашем проекте */
}
 
h1, h2, p, pre {
	.text-shadow;
}

Параметризированные примеси

В LESS существует особый вид наборов правил, которые можно смешивать, точно как описываемые выше классы, но которые принимают параметры.

/* Примешивания с параметрами */
.border-radius(@radius: 10px) {
	border-radius:@radius;
	-moz-border-radius:@radius; /* Firefox 3.6 и ранее */
}
 
#content {
	.border-radius(20px);	
}
 
/* Если нет желания возиться с отдельными параметрами можно воспользоваться переменной @arguments */
.box-shadow(@x: 0, @y: 0, @blur: 10px, @color: rgba(0,0,0, 0.1)) {
	box-shadow: @arguments;
  	-moz-box-shadow: @arguments;
	-webkit-box-shadow: @arguments;
}
 
#content {
	.box-shadow(2px, 2px);
}
 
 
/* Примесь для создания градиентной заливки */
.bg-linear-gradient(@start, @end) {
	background: @start; /* Old browsers */
	background: -moz-linear-gradient(top, @start, @end); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@end)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, @start, @end); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, @start, @end); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, @start, @end); /* IE10+ */
	background: linear-gradient(top, @start, @end); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@start', endColorstr='@end',GradientType=0 ); /* IE6-9 */
}

Совпадение с шаблоном и предохранительные выражения

Иногда, Вы можете захотеть изменить поведение примешивания, в зависимости от переданный в него параметров

/* Совпадение с шаблоном */
.sideblock(left, @color) {
	float: left;
	margin: 0 20px 10px 0;
}
.sideblock(right, @color) {
	float: right;
	margin: 0 0 10px 2	0px;
}
/* Этот примеси сработает как и для 1 так 2-го .sideblock */
.sideblock(@_, @color) {
	padding: 1px 20px;
	color: @color;	
}
 
aside {
	.sideblock(right, #333333);
}
 
/* Или через переменную */
@float: right;
 
aside {
	.sideblock(@float, #333333);
}
/* Мы можем также сравнивать количество параметров примеси, например: */
.background(@color) {
	background-color:@color;
}
.background(@color1, @color2) {
	background: -moz-linear-gradient(top, @color1, @color2);
}
 
/* Вызов первой примеси */
aside {
	.background(hsla(0, 10%, 90%, 0.5));
}
/* Вызов второй примеси */
aside {
	.background(hsla(0, 10%, 90%, 0.1), hsla(0, 10%, 90%, 1));
}

Переменная с именем @arguments

Название переменной @arguments внутри примешивания имеет особое значение. В процессе компиляции заменяется на все переданные аргументы.

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
 
.box-shadow(2px, 5px);

Предохранители

Предохранители полезны, когда мы хотим проверять совпадение с выражениями, а не с простыми величинами или с количеством параметров.

LESS использует условное исполнение при помощи предохраняемых примешиваний вместо выражение if/else, в стиле спецификации указания @media.

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

Предохранители могут разделяться запятыми ‘,’ — если однин из них срабатывает, весь набор считается совпадшим:

.mixin (@a) when (@a > 10), (@a < -10) { ... }

Можно сравнивать аргументы друг с другом, либо с не-аргументами:

@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

Наконец, если Вы хотите сравнивать примешивания по типу значения, Вы можете использовать функции вида is:

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

Функции для сравнения основных типов:

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

Импортирование

Вы можете импортировать файлы .less, при этом все переменные и примеси в них становятся доступными в главном файле. Расширение .less необязательно.

/* Вы можете импортировать файлы .less, при этом все переменные и примеси в них становятся доступными в главном файле.*/
@import "2_mixins.less";
 
/* Используем примеси из файла 2_mixins.less */
aside {
	.border-radius(10px); 
	.box-shadow(0px, 0px, 2px, rgba(0, 0, 0, 0.3));
}

Ссылки