Продолжаю цикл статей по LESS и мы с вами подошли к самой интересной части данного языка стилевой разметки, как примешивания. С помощью этих примешиваний мы можем сэкономить достаточное количество нервов и времени на этапе верстки. Долой CSS-ные портянки. Итак, сразу в бой.

Для примера я решил использовать CSS свойство border-radius и показать вам, как я (а в скором времени и вы) экономлю время.

Вот такие блоки я хочу увидеть в итоге:

html:

<div class="divOne"></div>
 <div class="divTwo"></div>
 <div class="divThree"></div>
 <div class="divFour"></div> 

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

.radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
 -webkit-border-top-right-radius: @topright;
 -webkit-border-bottom-right-radius: @bottomright;
 -webkit-border-bottom-left-radius: @bottomleft;
 -webkit-border-top-left-radius: @topleft;
 -moz-border-radius-topright: @topright;
 -moz-border-radius-bottomright: @bottomright;
 -moz-border-radius-bottomleft: @bottomleft;
 -moz-border-radius-topleft: @topleft;
 border-top-right-radius: @topright;
 border-bottom-right-radius: @bottomright;
 border-bottom-left-radius: @bottomleft;
 border-top-left-radius: @topleft;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 } 

.div {
 &One {.radius(30px,0,30px,0);}
 &Two {.radius(0,30px,0,30px);}
 &Three {.radius(30px,30px,30px,0);}
 &Four {.radius(0,0,0,60px);}
 } 

divOne {
 -webkit-border-top-right-radius: 30px;
 -webkit-border-bottom-right-radius: 0;
 -webkit-border-bottom-left-radius: 30px;
 -webkit-border-top-left-radius: 0;
 -moz-border-radius-topright: 30px;
 -moz-border-radius-bottomright: 0;
 -moz-border-radius-bottomleft: 30px;
 -moz-border-radius-topleft: 0;
 border-top-right-radius: 30px;
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 30px;
 border-top-left-radius: 0;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 }
 .divTwo {
 -webkit-border-top-right-radius: 0;
 -webkit-border-bottom-right-radius: 30px;
 -webkit-border-bottom-left-radius: 0;
 -webkit-border-top-left-radius: 30px;
 -moz-border-radius-topright: 0;
 -moz-border-radius-bottomright: 30px;
 -moz-border-radius-bottomleft: 0;
 -moz-border-radius-topleft: 30px;
 border-top-right-radius: 0;
 border-bottom-right-radius: 30px;
 border-bottom-left-radius: 0;
 border-top-left-radius: 30px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 }
 .divThree {
 -webkit-border-top-right-radius: 30px;
 -webkit-border-bottom-right-radius: 30px;
 -webkit-border-bottom-left-radius: 30px;
 -webkit-border-top-left-radius: 0;
 -moz-border-radius-topright: 30px;
 -moz-border-radius-bottomright: 30px;
 -moz-border-radius-bottomleft: 30px;
 -moz-border-radius-topleft: 0;
 border-top-right-radius: 30px;
 border-bottom-right-radius: 30px;
 border-bottom-left-radius: 30px;
 border-top-left-radius: 0;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 }
 .divFour {
 -webkit-border-top-right-radius: 0;
 -webkit-border-bottom-right-radius: 0;
 -webkit-border-bottom-left-radius: 0;
 -webkit-border-top-left-radius: 60px;
 -moz-border-radius-topright: 0;
 -moz-border-radius-bottomright: 0;
 -moz-border-radius-bottomleft: 0;
 -moz-border-radius-topleft: 60px;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 0;
 border-top-left-radius: 60px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 }
 

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

Есть вопросы? — Задавайте.

По своей сути переменные в LESS это ничто иное, как обычные константы. Но да шут (фиг и т.д.) с ними. Решил создатель леса сказать что это переменные — будут переменные, но мы то знаем, что это константы. По опыту работы все эти константы действительно становятся раз в месяц переменными, т.к. редко какой сайт мы сделали и забыли и постоянно вносим правки.

Переменные нам нужны для того, чтобы определить их в одном месте, а затем использовать их в любом другом месте нашего стиля.
Например, создав переменную @green: #0a3; Мы можем потом использовать эту переменную в значениях таких свойств, как цвет текста, цвет фона, рамки, градиента и еще чего-нибудь.
Все, кто слушает мои «лекции» про LESS, сразу начинают говорить, что зачем везде писать @green если проще написать #0a3?
Объясняю: @green — очевидная переменная, #0a3 — абсолютно неочевидное значение. Конечно ясно, что это какой-то цвет, но коллеги, кто из вас на лету скажет, что за цвет #84ccf9? А переменная @blue — вполне понятна.

