Этот урок связан с проектом Используем LESS

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

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

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

 

Редактор LESS

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

Редактирование LESS файлов

Для других редакторов (таких как  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. Нужно только загрузить библиотеку и поместить ее в рабочую директорию.

@import "elements.less";

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

div {
	.rounded(3px);
}

 

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

При работе с обычным 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 и некоторые полезные аспекты инструментария.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.hongkiat.com/blog/less-basic/
Перевел: Сергей Фастунов
Урок создан: 18 Октября 2012
Просмотров: 50201
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 24 Октября 2012 09:10
    DeveloperTeam
    Спасибо за урок. Жду продолжений
  • 24 Октября 2012 12:26
    lubko
    когда то попробовал это и у меня оно не работало в ie.совсем нигде. в чём тут пожет быть загвоздка?может из за ie tester?
  • 28 Октября 2012 11:44
    ololo_trololo_vk
    У меня такой вопрос... На локальном сервере, на денвере, напр. все работает, а если я запускаю отдельно индексную страницу index.html, то стили не срабатывают абсолютно. Компилятор создал файл style.css, но правила прописаны в точно таком же порядке, как и в редакторе (т.е в less формате) Как быть в этом случае?
    • 30 Октября 2012 21:36
      Revy
      Есть такое, там почему то IE не может сделать аякс запрос и вылетает исключение, но оффсайт в IE пашет норм. будем разбираться почему.
    • 2 Ноября 2012 18:33
      Revy
      Нашел причину бага в IE. Для кооректной работы, сайт должен быть в кодировке UTF-8 иначе CSS из LESS компилироваться не будет.
      • 18 Января 2013 14:19
        mckmck
        У меня даже в utf-8 не работает, программа winless работает а как отключаю меняю ничего не работает, все прописано как здесь написано Кто подскажет что не так? Кто подскажет можно ли в файле less вначале привязать файл: @import url("elements.php"); с переменными например: @bg_color1:<?php $bg ?>; и будет ли оно работать? Я хотел в базе данных создать шаблон чтобы переменные привязать к css и из админ панели менять шаблон, если нет то как лучше делать подскажите?
        • 1 Марта 2013 05:51
          ghbrjkbcn
          Хорошая идея можешь прислать более в конкретном виде на e-mail fantom.seller@yandex.ru
  • 21 Июля 2013 12:24
    Алексей Мунтян
    Заинтересовал скрин), как в рекомендуемом вами редакторе поменять фон на болие темный?:)
^ Наверх ^