1

SCSSで私はそうすることができます：そして

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

そしてその働き。LESSでこれを行うにはどうすればよいですか?

4

3 に答える 3

3

うーん、面白い。現在、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;
    }
}
于 2013-09-13T09:20:31.793 に答える
0

私は@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用です

于 2013-09-13T11:38:09.597 に答える