Шаблоны для новичков. Урок 16. Основы вёрстки с помощью LESS

На сегодняшний момент существует два принципиально разных современных подхода к вёрстке сайта. Первый - основанный на css-фреймворке. В нём задаются какие-то базовые css-стили, классы которых указываются в соответствующих html-тэгах.

<div class="red">красный текст</div>
<div class="yellow">желтый цвет</div>

потому что в css-фреймворке уже определено, что

div.red {color: red;}
div.yellow {color: yellow;}

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

Предположим, что у нас есть какой-то компонент, имеющий «типовую» html-схему:

<div class="mycomponent"><div class="wrap">
... вывод компонента ...
</div></div>

При использовании css-фреймворка нам придётся указывать дополнительные классы для div.mycomponent. Причём делать это постоянно, посколько в процессе создания шаблона, дизайн, размеры или расположение компонента могут поменяться. В итоге вебмастер всё-равно вынужден будет создать

div.mycomponent { свои стили }

чтобы собрать стили компонента в одном месте.

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

<div class="mycomponent"><div class="wrap">
	<div class="row">
		<div class="span4">...</div>
		<div class="span8">...</div>
	</div>
</div></div>

В этом примере ясно видно, что у нас появились три предопределенных класса: row, span4 и span8. Но, что делать, если мы решим поменять пропорции блоков или даже задать их фиксированной шириной, при том, что первый будет выровнен влево, второй - вправо? Согласно идеологии фреймворка, придется опять лезть в исходный html-код компонента и прописывать недостающе классы и менять существующие. И, опять же, всё-равно придётся создавать отдельные стили для div.mycomponent и его вложенных div-блоков.

Недостатков css-фреймворков нет в верстке через LESS. Главное преимущество здесь в том, что вебмастер только один раз задаёт html-код, а дальше всю работу выполняет в less-файле.

Рассмотрим пример компонента с двумя ячейками, одна из которых выровнена влево, другая - вправо (например название сайта и строка поиска).

<div class="mycomponent"><div class="wrap">
	<div class="r1">... название сайта ...</div>
	<div class="r2">... поиск ...</div>
</div></div>

Теперь less-стили:

div.mycomponent {
	> div.wrap {
		padding: 10px;
	}
 	
	div.r1 {
		float: left;
		width: 60%;
	}
 
	div.r2 {
		float: right;
		width: 30%;
	}
}

В css это будет выглядеть так:

div.mycomponent > div.wrap { 
	padding: 10px; 
}
 
div.mycomponent div.r1 { 
	float: left; 
	width: 60%;
}
 
div.mycomponent div.r2 { 
	float: right; 
	width: 30%;
}

Давайте разберём этот пример внимательно.

В правиле «div.mycomponent > div.wrap» используется символ >, который указывает, что стиль будет применён к div.wrap, при условии, что он следует непосредственно за div.mycomponent. Если этот символ не указывать, то может получиться так, что в подблоке (div.r1 и div.r2) могут оказаться свои div.wrap и тогда стиль применится и к нему. Здесь это исключено.

С float мы уже разбирались - это делает плавающий блок. У блоков мы указываем ширину. Обратите внимание, что суммарную ширину я сделал не 100%, а 90%. То есть при полном заполнении блоков div.r1 и div.r2 между ними останется некоторое расстояние (в 10%), но при этом они окажутся выровненными по разным краям родительского блока.

В less-коде отлично видна структура html-кода, но при этом у нас нет строгих зависимостей через css-классы, как это происходит в фреймворках. Приведеный пример компонента, кстати, будет почти типовым. Вот полный вариант, который можно использовать в своих шаблонах.

<div class="класс компонента"><div class="wrap">
	<div class="r1"> ... </div>
	<div class="r2"> ... </div>
	<div class="clearfix"></div>
</div></div>

«Класс компонента» пусть совпадает с именем файла по какой-то предопределённой схеме. Например в моём варианте компонент с названием сайта и строкой поиска - это ns-search. Файл - ns-search.php.

Теперь обратите внимание, что для новых стилей в less-коде нужно только один раз указать название класса, а в css-коде пришлось бы это делать многократно. Это один из примеров того, что в LESS писать css-код удобней и быстрей.

Теперь давайте рассмотрим вопрос использования миксов (миксинов, mixins).

В LESS существует два варианта - простые и параметизированные. Простые миксы по сути - обычные css-классы, которые могут повторяться многократно. Эдакое copy-paste. Вот пример:

.red {
	color: red;
}
 
.yellow {
	color: yellow;
}
 
div.header {
	.red;
}
 
div.footer {
	.yellow;
}

Этот код превратится в

.red {
	color: red;
}
 
.yellow {
	color: yellow;
}
 
div.header {
	color: red;
}
 
div.footer {
	color: yellow;
}

Но обратите внимание, что в результирующий css-код попадут и .red и .yellow. В некоторых случаях это действительно необходимо, но часто будут ситуации, когда это лишнее. Для этого используются параметизированные миксы.

Сравните less-код:

.red() {
	color: red;
}
 
.yellow() {
	color: yellow;
}
 
div.header {
	.red;
}
 
div.footer {
	.yellow;
}

Результирующий код будет:

div.header {
	color: red;
}
 
div.footer {
	color: yellow;
}

