css - 变量中的焦点选择器。如何像在 SCSS 中那样在 LESS 中做这些事情

Question

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

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

及其工作。我怎么能在LESS中做到这一点？

Answer 1

嗯，有趣。目前 LESS 不会在选择器插值中扩展其“&”，即直接转换不起作用：

@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 名称作为钩子/回调混入时，需要记住重要的事情。如果在某些时候您需要另一个具有相同技术的 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 :) 是的。

PS：以上都是针对less.js v1.4.1