teelou teelou - 1 month ago 13
Less Question

Less multiple classes and pseudo classes with the same style?

How can I simplify the css below in LESS code?

.push-nav > .active > a,
.push-nav > .active > a:hover,
.push-nav > .active > a:focus {
background:#000;
color: #fff;
}


My attempt:

.push-nav > .active > a {
&:focus,
&:hover {
background:#000;
color: #fff;
}
}


Result:

.push-nav > .active > a:focus,
.push-nav > .active > a:hover {
background: #000;
color: #fff;
}


.push-nav > .active > a
is missing.

Any ideas?

Answer

.push-nav > .active > a is missing because you haven't included it.

The ampersand & represents the current selector.

Add:

.push-nav > .active > a {
    &,
    &:focus,
    &:hover {
        background: #00;
        color: #fff;
    }
}

In your code & = .push-nav > .active > a. So &:focus = .push-nav > .active > a:focus.

Comments