Question

由于CSS specificity问题，我试图使用LESS mixin构建一个CSS表达式，如下所示：

// overriding any previous styling with a more specific expression:
.styleSpecificListElement(@id: "#index") {
    main .list ul @{id} a {
        // referencing another mixin here:
        .setLiStyling();
    }
}

LESS 将解析它，但是它用双引号中的inserted参数进行解析，其中没有按预期计算：

/* don't want the double-quotes around the id: */
main .list ul "#index" a {
    /* ...code from the .setLiStyling() mixin generated here... */
}

Answer 1

好的，没关系，我只是弄明白了 - 哈希符号#可以在mixin中的@{id}引用之前，然后参数作为String 传递，不带引号：

.styleSpecificListElement(@id: index) {
    main .list ul #@{id} a {
        // referencing another mixin here:
        .setLiStyling();
    }
}

...然后调用.styleSpecificListElement(foobar)将解析为CSS：

main .list ul #foobar a {
    /* ...code from the .setLiStyling() mixin generated here... */
}

如何使用LESS mixin参数构建CSS样式？

1 个答案: