2

我是一个 LESS 新手，只是试图最初使用它来删除我的样式表中的一些重复项。我正在尝试使用以下代码在 less 1.2.21 中将变量添加到（相对）复杂的选择器中：

@current_house_id: 97;
ul#house-family-menu li#menu-item-@current_house_id {
    background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%;
}

为免生疑问，原始的 css 应该是：

ul#house-family-menu li#menu-item-97 {
    background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%;
}

当我用 lessc 编译它时，我得到了错误：

语法错误：在第 268 行：预期 [ ( . # * - :: : @media @font-face , { ; 得到 @ after: ul#house-family-menu li#menu-item- 之一

我已经尝试过这里和其他地方建议的各种转义机制，但似乎没有任何效果，也许这在 less 中不受支持？如果不是，我想我可以在 ul#house-family-menu li#menu-item 上做一个不太等效的案例，并一次应用一个项目？

非常感谢任何帮助。

4

1 回答 1

3

以下：

@b: 3;

(~'.tester@{b}') {
    font-size: 20px;
}

输出：

.tester3 {
    font-size: 20px;
}

您的解决方案：

@current_house_id: 97;
(~'ul#house-family-menu li#menu-item-@{current_house_id}') {    }

输出：

ul#house-family-menu li#menu-item-97 {    }

编辑：

1.4.0-beta 看起来改变了这一点（http://lesscss.org/）：

(~".myclass_@{index}") { ...

不推荐使用选择器插值，而是这样做

.myclass_@{index} { ....

此外：

如果选择器是伪元素，则无法按预期进行选择器插值（至少 v1.5.0）。未解决的问题：https ://github.com/less/less.js/issues/1294

解决方法：

.myMixin(@whichPseudo) {
  @pseudo-selector: ~":@{whichPseudo}";
    &@{pseudo-selector} {
       background: red;
    }
}

#someEl1 {
    .myMixin(before);
}

#someEl2 {
   .myMixin(after);
}
于 2012-11-07T10:00:25.977 回答