CODEWITHSUNDEEP
cssless
Run
Run

Reputation: 57176

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?

Upvotes: 0

Views: 896

Answers (1)

hungerstar
hungerstar

Reputation: 21685

.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.

Upvotes: 3

Related Questions