CODEWITHSUNDEEP
cssless
Elfy
Elfy

Reputation: 1863

Less CSS :extend() doesn't work when an extra selector is attached to parent selector

I was wondering why does this work

&:extend(.test all);

but

&.a_class:extend(.test all);

doesn't work?

Upvotes: 1

Views: 1166

Answers (2)

Harry
Harry

Reputation: 89750

There is a primary difference between the two extend modes that are given in the question and that is why one works while the other doesn't.

The first method (extending using parent selector (&)) is generally used by placing it within another selector block like:

.test{
  a:a
}   
#dummy{
  &:extend(.test all);
}

This is called as Extend inside Ruleset and this generally does not require the curly braces {} at the end of the line. In fact, for this aproach, an error would be thrown only when the braces are provided.

The second method is called as Extend attached to a selector because here a new selector is being created by attaching an extra class to the parent selector and for this approach the curly braces are required mandatorily at the end. Compilation error would be thrown otherwise.

Including the curly braces like in the below snippet would cause the code to compile properly:

.test{
  a:a
}

#dummy{
  &.a_class:extend(.test all){};
}

In my opinion, curly braces are required for the 2nd method and not the 1st because without braces, the 2nd one is generally not how we write the rules in CSS - where every selector must have a body ({}) to contain its rules. The first selector already has its body because the extend itself is placed within it.

Upvotes: 2

Adam Wolf
Adam Wolf

Reputation: 309

You can't use & followed by a class, because & represents the current selector parent.
You need to try 

.a_class {
    &:extend(.test all);
}

Upvotes: 1

Related Questions