在变量中聚焦选择器。如何做的东西在LESS像SCSS

本文介绍了在变量中聚焦选择器。如何做的东西在LESS像SCSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

In SCSS i can do so:and then

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

我如何在LESS中做到这一点？

And its working.How can i do this in LESS?

推荐答案

目前LESS不扩展其&在选择器插值中，即直接转换不工作：

Hmm, interesting. Currently LESS does not expand its "&" within a selector interpolation, i.e. the straight-forward conversion DOES NOT work:

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

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

So you'll need some more tricky code... Using a callback/hook technique for example:

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

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

这篇关于在变量中聚焦选择器。如何做的东西在LESS像SCSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Active