—»     —»   Изучаем LESS: Вложенные правила
  Раздел: Образование и Изучение, CSS/Style Sheets   Комментариев: 2  

Изучаем LESS: Вложенные правила

Продолжаем наше обучение LESS, и сегодня мы хотели бы вам рассказать о вложенных правилах или Nested Rules в LESS, которые помогут вам сохранить ваш код максимально понятным. Если вы не читали наши первые три части, посвященные изучению LESS, то обязательно ознакомьтесь с ними: «Изучаем LESS: Введение», «Изучаем LESS: Использование переменных», «Изучаем LESS: Mixin-ы».

Изучаем LESS: Вложенные правила

Теперь давайте познакомимся с вложенными правилами, темой, которую, вероятно, будет сложно усвоить, но мы разложим все по полочкам и подкрепим это все отличными примерами кода.

Что означает «вложенные»?

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

Давайте создадим пример. Вы пишете код для сайта, и у вас есть правило paragraph. Вдобавок к вашему стандартному тэгу paragraph, у вас также имеются классы для вступительного параграфа и выделенного параграфа. В данном случае, давайте предположим, что вы собираетесь оформить стандартный параграф стандартным шрифтом без засечек обычного размера со стандартным межстрочным интервалом. Ваш CSS-код должен выглядеть следующим образом (учтите, что это не пойдет в наш файл LESS – это всего лишь пример):

p {
color: #232323;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 21px;
}

Вроде стандартно. Для класса вступительного параграфа вы выставляете больший по размеру шрифт, и весь текст отображен в прописном формате. А для выделенного параграфа текст выделяется полужирным, и окрашивается в синий цвет. Не спрашивайте, почему мы это делаем в наше то время, так как мы просто хотим, чтобы пример был наглядным!

Итак, в CSS вы, вероятно, пропишите класс следующим образом:

p {
color: #232323;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 21px;
}

p .intro {
font-variant: small-caps;
font-size: 16px;
line-height: 24px;
}

p .highlight {
color: #00214D;
font-weight: bold;
}

Код будет не таким уж длинным, но во многом за счет того, что это простенький пример. Но в LESS он будет еще гораздо менее длинным.

Создаем вложенное правило LESS

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

Для начала давайте посмотрим на наш основной тэг paragraph:

// Variables
// ---------

@textColor: #232323;
@textHighlight: #00214D;
@fontFamily: Helvetica, Arial, sans-serif;
@fontSize: 14px;
@lineHeight: 21px;

@introSize: 16px;
@introLineHeight: 24px;
@introFontVariant: small-caps;

// LESS for Paragraph
// ------------------

p {
color: @textColor;
font-family: @fontFamily;
font-size: @fontSize;
line-height: @lineHeight;
}

Сейчас мы собираемся вложить в класс .intro. Для этого нам нужно создать класс самым обычным образом, но включить класс внутрь фигурных скобок правила paragraph.

// Variables
// ---------

@textColor: #232323;
@textHighlight: #00214D;
@fontFamily: Helvetica, Arial, sans-serif;
@fontSize: 14px;
@lineHeight: 21px;

@introSize: 16px;
@introLineHeight: 24px;
@introFontVariant: small-caps;

// LESS for Paragraph
// ------------------

p {
color: @textColor;
font-family: @fontFamily;
font-size: @fontSize;
line-height: @lineHeight;

.intro {
font-variant: @introFontVariant;
font-size: @introSize;
line-height: @introLineHeight;
} // End of .intro class

.highlight {
color: @textHighlight;
font-weight: bold;
} // End of .highlight class

} // End of paragraph rule

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

p {
color: #222222;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 21px;
}
p .intro {
font-variant: small-caps;
font-size: 16px;
line-height: 24px;
}
p .highlight {
color: #00214d;
font-weight: bold;
}

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

Погодите, что мне делать, если я не хочу все элементы делать дочерними?

Отличный вопрос, и LESS включает в себя быстрое и простенькое решение. Если вы предпочитаете, чтобы в вашем CSS-коде было p.intro вместо p .intro, просто добавьте знак & перед вашим вложенным правилом. Ознакомьтесь с примером класса intro в коде примера, приведенном ниже.

// LESS for Paragraph
// ------------------

p {
color: @textColor;
font-family: @fontFamily;
font-size: @fontSize;
line-height: @lineHeight;

&.intro {
font-variant: @introFontVariant;
font-size: @introSize;
line-height: @introLineHeight;
}

.highlight {
color: @textHighlight;
font-weight: bold;
}

}

Что в результате дает нам следующий скомпилированный код:

p {
color: #222222;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 21px;
}
p.intro {
font-variant: small-caps;
font-size: 16px;
line-height: 24px;
}
p .highlight {
color: #00214d;
font-weight: bold;
}

Это очень важно учитывать, так как будут моменты, когда вам нужен будет дочерний оператор, а также случаи, когда вам просто нужно будет определить элементы конкретными классами.

Что дальше?

Дальше мы ознакомимся с функциями в LESS. Мы также затронем операторы. Спасибо за чтение.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, LESS
Опубликовал Design FactoRy   Прочитано (раз): 11239   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 15 августа 2012 @ 00:12
Написал: mrnobody — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Попробовал сделать, очень понравилось, делал по первому примеру из divhack
LESS файл

Компилировал в CSS через WinLess. Очень сильно не понравилось то, что селекторы получаются длинными (body .wrap article h1)+вместо табов ставятся пробелы (хотя можно применить Minify в настройках WinLess). И еще у меня не получилось сделать CSS'ый комментарий, точнее получилось, но не знаю в какое место его вставить, чтобы в скомпилированном CSS файле он был в нужном мне месте.
Вот картинка:
Комментарий #2: 13 октября 2012 @ 10:18
Написал: radionanet — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Можете сделать, так чтобы в конце статьи было содержание для перехода на следующею статью, а то так тяжело ориентироваться куда дальше и где следующая статья по это теме.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031