Skip to content

Latest commit

 

History

History
177 lines (149 loc) · 5.92 KB

LESS.md

File metadata and controls

177 lines (149 loc) · 5.92 KB
Raw

LESS

Описание

LESS (Leaner Style Sheets) — это препроцессор CSS, позволяющий использовать переменные, функции, циклы и другие технологии для упрощения работы со стилями. Препроцессор в данном случае означает, что мы имеем дело с динамическим языком стилей, который преобразуется в CSS. Таким образом, на выходе получаем стандартный стилевой файл.

LESS преследует благородные цели — облегчить работу разработчикам сайтов дав им подходы и приемы, которые в CSS на данный момент отсутствуют, но характерны для языков программирования. Например, те же переменные позволяют задать какое-либо значение, а затем использовать его многократно, подставляя лишь имя переменной.

Разработал LESS Алексис Селье на языке Ruby, а затем под влиянием нарастающей популярности Node.js переписал код на JavaScript. Характерной особенностью LESS стал синтаксис основанный на CSS. Это сразу же снизило порог вхождения и изучения новой технологии, к тому же не возникает никаких проблем с редакторами кода, они прекрасно поддерживают подсветку синтаксиса. В дальнейшем LESS оказал свое влияние на препроцессор SASS, в котором появился новый похожий синтаксис. Но в целом, вопрос, кто на кого оказал влияние открыт, потому что многие полезные вещи были заимствованы друг у друга. Так что в настоящий момент и LESS и SASS похожи как братья, различаясь лишь в деталях.

Синтаксис

Переменные

@blue: #00214D;
.blue {
	color: @blue;
}

Вложенные правила

/* CSS */
#A {
	color: red;
}
#A #B {
	color: green;
}
#A #B #C p {
	color: blue;
}
/* LESS */
#A {
	color: red;
	#B {
		color: green;
		#C p {
			color: blue;
		}
	}
}

Амперсанд

#p {
	color: black;
	a {
		font-weight: bold;
		&:hover {
			color: red;
		}
	}
}

Миксины (они же примеси)

.flexible {
	display: flex;
	justify-content: center;
	align-items: center;
}
@radius: 10px;
.border-radius {
	-webkit-border-radius: @radius; // Chrome и Safari
	   -moz-border-radius: @radius; // Firefox
		-ms-border-radius: @radius; // Internet Explorer
		 -o-border-radius: @radius; // Opera
			border-radius: @radius; // Стандартный CSS
}
.centered-elements {
	border: 1px solid gray;
	.flexible;
	.border-radius;
}

Арифметические операции

/* Сложение */
p {
	font-size: 10px + 2em;  // ОШИБКА!
	font-size: 10px + 6px;  // 16px
	font-size: 10px + 2;    // 12px
}
/* Вычитание */
div {
	height: 12% - 2%;  // 10%
	margin: 4rem - 1;  // 3rem
}
/* Умножение */
p {
	width: 10px * 10px;           // ОШИБКА!
	width: 10px * 10;             // 100px
	width: 1px * 5 + 5px;         // 10px
	width: 5 * (5px + 5px);       // 50px
	width: 5px + (10px / 2) * 3;  // 20px
}
/* Деление */
@var1: 20;
@var2: 4;
p {
	top: 16px / 24px;          // Отображается без изменений в стандартном CSS
	top: (20px / 5px);         // Производится деление (но только при использовании скобок)
	top: @var1 / @var2;        // Деление выполняется
	top: 2px / 4px + 3px;      // Деление выполняется, если добавлена еще одно арифметическое действие
}

Строки

p {
	font: 50px Ari + "al"; // Ошибка
	font: ~"50px" + Arial;  // 50px Arial
}

Операторы управления потоками

/* Функция if() */
if (true, 1px, 2px)  // 1px;
if (false, 1px, 2px) // 2px;
/* Условия с помощью миксинов */
.mixin (@type) when (@type == tree) {
	color: green;
}
.mixin (@type) when (@type == river) {
	color: blue;
}
.mixin (@type) when (@type == dirt) {
	color: brown;
}

Директива @for

.definition-loop (@i) when (@i <= 5) {
	.definition-@{i} {
		width: 10px * @i;
	}
	.definition-loop(@i + 1);
}
.definition-loop(1);

Полезные ссылки