Представление LESS

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

Для преодоления проблемы созданы препроцессоры CSS, которые позволяют комбинировать стили динамически. Существует несколько вариантов (например, LESS и SASS), но в данном уроке мы рассмотрим LESS.

 

Редактор LESS

На момент написания урока существовал единственный редактор, целиком посвященный работе с файлами LESS - ChrunchApp. Данное приложение кросс платформенное, построенное на Adobe Air, его можно запускать на Windows, Mac OSX and Linux.

Для других редакторов (таких как  Dreamweaver, Coda, NotePad++ и SublimeText 2) существуют плагины или дополнения, которые позволяют организовать подсветку синтаксиса LESS.

 

Использование LESS

Использовать LESS очень просто. Нужно просто добавить две строки в тег head вашего документа HTML. Первая строка содержит название вашего файла .less, а вторая строка - подключение библиотеки less.js (ее можно скачать с официального сайта).

<link rel="stylesheet/less" type="text/css" href="/style.less">
<script src="/less.js" type="text/javascript"></script>

В нашем уроке мы покажем другой способ. Мы будем использовать компилятор LESS: для Windows можно применять WinLess, а для Mac OSX -  LESS.app.

Создаем файл .less в рабочей директории.  Затем открываем компилятор (WinLESS или LESS.app) и импортируем рабочую директорию в него. компилятор найдет все файлы .less. И все. Теперь, когда бы мы не изменили файл .less, компилятор автоматически будет генерировать обычный код CSS в файл .css, который воспринимается браузером.

Остается только привязать CSS файл к документу HTML:

<link rel="stylesheet/css" type="text/css" href="/style.css">

 

Синтаксис LESS

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

Переменные

Сначала рассмотрим переменные.

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

.class1 {
	background-color: #2d5e8b;
}
.class2 {
	background-color: #fff;
	color: #2d5e8b;
}
.class3 {
	border: 1px solid #2d5e8b;
}

Все прекрасно, пока не придется просеивать 1000 одинаковых участков кода по всей таблице стилей, чтобы поменять значение. Такая ситуация может сложиться при работе над большим проектом.

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

@color-base: #2d5e8b;

.class1 {
	background-color: @color-base;
}
.class2 {
	background-color: #fff;
	color: @color-base;
}
.class3 {
	border: 1px solid @color-base;
}

В выше приведенном примере в переменной @color-base сохраняется значение #2d5e8b. И когда потребуется изменить цвет, то нужно будет поменять значение только в переменной.

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

@font-family: Georgia
@dot-border: dotted
@transition: linear
@opacity: 0.5

 

Примешивания

В LESS можно использовать примешивания для хранения набора правил и применения их в других наборах. Например:

.gradients {
	background: #eaeaea; 
	background: linear-gradient(top, #eaeaea, #cccccc);
	background: -o-linear-gradient(top, #eaeaea, #cccccc); 
	background: -ms-linear-gradient(top, #eaeaea, #cccccc); 
	background: -moz-linear-gradient(top, #eaeaea, #cccccc); 
	background: -webkit-linear-gradient(top, #eaeaea, #cccccc); 
}

В Выше приведенном примере мы устанавливаем цвет градиента в классе .gradients. Затем, когда нужно добавить градиент, нужно просто вставить .gradients следующим образом:

.box {
	.gradients;
	border: 1px solid #555;
	border-radius: 3px;
}

Класс .box наследует все объявления из .gradients. Поэтому выше приведенное выражение LESS эквивалентно следующему обычному коду CSS:

.box {
	background: #eaeaea; 
	background: linear-gradient(top, #eaeaea, #cccccc);
	background: -o-linear-gradient(top, #eaeaea, #cccccc); 
	background: -ms-linear-gradient(top, #eaeaea, #cccccc); 
	background: -moz-linear-gradient(top, #eaeaea, #cccccc); 
	background: -webkit-linear-gradient(top, #eaeaea, #cccccc); 
	border: 1px solid #555;
	border-radius: 3px;
}


При работе с CSS3 можно использовать библиотеку LESS ELements, чтобы облегчить свою работу. LESS Elements является коллекцией общих примешиваний CSS3, которые часто используются в стилях, например,  border-radius, gradients, drop-shadow и так далее.

Чтобы использовать LESS нужно просто добавить правило @import файл LESS. Нужно только загрузить библиотеку и поместить ее в рабочую директорию.

Теперь можно использовать все классы из elements.less. Например, чтобы добавить скругление углов рамки с радиусом 3px к элементу div, нужно написать:

 

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

При работе с обычным CSS кодом, достаточно часто встречается следующая структура кода:

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	border-bottom: 2px solid #283744;
}
nav li {
	width: 600px;
	height: 40px;
}
nav li a {
	color: #fff;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}

В обычном CSS коде мы выбираем наследников, указывая родителя в каждом наборе правил.

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

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	border-bottom: 2px solid #283744;
	li {
		width: 600px;
		height: 40px;
		a {
			color: #fff;
			line-height: 40px;
			text-shadow: 1px 1px 0px #283744;
		}
	}
}


Также можно использовать псевдо-классы, например:hover, с помощью символом амперсенда (&). Допустим, мы хотим добавить :hover к тегу ссылки:

a {
	color: #fff;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
	&:hover {
		background-color: #000;
		color: #fff;
	}
}

 

Операции

Также можно использовать операции в LESS. Доступны сложение, вычитание, умножение и деление.

Допустим, что элемент B в два раза выше элемента A:

@height: 100px

.element-A {
	height: @height;	
}
.element-B {
	height: @height * 2;
}

Сначала мы определяем переменную @height и назначаем ее для указания высоты элемента А.

В элементе В мы просто умножаем значение переменной на 2. Теперь, когда мы изменяем значение переменной @height, элемент В всегда будет в два раза выше.

 

Область видимости

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

header {
	@color: black;
	background-color: @color;
	nav {
  		@color: blue;
  		background-color: @color;
  		a {
    		color: @color;
  		}
	}	
}

В приведенном примере header имеет переменную для цвета со значением  black, но фон элемента nav будет иметь цвет blue, так как переменная @color находится в локальном контексте.

 

Заключение

LESS - один из препроцессоров CSS. Можно также использовать SASS или Stylus.

В следующих уроках серии мы разберем пример реального использования LESS и некоторые полезные аспекты инструментария.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/UTuKTDoCE7A/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Представление LESS | | 2012-10-25 05:08:31 | | Статьи Web-мастеру | | CSS - простой и доступный инструмент. Однако, он имеет свои ограничения, особенно когда встает вопрос о сопровождении готового кода. Когда нужно модифицировать тысячи строк со стилями, разделенных по | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: