css - 在 Less 中使用未知值作为选择器

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>

我正在尝试编写一个全局适用的 LESS 规则，仅当子级的 data-show 属性与父级的 data-active 属性匹配时才显示子级。

类似这样的事情:

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

...where ? 不应该是固定值，而是无论值如何都适用的条件，只要它们相同即可。

有什么想法吗？

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 */ }