是否可以在 LESS 变量中引用父选择器?
Is it possible to reference a parent selector in a LESS variable?
我正在尝试使用 & 符号将父选择器带入包含伪class 选择器的变量:
.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 根本不处理变量的内容,所以这个问题可能归结为是否有办法改变它。
采用上面评论中链接的示例之一,这是(迄今为止)最干净的解决方案:
// usage:
.my-selector,
.my-other-selector {
.pseudo-states({
/* rules */
});
}
// impl.:
.pseudo-states(@-) {
&:hover, &:focus, &:active, &.active {@-();}
}
我正在尝试使用 & 符号将父选择器带入包含伪class 选择器的变量:
.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 根本不处理变量的内容,所以这个问题可能归结为是否有办法改变它。
采用上面评论中链接的示例之一,这是(迄今为止)最干净的解决方案:
// usage:
.my-selector,
.my-other-selector {
.pseudo-states({
/* rules */
});
}
// impl.:
.pseudo-states(@-) {
&:hover, &:focus, &:active, &.active {@-();}
}