2014-09-04 97 views
3

我将举一个我想要做的例子。有没有办法在LESS中编写自定义选择器?

:all() { 
    &, 
    &:link, 
    &:visited, 
    &:active, 
    &:focus 
} 

上面是“定制选择器”其本身返回选择一个锚定标记的所有伪类的想象,减去:悬停。

我想使用它作为一个选择,像这样:

.menu { 
    a.top-level:all, span { 
     color: @dormant-grey; 
    } 
    a.top-level:hover { 
     color: @off-black; 
    } 
} 

并为它生成:

.menu a.top-level, 
.menu a.top-level:link, 
.menu a.top-level:visited, 
.menu a.top-level:active, 
.menu a.top-level:focus, 
.menu span { 
    color: #686868; 
} 
.menu a.top-level:hover { 
    color: #22282a; 
} 

所以我希望我清楚地沟通的问题是什么。有没有办法重用选择

请注意,这不同于将样式传递到mixin中。将样式传递到混合中以实现相同的效果将需要重复样式。一次传入mixin,然后再次传入mixin无法处理的所有其他选择。它也是我现在正在做的事情,我发现它不值得使用mixin,因为我不得不重复自己很多次,以至于我只是想把它拉出来。

所以我希望很清楚。我在问是否有重复使用选择的方法,而不是风格。如果不能做到这一点,有没有一种语言可以?

+1

Sass和LESS不可互换。萨斯*可以*做到这一点:http://stackoverflow.com/questions/17369600/styling-a-specific-set-of-input-types-in-a-reusable-way-with-sass – cimmanon 2014-09-04 15:11:46

+0

SASS可以做到这一点,而LESS不能! – 2014-09-04 15:13:13

+1

只需要确认一下,[这个方法](http://codepen.io/hari_shanx/pen/bHpLd)和你说的已经试过的一样吗? – Harry 2014-09-04 15:57:05

回答

3

(所以不要离开这一个W/O的答案 - 复制我的上述评论):

.all(@-) { 
    &, 
    &:link, 
    &:visited, 
    &:active, 
    &:focus { 
     @-(); 
    } 
} 

.menu { 
    .span { 
     color: red; 
    } 
    a.top-level { 
     .all({.span}); 
     :hover { 
      color: blue; 
     } 
    } 
} 

这显然会产生重复的样式.spana.top-level家庭,但只要你关心,并生成一个精缩CSS版本--clean-css --clean-option=--advanced选项将消除爱的重复样式。

相关问题