Первые шаги в 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;}
}

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

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

2 комментария