@extend can't extend grouped classes

Hello, I’m migrating from Ruby Sass 3.7.3 to “1.23.7 compiled with dart2js 2.6.1” installed with yarn add sass because of deprecation of ruby sass. In the old sass compiler. you could simply compile @extend .a.b without problems but with a warning. I don’t understand I can’t extend group selectors. The compiler suggests me to extend .a and .b separately. Look at the difference between the 2 cases:

@extend a.b; //this is an intersection in terms of mathematics sets. (A ∩ B).

@extend .a, .b; //this is an union, A ∪ B, 
//the worst part of this is that i have to extend the whole .a and .b
//just to use .a.b intersection

Okay, the documentation says it’s confusing: “The subtle differences aren’t worth the confusion of looking like it’s doing something substantially different, so this isn’t allowed either.”

What about creating a flag in cli to ignore this and let me use the grouped selectors? Or this or I will have to rewrite all the code I wrote with a.b use cases that were allowed before that behavior. Thank you!

Reference: https://en.wikipedia.org/wiki/Set_(mathematics)

PS.: The Ruby Sass compiler is a great compiler, I would stick with it for life if it never got deprecated. The reason I updated is because I can import .css files in my .scss files directly with this new sass compiler. In the ruby sass compiler I can’t.

[Awjin]

That is a misunderstanding of @extend.

.foo {@extend .bar} means “style all elements that match the selector .foo as though they also match .bar”. (See the docs and previously mentioned thread for more detail.) It does not mean “extend the set of styles defined in .bar {}”.

.foo {@extend .a.b} translates to "style all .foo elements as though they are .a.b elements. Therefore .foo is styled by the union of styles .a {} and .b {}.

[lwxbr]

@Awjin, consider the style:

.a{
  background: blue;
}

.b{
  color: red;
}

.a.b{
  border: 1px solid #000;
}

.new-component{

  @extend .a, .b;
}

Using the current logic, the result simplified would be:

.new-component{
  background: blue;
  color: red;
  border: 1px solid #000;
}

What I expect is this:

.a{
  background: blue;
}

.b{
  color: red;
}

.a.b{
  border: 1px solid #000;
}

.new-component{
  @extend .a.b;
}

Resulting in:

.new-component{
   border: 1px solid #000;
}

Did you see the difference? This is what I’m trying to explain. I understood that .a and .b they are two independent selectors, but .a.b only works when they are used together. This is it.

So, @extend .a, .b should accomplish most of what @extend a.b did, but with (as the docs put it) less confusing syntax.

Of course it does, the union is a superset of the intersection:

A = {1, 2} B = {2, 3}

C = A U B => {1, 2, 3} D = A ∩ B => {2}

Then: C ⊃ D