APPOSSUM - ТЕХ. ПОДРОБНОСТИ

Все аппы

↓ Громкость: 80 % ↑

Громкость: 80 %

ГЕНЕРАТОР РРРИТМОВ ПОСТУЧАТЬ Кто не умеет играть на этнических барабанах — узнает многое о ритмах, даже сможет их сочинять. Кто умеет — получит инструмент, чтобы делиться барабанными знаниями. Но больше всего Генератор ррритмов Drrrums подойдёт тем, кто учится и экспериментирует. МАНДАЛА НЕЛЬСОНА НАРИСОВАТЬ Просто двигайте мышью (можно под музыку). Если действовать намеренно — это будет рисованием в необычном графическом редакторе. Если вы просто позволите визуальным образам возникать и исчезать, это может стать медитацией. ДИКТАНТЫ КАТАЛОГ (558 ЗАДАНИЙ) Апп диктует слова — вы пишете. Если пишете грамотно, то цель достигнута. В некоторых заданиях надо сразу переводить слова на другой язык. Сейчас работают три словаря: русский, английский, немецкий . E.MEMORY КАТАЛОГ (281 ЗАДАНИЙ) Апп-игра для запоминания любых соответствий, в первую очередь иностранных слов. Например, стол — это table , про Монте-Кристо написал Дюма , Сеул — столица Южной Кореи . Много заданий из школьных и институтских учебников. ЧИСЛА КАТАЛОГ (14 ЗАДАНИЙ) Генератор математических примеров пригодится тем, кто учит своих или чужих детей арифметике. Примеры можно распечатать или решать онлайн, тогда апп сам всё проверит. YOBEL ХОЧУ ПРАЗДНИК Вычисление необычных юбилеев. Узнайте, когда вам стукнет миллиард секунд или сто тысяч лет в двоичной системе — и отпразднуйте! Или найдите повод поздравить кого-то другого.

Кто не умеет играть на этнических барабанах — узнает многое о ритмах, даже сможет их сочинять. Кто умеет — получит инструмент, чтобы делиться барабанными знаниями. Но больше всего Генератор ррритмов Drrrums подойдёт тем, кто учится и экспериментирует.

МАНДАЛА НЕЛЬСОНА НАРИСОВАТЬ Просто двигайте мышью (можно под музыку). Если действовать намеренно — это будет рисованием в необычном графическом редакторе. Если вы просто позволите визуальным образам возникать и исчезать, это может стать медитацией.

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

ДИКТАНТЫ КАТАЛОГ (558 ЗАДАНИЙ) Апп диктует слова — вы пишете. Если пишете грамотно, то цель достигнута. В некоторых заданиях надо сразу переводить слова на другой язык. Сейчас работают три словаря: русский, английский, немецкий .

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

E.MEMORY КАТАЛОГ (281 ЗАДАНИЙ) Апп-игра для запоминания любых соответствий, в первую очередь иностранных слов. Например, стол — это table , про Монте-Кристо написал Дюма , Сеул — столица Южной Кореи . Много заданий из школьных и институтских учебников.

Апп-игра для запоминания любых соответствий, в первую очередь иностранных слов. Например, стол — это table , про Монте-Кристо написал Дюма , Сеул — столица Южной Кореи . Много заданий из школьных и институтских учебников.

ЧИСЛА КАТАЛОГ (14 ЗАДАНИЙ) Генератор математических примеров пригодится тем, кто учит своих или чужих детей арифметике. Примеры можно распечатать или решать онлайн, тогда апп сам всё проверит.

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

YOBEL ХОЧУ ПРАЗДНИК Вычисление необычных юбилеев. Узнайте, когда вам стукнет миллиард секунд или сто тысяч лет в двоичной системе — и отпразднуйте! Или найдите повод поздравить кого-то другого.

Вычисление необычных юбилеев. Узнайте, когда вам стукнет миллиард секунд или сто тысяч лет в двоичной системе — и отпразднуйте! Или найдите повод поздравить кого-то другого.

