CSS少加一个变量来选择

我是一个不太新手只是想用它initally去除一些重复形成我stylessheets。我想添加一个变量（相对）复杂的选择较少使用1.2.21下面的代码：CSS少加一个变量来选择

@current_house_id: 97; 
ul#house-family-menu li#[email protected]_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我得到错误：

Syntax Error: on line 268: expected one of [ (. # * - :: : @media @font-face , { ; got @ after: ul#house-family-menu li#menu-item-

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

任何帮助非常感谢。

来源

2012-11-07 Jona

这没有太大的意义了我。 “@ current_house_id”何时改变？为什么不使用课堂？ – deceze

跨多个站点使用相同的样式表，并且多个不同的选择器引用该变量。另外，id号码由wordpress菜单创建设置。 – Jona

我仍然建议你在问题的元素上使用*类*而不是动态地改变CSS。 – deceze

以下：

@b: 3; 

(~'[email protected]{b}') { 
    font-size: 20px; 
}

输出：

.tester3 { 
    font-size: 20px; 
}

您的解决方案：

@current_house_id: 97; 
(~'ul#house-family-menu li#[email protected]{current_house_id}') { }

输出：

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

编辑：

1.4.0-β似乎已经改变了这个（http://lesscss.org/）：

(~"[email protected]{index}") { ...

选择插值已被弃用，而是执行此

[email protected]{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-07 10:00:25 Patrick

CSS少加一个变量来选择

回答

相关问题