Почему нужно изучать LESS

22-06-2012Время чтения ~ 5 мин.CSS, HTML, LESS, SASS 22302

LESS - технология, позволяющая значительно сократить время вёрстки сайта. Работая с LESS постоянно ловишь себя на мысли, что именно таким и должен быть стандартный CSS - с улучшенным синтаксисом, переменными, примесями, функциями и т.п... Впрочем об этом пока можно только мечтать, может в CSS 9 и появится нечто подобное, ну а нам пока ничего не остаётся, как решать текущие проблемы самостоятельно.

Почему нужно изучать LESS? Можно, конечно, гордиться, что хороший верстальщик может нагенерировать десятки килобайт кода в день, но логичней было бы уточнить: а насколько зависит объем кода от объёма выполненной работы?

Использование миксов значительно упрощает код

Простой пример: нужно сделать скругление углов. В CSS3 для этого всего используется лишь одна строчка:

.border_radius {
	border-radius: 5px;
}

Но мы то знаем, что нужно обеспечить поддержку разных браузеров, а значит код превращается, как минимум в:

.border_radius {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Объём кода увеличился в три раза (с 37 симолов до 90). Теперь, предположим, что скругление нужно задать сразу у нескольких css-классов. Объем кода увеличивается лавинообразно, хотя всё, что нам нужно - это по сути одна строчка с border-radius.

LESS позволяет полностью исключить подобную рутину. Один раз нужно лишь задать микс (примесь, mix, mixin):

.border_radius(@radius)
{
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

И используем его не загромождая свой код:

div.leave_a_comment {
	.border_radius(8px);
}

Совершенно замечательное упрощение синтаксиса ощущается в более сложных миксах, например при задании линейного градиента (linear-gradient). Микс там получается внушительный и набирать его вручную (копировать из своих заготовок) будет довольно утомительно, не говоря уже о том, что при ручной вставке можно наделать кучу ошибок.

Итак, LESS позволяет значительно сократить css-код за счет использования миксов и забыть о кроссбраузерных префиксах.

Улучшенный синтаксис

С помощью LESS написание CSS-кода упрощается, поскольку в нём поддерживается вложенность набора правил.

div.footer {
	background: #444;
	color: white;
	
	a {
		color: white;
	}
}

Читается на интуитивном уровне. В итоге в CSS получится так:

div.footer {
	background: #444;
	color: white;
}
 
div.footer a {
	color: white;
}

То есть с LESS объём кода меньше (написать его быстрей) и он гораздо лучше читается. Ну и очень удобно в LESS сразу видеть вложенность html-тэгов. И если нужно вдруг добавить новое правило, то нет больше необходимости копировать класс родителя.

Корректный результирующий CSS-код

Если мы говорим о компиляции less-файла в css-файл, то в результирующий css-код не попадут пустые css-правила. Это очень удобно, поскольку можно в less-файле использовать заготовки правил «впрок» и, если они не нужны, проcто их закомментировать или оставить пустыми. Например у меня есть такая заготовка:

div.widget {
 	
	// wrap-блок виджета
	div.w0 {
 	
	}
 	
	// заголовок виджета
	div.widget_header,
	h2.box {
 		
	}
}

Можно не беспокоиться: в css-код он не попадёт.

Обратите внимание на комментарии, начинающиеся с «//». Все они будут удалены компилятором LESS. А вот обычные css-комментарии «/* */» останутся. Удобно? Безусловно!

@Переменные и операции

Стоит ли говорить насколько упрощается жизнь верстальщика при использовании переменных? Вместо поиска и замены одного цвета на другой - указываем значение только в переменной. И если цвет ещё более-менее просто заменить, то что касается размеров блоков, то уже придётся заново всё пересчитывать.

У меня, например есть микс .model(), в котором задаётся модульная сетка шаблона. В основном less-файле я указываю, скажем, так:

.model(1020px, 270px);

В миксе модели все ширины блоков высчитываются автоматически. Вот пример готового микса:

.model(
		@content_width: 960px, // общая ширина сайта
		@sidebar_width: 250px, // сайдбар
	)
{
	div.header {
		div.header-wrap {
			width: @content_width;
			margin: 0 auto;
		}
	}
 
	div.main {
		div.main-wrap {
			width: @content_width; 
			margin: 0 auto; 
		}
	}
 
	div.content {
		width: @content_width - @sidebar_width; 
		margin: 0 @sidebar_width 0 0; 
		float: left;
 
		div.content-wrap {
			margin: 20px 30px 10px 20px;
		}
	}
 
	div.sidebar1 {
		width: @sidebar_width; 
		float: right; 
		margin: 0 0 0 -@sidebar_width;
		
		div.sidebar1-wrap {
			margin: 20px 10px 0 0;
		}
	}
 
	div.footer {
		div.footer-wrap {
			width: @content_width - 20px; 
			margin: 0 auto; 
			padding: 10px; 
		}
	}
	
} // .model

Сколько мне потребуется времени, чтобы произвольно изменить ширину сайдбара или сайта? :roll:

Простой код - высокая читабельность

У меня есть микс, с помощью которого я задаю параметры шрифта. Сами по себе правила простые и несложные. Например так:

h1 {
	font-weight: bold;
}

Просто? Безусловно. Но, вот так немного удобней:

h1 {
	.bold;
}

Пример хорошо показывает, что даже для таких простых css-правилах можно немного упростить себе жизнь. В CSS и HTML очень много нелогичных моментов, скажем, почему для курсива нужно использовать font-style, а для подчеркивания text-decoration?.. Вот для таких случаев можно сделать разные миксы, более логично сгруппированные.

Приведу свой микс .font(). Возможно он вам тоже пригодится.

.font()
{
	.verdana()
	{
		font-family: Verdana, Arial, Helvetica, sans-serif; 
	}
	
	.arial()
	{
		font-family: Arial, Helvetica, Verdana, sans-serif; 
	}
	
	.georgia()
	{
		font-family: Georgia, "Times New Roman", serif; 
	}
	
	.times()
	{
		font-family: "Times New Roman", Georgia, serif; 
	}
	
	.segoe()
	{
		font-family: "Segoe UI", Verdana, Arial, sans-serif; 
	}
	
	.size(@size: 9pt)
	{
		font-size: @size;
	}
	
	.normal()
	{
		font-weight: normal;
	}	
	
	.bold(@bold: bold)
	{
		font-weight: @bold;
	}
	
	.color(@color)
	{
		color: @color;
	}
	
	.i()
	{
		font-style: italic;
	}
	
	.style(@style = normal)
	{
		font-style: normal;
	}
	
	.upper()
	{
		text-transform: uppercase;
	}
	
	.lower()
	{
		text-transform: lower;
	}
	
	.underline(@underline: underline)
	{
		text-decoration: @underline;
	}
		
} // .font

Пользоваться например так:

h1 {
	.font > .arial;
	.font > .size(18px);
	.font > .color(red);
	.font > .upper;
}

Теперь можно забыть чем отличается font-style от text-decoration. :coolsmile:

Обратите внимание, что микс .font использует вложенные правила в своём Namespaces (пространство имён). Это несколько усложняет синтаксис вызова (используется «>»), но с другой стороны, в любой момент в микс можно добавить новые правила, которые не повлияют на предыдущие (ООП-программистам привет!).

Less-фреймворки

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

С чего начать изучение LESS?

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

После этого я рекомендую скачать исходники LESS с гитхаба. В архиве будет каталог test/less с файлами - примерами, демонстрирующими все существующими возможности LESS. Некоторые примеры достаточно сложны, поэтому больше годятся для подготовленного пользователя.

Ну и безусловно стоит воспользоваться поиском гугла на фразу «less mixins». Найдёте очень много интересных и готовых решений.