ТЕХ. ПОДРОБНОСТИ ПРАВИЛА И ИНСТРУКЦИИ КОНТАКТЫ ПОСЛЕДНИЕ ИЗМЕНЕНИЯ ТЕХ. ПОДРОБНОСТИ Вернуться к списку статей LESS CSS. Примеси (mixins) Автор: А. Смирнов Текст опубликован: 29.03.2012 Твитнуть см. также: LESS CSS. Первое знакомство. Расчет CSS на клиенте LESS CSS. Переменные LESS CSS. Примеси (mixins) LESS CSS. Комментарии, встроенные функции, пространства имен, импорт LESS CSS. Строковые шаблоны LESS CSS. Варианты использования JavaScript LESS CSS. Настройка параметров парсера JavaScript LESS CSS. Расчет статического CSS при помощи Node.js, WSH, WinLess LESS CSS. Динамический расчет CSS на сервере. LESS for Java LESS CSS. LESS for Java: конфигурирование среды JavaScript. Обращение к Java из LESS LESS CSS. Динамический расчет CSS на сервере. LESS for PHP LESS CSS. LESS for PHP. Расчет CSS с кэшированием Вторая возможность LESS – использование примесей ( mixins ). Набор правил, заданный для элемента с определенным идентификатором ( id ) или определенного класса, можно целиком учесть в другом наборе правил через простое упоминание этого класса или идентификатора: test.html: <html> <head>  <link rel="stylesheet/less" type="text/css" href="style.less"> <script src="less.js" type="text/javascript"></script> </head> <body> <div class=" hw_class " id="hw_id"> Hello, <b id=" hw_b_id ">World</b>! </div> <div class="comment_class" id="comment_id"> This is <b>LESS</b> sample! </div> </body> </html> style.less: @greetings_color: #0000ff; @greetings_addressee_color: #0000aa; .hw_class { color: @greetings_color; } #hw_b_id { color: @greetings_addressee_color; } .comment_class { border-bottom: dotted 1px black; .hw_class ; } .comment_class b { border-bottom: solid 1px black; #hw_b_id ; } => .hw_class { color: #0000ff; } #hw_b_id { color: #0000aa; } .comment_class { border-bottom: dotted 1px black; color: #0000ff; } .comment_class b { border-bottom: solid 1px black; color: #0000aa; } При этом использовать для подмешивания более сложные (чем просто классы или идентификаторы) конструкты нельзя : style.less: @greetings_color: #0000ff; @greetings_addressee_color: #0000aa; .hw_class { color: @greetings_color; } .hw_class b { color: @greetings_addressee_color; } .comment_class { border-bottom: dotted 1px black; .hw_class; } .comment_class b { border-bottom: solid 1px black; .hw_class b; } => Примесь раскрывается простым добавлением подмешиваемого набора правил в место вставки, без применения дополнительной логики, причем все подмешиваемые правила равноправны между собой и с правилами, непосредственно введенными в набор. Например, примеси набора правил элемента с идентификатором и примеси набора правил класса совершенно равнозначны, и, в случае пересечения по каким-либо правилам, побеждает более позднее (подмешанное или непосредственно введенное последним) правило. LESS овский препроцессор же не предупреждает о таких пересечениях. .hw_class { color: #0000ff; } #hw_b_id { color: #0000aa; } .comment_class1 { .hw_class; #hw_b_id; } .comment_class2 { #hw_b_id; .hw_class; } => .comment_class1 { color: #0000ff; color: #0000aa; } .comment_class2 { color: #0000aa; color: #0000ff; } Расширение этих возможностей – параметризуемая примесь , т.е. примесь, подмешиваемая с указанием входных параметров. Параметры примеси суть переменные с областью действия – набором правил примеси, и значениями, задаваемыми при подмешивании (или в объявлении примеси, как значения по умолчанию). .underlined_text(@color: #00bb00, @border_style: dotted) { color: @color; border-bottom: @border_style 1px black; } .comment_class { border-bottom: dotted 1px black; .underlined_text(blue); } => .comment_class { border-bottom: dotted 1px black; color: #0000ff; border-bottom: dotted 1px #000000; } Параметризуемая примесь оформляется через использование префикса . или # . Важно: параметризуемая примесь не включается в результирующий CSS напрямую, как набор правил для класса или именованного элемента с id (хотя и оформляется через использование префикса . или # , имеющего здесь чисто формальное значение), поэтому можно (и нужно) использовать задание пустого набора параметров для правил, не описывающих конкретные сущности , а особенно не являющихся целостными наборами свойств. Выбирая между префиксами . и # для обозначения параметризованной примеси я отдаю предпочтение . (исходя из сложной ассоциации с классами CSS , которые во множестве можно назначать элементу, добавляя ему новые свойства). Синтаксис включения примеси, не требующей параметров (имеющей пустой список параметров или допускающей пустой список параметров за счет выставленных умолчаний) в набор правил допускает, но не требует (по крайней мере в рассматриваемой реализации) явного задания пустого набора параметров () при вызове: .underlined_text() { color: #00bb00; border-bottom: @border_style 1px black; } .comment_class { .underlined_text; } = (то же самое) .underlined_text() { color: #00bb00; border-bottom: @border_style 1px black; } .comment_class { .underlined_text(); } => .comment_class { color: #00bb00; border-bottom: dotted 1px #000000; } Я же, со своей стороны, настоятельно рекомендую эти скобки не опускать, для определенности (есть скобки – вызов параметризованного mixinа, нету скобок - непараметризованного). Перегрузка параметризованных примесей (т.е. возможность иметь одноименные примеси, различающиеся набором параметров) работает лишь отчасти (хотя и заявлена в документации) и рекомендуется к использованию с осторожностью. Проблемы начинаются с примесями, имеющими пустой список параметров. Выбор между списками из одного и двух параметров система делает уверенно: .underlined_text(@color) { color: @color; border-bottom: dotted 1px black ; } .underlined_text(@color, @border_style) { color: @color; border-bottom: @border_style 1px blue ; } .comment_class2 { .underlined_text(magenta); } .comment_class3 { .underlined_text(green, dashed); } => .comment_class2 { color: #ff00ff; border-bottom: dotted 1px black ; } .comment_class3 { color: #008000; border-bottom: dashed 1px blue ; } …но вот уже так не работает: .underlined_text() { color: red; border-bottom: solid 1px black; } .underlined_text(@color) { color: @color; border-bottom: dotted 1px black; } .underlined_text(@color, @border_style) { color: @color; border-bottom: @border_style 1px black; } .comment_class1 { .underlined_text(); } .comment_class2 { .underlined_text(magenta); } .comment_class3 { .underlined_text(green, dashed); } => .comment_class1 { color: red; border-bottom: solid 1px black; } .comment_class2 { color: red; border-bottom: solid 1px black; color: #ff00ff; border-bottom: dotted 1px black; } .comment_class3 { color: red; border-bottom: solid 1px black; color: #008000; border-bottom: dashed 1px #000000; } Параметризованный mixin с пустым списком параметров считается подходящим для любого вызова . Впрочем, не факт, что это осознанный выбор, а не особенность конкретной реализации. Вообще нет гарантий, что какой-то трюк (навроде вышеописанной перегрузки, или ранее упоминавшихся связок одноименных переменных, из которых используется последнее объявление), проходящий в Javascript -реализации LESS , сработает и в других реализациях (о которых ниже), и наоборот, так что старайтесь ограничивать свою фантазию наиболее железобетонными конструкциями. А вот что работает довольно надежно, так это перегрузка функций примесей с явным именованием вариантов через введение константы в список параметров. Рассмотрим пример (почти из учебника с http://lesscss.org/ ): .underlined_text( normal , @color) { border-bottom: dotted 1px black; } .underlined_text( bold , @color) { border-bottom: solid 2px black; } .underlined_text ( @_ , @color) { color: @color; } .comment_class { .underlined_text( normal , blue); } .comment_class b { .underlined_text( bold , blue); } => .comment_class { border-bottom: dotted 1px black; color: #0000ff; } .comment_class b { border-bottom: solid 2px black; color: #0000ff; } Здесь для класса comment_class подходит вариант описания примеси underlined_text , идентифицированный через константу normal ; для набора правил comment_class b подходит вариант описания примеси underlined_text , идентифицированный через константу bold ; а вот вариант .underlined_text (@_, @color) подходит для обоих (вообще для всех, вне зависимости от значения 2го параметра) наборов правил и учитывается в них обоих. Еще одно свойство примесей, которое мы здесь иллюстрируем: в набор правил добавляются все подходящие примеси, идентифицируемые конкретным именем . Внимание: @_ здесь – не специальная конструкция языка, обозначающая любую константу, а обычная переменная с именем _ , так что: .any_text(red) { border-bottom: solid 2px black; } .any_text(green) { border-bottom: dotted 1px black; } .any_text ( @_ ) { color: @_ ; } .comment_class { .any_text(green); } .comment_class b { .any_text(red); } = (можно переписать в синтаксисе LESS как) .any_text(red) { border-bottom: solid 2px black; } .any_text(green) { border-bottom: dotted 1px black; } .any_text ( @color ) { color: @color ; } .comment_class { .any_text(green); } .comment_class b { .any_text(red); } => .comment_class { border-bottom: dotted 1px black; color: #008000; } .comment_class b { border-bottom: solid 2px black; color: #ff0000; } Еще один интересный вариант перегрузки одноименных примесей – перегрузка по условию. То есть – варианту примеси задается (через служебное слово when ) условие ( guard , по терминологии англоязычной документации), при исполнении коего этот набор правил подставляется на заказанное место. Guard на набор правил может использовать как аргументы вызова примеси, так и глобальные переменные, а также ряд функций LESS : @bold_color: red ; .any_text(@color) when (hue(@color)=hue(@bold_color)) and (saturation(@color)=saturation(@bold_color))and (lightness(@color)=lightness(@bold_color)){ border-bottom: solid 2px black; } .any_text (@color) { color: @color; } .comment_class { .any_text(green); } .comment_class b { .any_text(red); } => .comment_class { color: #008000; } .comment_class b { border-bottom: solid 2px black; color: #ff0000; } Примечание: мне не удалось найти более вменяемого, чем покомпонентное, метода сравнения (на равенство) двух цветов. Опять-таки – с нетерпением жду от вас информации о других способах, мною пропущенных. Прямое сравнение, к сожалению, не работает. Точнее, к счастью, оно не компилируется, причем с более-менее логичным сообщением: .any_text(@color) when ( @color=#00aa00 ){ border-bottom: dotted 1px black; } => Специально для выражений-guardов написан набор логических тестирующих функций : iscolor isnumber isstring iskeyword isurl и ispixel ispercentage isem В выражениях-guardах могут использоваться логические операнды and и not , а вот вместо or почему-то надо ставить запятую ( , ). И еще один факт из жизни примесей - внутри mixinа на весь набор входящих параметров, разделенных пробелом, можно ссылаться через служебную переменную @arguments , что иногда бывает удобно: .underlined_text(@border_style, @border_width, @border_color) { border-bottom: @arguments ; } .comment_class { .underlined_text( solid,1px,blue ); } => .comment_class { border-bottom: solid 1px #0000ff ; } В заключение отметим, что примеси – идеальное место помещения конструкций, специфических для определенных типов браузеров (vendor-specific): rounded-corners (@radius: 5px) { border-radius: @radius; -webkit- border-radius: @radius; -moz- border-radius: @radius; } Очень удобная возможность, предоставляемая LESS , – вложенные правила ( nested rules ) позволяющие описывать иерархии элементов иерархическими же конструкциями. Посмотрим, как можно через LESS скомпоновать несколько наборов правил, относящихся к вложенным друг в друга элементам DOM : .comment_class { color: green; } .comment_class b { color: red; } .comment_class b:hover { border-bottom: solid 2px black; } <= .comment_class { color: green; b { color: red; &:hover { border-bottom: solid 2px black; } } } При формировании множества описанных CSS -конструкций селектор вложенного CSS -правила добавляется к селектору родительского через пробел (см. .comment_class b ). При необходимости формирования составных селекторов без использования разделителей (как правило для псевдо-классов типа :hover или :focus ) предваряйте вложенный селектор символом & (см. .comment_class b:hover , без & транслировалось бы в .comment_class b :hover , что не работает). Одновременно вложенные правила – и то место LESS , в котором проще всего переборщить, построив слишком сложную иерархическую структуру. Держать себя в рамках разумного может помочь принятие (в душе) концепции верстки при помощи АНБ . АНБ – Абсолютно независимые блоки - это концепция, в рамках которой каждый блок сайта свёрстан настолько независимо, что может быть помещён в любое место HTML-страницы без изменения внешнего вида. На момент написания статьи АНБ принята как руководство к действию командой разработчиков Яндекса и является краеугольным камнем их методологии БЭМ ( Блок, Элемент, Модификатор ). Очевидно, в рамках этой концепции никакая вложенная конструкция размерами не должна превышать блок. Но помните: любой абсолют, в том числе и абсолютная независимость блока, недостижим. Кстати, хорошей проверкой LESSовской разметки служит следующая ситуация: вы открываете какой-то элемент в Firebug , смотрите его свойства и пытаетесь найти их в исходнике. Если это получается с трудом, подумайте о применении при написании правил разметки каких-то формальных ограничивающих правил. А еще старайтесь, чтобы каждая конструкция в файле разметки помещалась на странице и охватывалась взглядом без скроллинга. Рассмотрим такой пример: style0.less: @gp_colorLow: gray; . gp_menu1 { ul { background: @gp_colorLow; > li { > a { font-weight: bold; } } } } . gp_menu2 { ul { background: @gp_colorLow; } ul > li > a { font-weight: bold; } } . gp_menu3 { ul { background: @gp_colorLow; . gp_menu3__item { > a { font-weight: bold; } } } } test.html: <html> <head>  <link rel="stylesheet/less" type="text/css" href="style0.less"> <script src="less.js" type="text/javascript"></script> </head> <body> <div class=" gp_menu1 "> <ul> <li>item1_1:<a href="#">item1_1</a></li> <li>item1_2:<a href="#">item1_2</a></li> </ul> </div> <div class=" gp_menu2 "> <ul> <li>item2_1:<a href="#">item2_1</a></li> <li>item2_2:<a href="#">item2_2</a></li> </ul> </div> <div class=" gp_menu3 "> <ul> <li class=" gp_menu3__item "> item3_1:<a href="#">item3_1</a></li> <li class=" gp_menu3__item "> item3_2:<a href="#">item3_2</a></li> </ul> </div> </body> </html> => Первое меню ( class="gp_menu1" ) мы разметили в точном соответствии со вложенностью HTML -тагов. Проинспектируем ссылку в пункте меню при помощи Firebug (Inspect Element with Firebug): . gp_menu1 ul > li > a { font-weight: bold; } Чтобы добраться до ее стиля найдем (текстовым поиском, это уникальный идентификатор) описание класса gp_menu1 , в нем раздел ul , в нем раздел >li , в нем раздел >a . Всё, уф. Довольно много действий, придется напрячь мозг и зрение. Второе меню ( class="gp_menu2" ) мы разметили в соответствии со следующим формальным правилом: не строить конструкций более, чем из двух матрешек (максимальный уровень вложенности правил = 2). Также проинспектируем ссылку: . gp_menu2 ul > li > a { font-weight: bold; } Чтобы добраться до ее стиля найдем (текстовым поиском, это уникальный идентификатор) описание класса gp_menu2 , а в нем раздел ul > li > a . Уже проще, но выразительность вложенности теряется. Наконец, 3й вариант навеян тем самым Яндексовским БЭМом ( gp_menu3 – блок, gp_menu3__item – его элемент), а список правил для ссылки выглядит так: . gp_menu3 ul .gp_menu3__item > a { font-weight: bold; } Чтобы добраться до ее стиля найдем (текстовым поиском, это уникальный идентификатор) описание класса gp_menu3__item , а в нем – разметку для a . Лично мне 3й вариант (назовем его вариантом с именованием промежуточных уровней) симпатичнее всего, несмотря на несколько больший объем HTML-разметки, нужный для его реализации.

