CODEWITHSUNDEEP
less
Yuji 'Tomita' Tomita
Yuji 'Tomita' Tomita

Reputation: 118528

How to use an & (AND selector) via a LESS function?

Here's what the output needs to be:

div.star_mask {
    &.fill-0 {
        width: 0%;
    }
    &.fill-50 {
        width: 50%;
    }
}

I'm doing this many times, so I made a function to generate it:

#star {
    .star-fill(@width) {
        (~"&.fill-@{width}") {
            div { width: ~"@{width}%" }
        }
    }
}

div.star_mask {
    #star > .star-fill(0)
}

This generates the following CSS:

div.star_mask &.fill-0 instead of what I need: div.star_mask.fill-0

So is there a way to do this? Can I put the & where the function is called?

I ended up fixing the problem by coding the selector myself: div.star_mask.fill-@{width} and placing the function calls one level above. It would still be very cool to nest them though!

Upvotes: 0

Views: 107

Answers (1)

Luke Page
Luke Page

Reputation: 8186

when less comes across (~"") as a selector it does not parse the contents but accepts it verbatim, so you cannot use & in it.

I don't think there is a way to do exactly what you want at the moment, though remember you can use & at the end of a selector, e.g.

.a {
  div& {
    foo:bar;
  }
}

becomes

div.a {
  foo: bar;
}

not sure that helps though.

Upvotes: 1

Related Questions