Question

在SCSS中我可以这样做：然后

$selector-active: "&:hover, &:focus, &:active";
.class {
    color: red;
    #{$selector-active} {
        color: green;
    }
}

它的工作。我怎么能在LESS做到这一点？

Answer 1

嗯，有趣。目前LESS没有扩大其“＆amp;”在选择器插值中，即直接转换不起作用：

@selector-active: &:hover, &:focus, &:active;
.class {
    color: red;
    @{selector-active} {
        color: green;
    }
}

所以你需要一些更棘手的代码......例如使用回调/钩子技术：

.selector-active() {
    &:hover, &:focus, &:active {
        .selector-active-properties();
    }
}

.class {
    color: red;
    .selector-active();
    .selector-active-properties() {
        color: green;
    }
}

Answer 2

你可以缩短它：

.selector-active() {&:hover, &:focus, &:active {.-}}

.class {
    color: red;
    .selector-active;.-() {
        color: green;
    }
}

然而，当使用hackish名称作为hook / callback mixins时，要记住这一点很重要。如果在某些时候你需要使用相同技术的另一个mixin，那么你还需要另一个名字对于它的回调（不是你用于.selector-active（）的那个回调）。否则，如果您尝试在同一范围内使用两个“实用程序”，则会遇到问题。如果你在全局范围内定义一些.inside（）或.-（），那么它们将覆盖来自.class的那些，并且技巧会被破坏......

换句话说，从长远来看，使用“长/描述/唯一”钩子/回调名称只是“更安全”。

顺便说一下。 “悬停专业化”的语法也较短：

// same as .selector-active(@arg) when (@arg = hover):
.selector-active(hover) {
    &:hover {
        .inside();
    }
}

Answer 3

我喜欢@Max很好的解决方案。这给了我一个进一步发展的方法。所以我为自己做了一些文字。

.selector-active() {
    &:hover, &:focus, &:active {
        .inside();
    }
}
.selector-active(@type) when (@type = hover) {
    &:hover {
        .inside();
    }
}

使用中：

.class {
    color: red;
    .selector-active(); .inside() {
        color: red;
    }
}

我也尝试过上课。 LESS在这方面很不错，在1.4.1我必须使用：

.smthElse(@string) {
    &.class-@{string}-small,
    &.class-@{string}-big,
    &.class-@{string}-tall {
        .inside();
    }
}

1.3.1中的

我必须使用：

(~".myclass_@{index}") {...

@see http://lesscss.org/

足够紧凑，可以使用。所以我仍然可以与LESS合作:)是的。

P.S。：以上所有内容均为less.js v1.4.1

聚焦选择器在变量中。如何在SCSS中轻松完成这些工作

3 个答案: