Используйте неизвестных значения как селекторы в менее

Question

Учитывая эту разметку:

<div class="parent" data-active="typeA"> 
    <div class="child" data-show="typeA">Show only when parent=typeA</div> 
    <div class="child" data-show="typeB">Show only when parent=typeB</div> 
    <div class="child" data-show="typeC">Show only when parent=typeC</div> 
</div> 

Я пытаюсь написать глобально применимые МЕНЬШЕ правило, которое отображает только ребенок, когда его атрибут data-show соответствует атрибуту родительского data-active.

Что-то вроде этого:

.parent { 
    .child { display:none; } 
    &[data-active="?"] .child[data-show="?"] { display:block; } 
} 

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

Любые идеи?

Answer 1

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

.parent { 
    .child { display: none; }  
    &[data-active="typeA"] { 
     .child[data-show="typeA"] { display: block; } 
    } 
    &[data-active="typeB"] { 
     .child[data-show="typeB"] { display: block; } 
    } 
    &[data-active="typeC"] { 
     .child[data-show="typeC"] { display: block; } 
    } 
} 

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

.parent { 
    .child { display: none; } 
    .addType("typeA"); 
    .addType("typeB"); 
    .addType("typeC");  
} 

.addType(@type) { 
    &[data-active="@{type}"] { 
     .child[data-show="@{type}"] { display: block; } 
    } 
} 

И если вы хотите, чтобы сделать это еще более общий характер, можно определить массив типов и вызвать .addType для каждого из типов, как это:

@types: "typeA", "typeB", "typeC"; 

.parent { 
    .child { display: none; } 
    .-(@i: length(@types)) when (@i > 0) { 
     @type: extract(@types, @i); 
     .addType(@type); 
     .-((@i - 1)); 
    } .-; 
} 

.addType(@type) { /* see above */ }