ТЕХ. ПОДРОБНОСТИ

ПРАВИЛА И ИНСТРУКЦИИ

КОНТАКТЫ

ПОСЛЕДНИЕ ИЗМЕНЕНИЯ

Вторая возможность LESS – использование примесей ( mixins ). Набор правил, заданный для элемента с определенным идентификатором ( id ) или определенного класса, можно целиком учесть в другом наборе правил через простое упоминание этого класса или идентификатора:

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

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

Расширение этих возможностей – параметризуемая примесь , т.е. примесь, подмешиваемая с указанием входных параметров. Параметры примеси суть переменные с областью действия – набором правил примеси, и значениями, задаваемыми при подмешивании (или в объявлении примеси, как значения по умолчанию).

Параметризуемая примесь оформляется через использование префикса . или # .

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

Синтаксис включения примеси, не требующей параметров (имеющей пустой список параметров или допускающей пустой список параметров за счет выставленных умолчаний) в набор правил допускает, но не требует (по крайней мере в рассматриваемой реализации) явного задания пустого набора параметров () при вызове:

Я же, со своей стороны, настоятельно рекомендую эти скобки не опускать, для определенности (есть скобки – вызов параметризованного mixinа, нету скобок - непараметризованного).

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

…но вот уже так не работает:

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

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

