是否可以在LESS变量中引用父选择器?

时间:2015-03-06 20:26:40

标签: css less

我正在尝试使用&符号将父选择器带入包含伪类选择器的变量中:

.my-selector,
.my-other-selector {
  @{pseudo-states} {
    // rules
  }
}

以下尝试都生成了生成的css中的文字变量内容:

@pseudo-states: &:hover, &:focus, &:active, &.active;
@pseudo-states: ~"&:hover, &:focus, &:active, &.active";
@pseudo-states: ~"\&:hover, \&:focus, \&:active, \&.active;

有任何方法可以达到这个目的吗?

似乎LESS根本不处理变量的内容,所以这个问题可能归结为是否有办法改变它。

1 个答案:

答案 0 :(得分:4)

采用上面评论中链接的一个示例,这是迄今为止最清晰的解决方案:

// usage:

.my-selector,
.my-other-selector {
    .pseudo-states({
        /* rules */
    });
}

// impl.:

.pseudo-states(@-) {
    &:hover, &:focus, &:active, &.active {@-();}
}