css较少向选择器添加变量

Question

我是一个新手，只是试图从头开始使用它来删除我的stylessheets中的一些重复。我正在尝试使用以下代码在较少的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 -

我已经尝试了在这里和其他地方建议的各种转义机制，但似乎没有任何工作，perhaphs这不支持更少？如果不是我想我可以在ul＃house-family-menu li＃menu-item上做一个不太相似的案例并一次应用一个项目？

任何帮助都非常感激。

Answer 1

以下内容：

@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} { .... 

---

<强>此外：

如果selector是伪元素，则无法按预期（至少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);
}