А вот что работает довольно надежно, так это перегрузка функций примесей с явным именованием вариантов через введение константы в список параметров. Рассмотрим пример (почти из учебника с http://lesscss.org/ ):

Здесь для класса comment_class подходит вариант описания примеси underlined_text , идентифицированный через константу normal ; для набора правил comment_class b подходит вариант описания примеси underlined_text , идентифицированный через константу bold ; а вот вариант .underlined_text (@_, @color) подходит для обоих (вообще для всех, вне зависимости от значения 2го параметра) наборов правил и учитывается в них обоих. Еще одно свойство примесей, которое мы здесь иллюстрируем: в набор правил добавляются все подходящие примеси, идентифицируемые конкретным именем .

Внимание: @_ здесь – не специальная конструкция языка, обозначающая любую константу, а обычная переменная с именем _ , так что:

Еще один интересный вариант перегрузки одноименных примесей – перегрузка по условию. То есть – варианту примеси задается (через служебное слово when ) условие ( guard , по терминологии англоязычной документации), при исполнении коего этот набор правил подставляется на заказанное место. Guard на набор правил может использовать как аргументы вызова примеси, так и глобальные переменные, а также ряд функций LESS :

Примечание: мне не удалось найти более вменяемого, чем покомпонентное, метода сравнения (на равенство) двух цветов. Опять-таки – с нетерпением жду от вас информации о других способах, мною пропущенных. Прямое сравнение, к сожалению, не работает. Точнее, к счастью, оно не компилируется, причем с более-менее логичным сообщением:

Специально для выражений-guardов написан набор логических тестирующих функций :

iscolor

isnumber

isstring

iskeyword

isurl

ispixel

ispercentage

isem

В выражениях-guardах могут использоваться логические операнды and и not , а вот вместо or почему-то надо ставить запятую ( , ).

И еще один факт из жизни примесей - внутри mixinа на весь набор входящих параметров, разделенных пробелом, можно ссылаться через служебную переменную @arguments , что иногда бывает удобно:

В заключение отметим, что примеси – идеальное место помещения конструкций, специфических для определенных типов браузеров (vendor-specific):

Очень удобная возможность, предоставляемая LESS , – вложенные правила ( nested rules ) позволяющие описывать иерархии элементов иерархическими же конструкциями. Посмотрим, как можно через LESS скомпоновать несколько наборов правил, относящихся к вложенным друг в друга элементам DOM :

При формировании множества описанных CSS -конструкций селектор вложенного CSS -правила добавляется к селектору родительского через пробел (см. .comment_class b ). При необходимости формирования составных селекторов без использования разделителей (как правило для псевдо-классов типа :hover или :focus ) предваряйте вложенный селектор символом & (см. .comment_class b:hover , без & транслировалось бы в .comment_class b :hover , что не работает).

Одновременно вложенные правила – и то место LESS , в котором проще всего переборщить, построив слишком сложную иерархическую структуру. Держать себя в рамках разумного может помочь принятие (в душе) концепции верстки при помощи АНБ .

АНБ – Абсолютно независимые блоки - это концепция, в рамках которой каждый блок сайта свёрстан настолько независимо, что может быть помещён в любое место HTML-страницы без изменения внешнего вида. На момент написания статьи АНБ принята как руководство к действию командой разработчиков Яндекса и является краеугольным камнем их методологии БЭМ ( Блок, Элемент, Модификатор ). Очевидно, в рамках этой концепции никакая вложенная конструкция размерами не должна превышать блок. Но помните: любой абсолют, в том числе и абсолютная независимость блока, недостижим.

Кстати, хорошей проверкой LESSовской разметки служит следующая ситуация: вы открываете какой-то элемент в Firebug , смотрите его свойства и пытаетесь найти их в исходнике. Если это получается с трудом, подумайте о применении при написании правил разметки каких-то формальных ограничивающих правил. А еще старайтесь, чтобы каждая конструкция в файле разметки помещалась на странице и охватывалась взглядом без скроллинга. Рассмотрим такой пример:

Первое меню ( class="gp_menu1" ) мы разметили в точном соответствии со вложенностью HTML -тагов. Проинспектируем ссылку в пункте меню при помощи Firebug (Inspect Element with Firebug):

Чтобы добраться до ее стиля найдем (текстовым поиском, это уникальный идентификатор) описание класса gp_menu1 , в нем раздел ul , в нем раздел >li , в нем раздел >a . Всё, уф. Довольно много действий, придется напрячь мозг и зрение.

Второе меню ( class="gp_menu2" ) мы разметили в соответствии со следующим формальным правилом: не строить конструкций более, чем из двух матрешек (максимальный уровень вложенности правил = 2). Также проинспектируем ссылку:

Чтобы добраться до ее стиля найдем (текстовым поиском, это уникальный идентификатор) описание класса gp_menu2 , а в нем раздел ul > li > a . Уже проще, но выразительность вложенности теряется.

Наконец, 3й вариант навеян тем самым Яндексовским БЭМом ( gp_menu3 – блок, gp_menu3__item – его элемент), а список правил для ссылки выглядит так:

Чтобы добраться до ее стиля найдем (текстовым поиском, это уникальный идентификатор) описание класса gp_menu3__item , а в нем – разметку для a . Лично мне 3й вариант (назовем его вариантом с именованием промежуточных уровней) симпатичнее всего, несмотря на несколько больший объем HTML-разметки, нужный для его реализации.