Less

                                // LESS Функции http://lesscss.org/functions/

@import "style.less"; // Импорт less файлов
@import (less) "style.css"; // Импорт css файлов

@grey: #ccc;

//Миксины
.mixin(@color, @text: 16px) { // В css файле не будет этой переменной, 16px значение по-умолчанию
	color: @color;
	font-size: @text;
}
.mixin(@color) { // Второй спрособ передовать два параметра, скопировать миксин с одним параметром
	color: @arguments; // Можно так написать, подставляется из функции
	font-size: @text;
}


.mixin() {

	.red {
		color: red;
	}

	.blue {
		color: blue;
	}
}// При вызове этого миксина можно обратиться только к одному селектору .mixin > red {} таким образом


@selector: test;
.@{selector} & { // & означает поставить родительский класс перед .@{selector}
	.mixin(#fff, 18px); // Можно писать сразу класс и применяться все свойства
}

//ceil() // Округляет до большего числа
//floor() // Округляет до меньшего числа


// Ссылка на переменную
@color: @grey;
@field: 'color'; // Название переменной @color пишу так 'color'
@one: @@field;

p {
	background: @one; // Вызываем переменную
	color : lighten(@grey, 5%); // Сделать светлее на 5% или darken() темнее
}

// Синтаксис
.main {
	padding: (@padding * 5 - 2) * 3; // Можно также * + / -
	backgrond: @grey;
	&_hearder {
		color: #000;
	}
	&.top {
		margin: 0;
	}
}
.test {
	extend(.main, .top); // Наследование, если все стили пишу extend(all);
	width: ~"calc(100% - 10px)"; // Говорим less не компилировать, что внутри говычек. calc свойство css для расчётов
	height: ceil(100px / 3); // Функция округления, получиться 34рх
}
Список