То есть микс со скобками выполняется только если его явно вызвать. Это как php-функция, где она вначале объявляется, а уже после используется.

В нашем примере компонента название сайта должно быть выведено каким-то шрифтом, цветом и т.п. Мы можем сделать несколько заготовок, а после произвольно подключать. Например:

.ns01() {
	color: red;
	.bold;
}
 
.ns02() {
	color: yellow;
	.bold;
	.italic;
}
 
.ns03() {
	color: #555;
	.bold;
	.text_shadow(1px, 1px, 3px, #111);
}

Дальше используем:

...
	div.r1 {
		float: left;
		width: 60%;
		.ns02;
	}
...

В коде миксов я использовал хелперы из default-шаблона (см. css/less/include/helpers.less).

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

Вернёмся к Twitter Bootstrap, как достаточно популярному фреймворку. Если вы посмотрите его less-код (да, он написан на LESS!), то увидите, что в нём практически все миксы простые, а не параметизированные. В итоге в конечный css-код содержит гиганское количество ненужного хлама. Если бы разработчики фреймворка предложили верстать сайты через LESS (как это они сами делают), то вебмастеру было бы удобней указывать стили через предопределённые миксы, не завязываясь на css-классы.

Например в Bootstrap есть простой микс .btn. Чтобы его использовать вебмастер должен в html-коде указывать:

<button class="btn">Кнопка</button>

Если бы микс был параметизированным, то верстка никак не затрагивала бы html-код, поскольку вся переместилась в less-код.

<button>Кнопка</button>
 
div.компонент-или-блок {
	button {
		.btn;
	}
}

Чтобы изменить вид кнопки уже не нужно лезть в html-код - просто правим стили в одном файле.

Параметизированные миксы могут принимать параметры. В этом случае вёрстка станет ещё удобней. Классический пример - микс .border_radius(). Он определён так:

.border_radius(
	@radius_top_left, 
	@radius_top_right, 
	@radius_bottom_right, 
	@radius_bottom_left)
{
	-webkit-border-radius: @arguments;
	-moz-border-radius: @arguments;
	border-radius: @arguments;
}

Мы видим, что он использует четыре параметра, указывающих на радиус скругления каждого угла. Использовать так:

.border_radius(5px, 5px, 10px, 10px);

Микс сгенерирует кроссбраузерный код.

По аналогии с .btn, можно было бы придумать микс, только принимающий какие-то параметры, вроде основного цвета, цвета текста, размеров и т.п. Тогда при вёрстке указываем нужные значения и получаем практически произвольные кнопки. Рассмотрим для затравки такой пример.

Исходный html-код:

<button class="bt1">Button 1</button> 
<button class="bt2">Button 2</button> 
<button class="bt3">Button 3</button>

Классы я указал разные, чтобы как-то идентифицировать кнопки. Они произвольны.

Стили зададим через микс, который принимает параметры: базовый цвет фона, цвет текста и высота кнопки.

.btn(@bg_color, @text_color, @height: 30px) 
{
	... тут будут стили ..
}

Соответственно микс вызываем для каждой кнопки:

button.bt1 {
	.btn(red, white, 30px);
}
 
button.bt2 {
	.btn(green, #C2F3C2, 40px);
}
 
button.bt3 {
	.btn(#0082CC, white, 50px);
}

То есть это один микс, только с разными параметрами.

Теперь сам микс.

.btn(@bg_color, @text_color, @height: 30px) 
{
	// высота кнопки
	height: @height;
	
	// цвет текста
	color: @text_color;
	
	// градиент
	.background_gradient (@bg_color, darken(@bg_color, 10%));
	
	// тень для текста
	.text_shadow(1px, -1px, 1px, darken(@text_color, 60%));
	
	// границы
	border: 1px solid @bg_color;
	border-top: 1px solid lighten(@bg_color, 10%);
	border-bottom: 1px solid darken(@bg_color, 20%);
	
	// скругление углов
	.border_radius(5px, 5px, 5px, 5px);
	
	// внутренний отступ
	padding: 0 (@height / 2);
	
	// внешняя тень кнопки
	.box_shadow(0, 0, 2px, #777);
	
	// курсор
	cursor: pointer;
	
	// поведение при наведении
	&:hover {
		// меняем только градиент
		.background_gradient (darken(@bg_color, 10%), darken(@bg_color, 10%));
	}
}

Обратите внимание, что параметр @height задан с дефолтным значением. Это значит, что микс можно вызывать без указания высоты кнопки, и она автоматом будет равна 30px.

В миксе я использую разные хелперы из дефолтного шаблона. Если вы используете свои, то переписать будет несложно.

Кратко о некоторых моментах.

LESS-функция darken() делает цвет темнее на указанное значение. Функция lighten() - противоположная - делает цвет светлее. Внутренний отступ padding я сделал вычисляемым от высоты кнопки: слева и справа = высота делённая на 2.

Запись &:hover преобразуется в .btn:hover. То есть & преобразуется в имя «родительского класса».

Микс достаточно простой, но с его помощью можно наделать хоть сотню разных кнопок.

С его помощью также можно изменить стиль каких-то элементов MaxSite CMS, например для кнопки отправки комментария можно указать:

button.comments_submit {
	.btn(#58B158, white);
}

В общем экспериментировать можно сколько угодно.

««« Урок 17 | Урок 15 »»»