Использовать переменные нужно. Ниже выкладываю наглядные примеры использование переменной.

LESS

@green: #0a3;
 @blue: #84ccf9;
 @darkBlue: @blue - #222; /* 84ccf9 - 222222 = 62aad7 *- см. примечание */
 @small: 10px;
 @normal: 16px;
 @big: 24px;

 header {
 h1 {color: @green; border: @small solid @green; font-size: @big; padding:@normal;}
 p {color: @blue;font-size: @small;
 &:first-letter {color:@darkBlue; font-size: @normal;}
 }
 }

Примечание: ff+11=ff f0+11=ff, т.к. в hex максимальное значение ff (с минимумом тоже самое) сколько вы не прибавляйте (отбавляйте) — 00-min ff-max

CSS

header h1 {color: #00aa33; border: 10px solid #00aa33; font-size: 24px; padding: 16px;}
 header p {color: #84ccf9;font-size: 10px;}
 header p:first-letter {color: #62aad7; font-size: 16px;} 

Можете злорадствовать, противники, что тут кода LESS гораздо больше, но когда вы накатаете портянку на пяток пэйдждаунов и вам прийдется вставить в какое-либо свойство значение зеленого цвета, то не прийдется скроллить вверх для поиска этого цвета, а просто написать @green (Если вы писали CSS-портянки, тогда вы отлично понимаете о чем я).

А, например, как вам такие переменные:

@sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 @serif: Georgia, 'Times New Roman';
 @mono: Monaco, Courier,'Courier New';

Согласитесь, такие переменные, необходимы.

body {font-family: @sans;}
 blockquote {font-family: @serif;}
 code {font-family: @mono;} 

Особенно удобно, работая с LESS, объявить все переменные в одном файлике, не путая его со стилями.

Если я вас еще не убедил, то перейдем к следущему этапу — примешиванию.

Код CSS

#header {background: #333;}
 #header h1 {font-size: 36px;}
 #header p {font-size: 24px;}
 #header p a {color: #fff;}
 #header p a:hover {color: yellow;}

Код LESS

#header {background: #333;
   h1 {font-size: 36px;}
   p {font-size: 24px;
     a {color: #fff;
       &:hover {color: yellow;}
     }
   }
 }

Объясню теперь подробнее. Хотя по коду уже должно быть все понятно.

В коде LESS первый селектор #header имеет свойство цвета фона и затем фигурная кавычка не закрывается, это значит что все последующие селекторы имеют вложенность в данный селектор. Эта вложенность может быть многоуровневая. Хороший пример многоуровневой вложенности показывает 5 строка (кстати, строки в коде CSS и LESS соответствуют друг другу).

Где здесь удобство:

• Наглядность кода — в LESS очевидно видна вложенность, не надо указывать явное наследование, просто вкладываем одни правила внутрь других… всё «прозрачно».
• Количество символов — в LESS их меньше, меньше печатать всегда приятнее.

Что тут непонятного в коде было? Возможно вам будет непонятен символ & перед :hover — этот символ «склеил» предыдущий и следующий селектор, тоесть в нашем примере он склеил в одну строчку a:hover. Это очень удобно использовать для похожих селекторов, например:

CSS

.column1 {width: 100px;}
.column2 {width: 120px;}
.column3 {width: 130px;}

LESS

.column {
 &1 {width: 100px;}
 &2 {width: 120px;}
 &3 {width: 130px;}
 }

Попробуйте, вам понравится.

В следующей статье я расскажу вам про примешивания, которые позволяют сократить написание кода не менее чем вполовину!!!

Первое что мы сделаем, это переименуем наш css файл в less

styles.css = styles.less

Далее нам необходимо откомпилировать наш LESS файл и дать браузеру CSS (тоесть сделать почти обратное действие переименованию). И только после этого мы сможем полноценно использовать динамику в наших таблицах стилей. Есть несколько вариантов компиляции:

• Специальной программой (компилятором) компилируем LESS в CSS. После этого вставляем готовый файл на сайт.
  минус — надо сначала писать — потом компилировать — заливать и проверять на рабочем сайте
  Но иногда именно локально и требуется. Я попробовал три приложения, 1,3 и 4 и оставил 4… но это уже на ваш личный выбор.

  Ссылки:

  • LESS.app (для Mac OS)
  • WinLESS (для Windows)
  • LESS parser (для Adobe AIR — значит кросплатформенное)
  • Crunch (для Adobe AIR — значит кросплатформенное) — есть компрессия выходного CSS

• less.js — если в браузере отключены скрипты (а они отключены только у верстальщиков, которые смотрят, как выглядит сайт без скриптов, остальные 99,999% людей не отключают их) — то, к сожалению, браузер не получит скомпилированный файл, этот способ советуют сами разработчики LESS, принцип работы простой, в секции <head> подключаем наш LESS файл и после него подключаем скрипт для компиляции. Скрипт тут, качаем последнюю версию.  

  <link rel="stylesheet/less" type="text/css" href="styles.less">
   <script src="less-1.3.0.min.js" type="text/javascript"></script>

• node.js — этим способом пользуется мой коллега, я сам вообще не разбираюсь в серверах, поэтому вот ссылка, которую загуглил:
• rhino — про этот способ я ничего не знаю, но вот ссылка
• lessphp — этим способом пользуюсь я. Качаем исходники с сайта. Пишем в секции <head> нашего шаблона следующие записи 

  <?php include('lessphpcomp.php'); ?>
   <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/styles.css">

  Первая строчка — подключает наш файл, который компилирует наш LESS в CSS, вторая строчка подключает скомпилированный CSS в шаблон.

  Сами файлы должны быть созданы нами, нашими руками. Вот пример файла lessphpcomp

  <?php
   require 'lessc.inc.php';
   $docroot = rtrim($_SERVER['DOCUMENT_ROOT'], '\\/');
   $less = new lessc($docroot.'/templates/mytemplate/less/styles.less');
   file_put_contents($docroot.'/templates/mytemplate/css/styles.css', $less->parse());

  Этот файлик делает следующее (построчно):

  1. с помощью less.inc.php (который мы скачали с официального и залили в корень шаблона) компилирует… далее стр.3
  2. создаем переменную докрут
  3. … компилирует наш LESS
  4. в CSS файл

  Который мы и подключили в шаблоне (сам этот файлик styles.css нам необходимо создать вручную и дать права 755).

  Теперь изменяем наш LESS файл — открываем сайт и видим изменения, прям как работать с обычным CSS файлом. 

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

  <?php //include('lessphpcomp.php'); ?>

Есть всякие официальные текстовки (en ru) но я расскажу все по своему.

Что такое LESS и чем он отличается от CSS?

• LESS это тот-же самый CSS, в который добавили динамики.

Что за динамика?

• Это когда вы можете сделать какое-либо условие, смешать свойства, пользоваться переменными.

Для чего это?

• Самый простой пример — вы указали цвет ссылки, и при наведении хотите сделать ее темнее. Вместо того, чтобы открывать какие-нибудь графические программы для подбора цвета, вам нужно в свойстве наведенной ссылки написать, что она должна быть темнее.
  Пример:
  

  @link: #08c; /* Создаем переменную цвета ссылки */
   a {color: @link;} /* Указываем, что цвет ссылки = переменной @link  */
   a:hover {darken(@link, 20%);} /* Указываем, что цвет наведенной ссылки = переменная @link на 20% темнее */ 

Для чего нужны переменные?

• Примером выше, я показал, что можно создать переменную, потом, при верстке сайта, эту переменную можно использовать, например в оформлении рамки блока:

  .linkborder {border: 1px solid @link;}  /* Указываем, что цвет рамки = переменная @link */

  и если вы почему-то решили ссылки сделать в зеленых тонах (а заодно и обводку), то вам нужно всего-лишь сменить 1 запись — переменную:

  @link: #08c; = @link: #6e7;

А что значит «смешать свойства»?

• Это когда вы захотите сделать еще один блок с рамкой и сделать его фон тоже зеленый (в примере выше мы сменили цвет), но светлее:

  .linkborderback {.linkborder; background-color: lighten(@link, 40%);} /* Указываем, что тут мы берем все свойства и значения из селектора .linkborder и добавляем цвет фона = переменная @link на 40% светлее */

Не — ну это понятно, а вообще к чему это все, мне нетрудно и руками все поменять?

• Мне тоже нетрудно, но при использовании LESS при переделках сайтов я экономлю ведро нервов и тележку времени.

А я вообще не слышал, чтобы этот самый LESS кто-то использует.

• Ну я обычно в таких случаях ссылаюсь на известный фреймворк — Бутстрап. Они его используют.

Не — я скачал бутстрап — там CSS.

• Это для всех — CSS, для особо избранных там на сайте есть ссылка — extend — кликните.

А как браузер LESS — то как воспримет?

• Для этого я создам отдельный топик, но на скорую руку сразу скажу — по обычному, т.к. браузеру мы будем давать не LESS, а уже скомпилированный CSS (как выше упомянул — об этом будет отдельный топик).