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

Код 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;}
 }

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

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