Mixin относятся к 2 одинаковым определениям классов по-разному

Question

Я начну с простого примера:

.classA {
  color: red;
  .otherClass {
       color: yellow;
  }
}
.classB {
  .classA;
}

результаты в:

.classA {
  color: red;
}
.classA .otherClass {
  color: yellow;
}
.classB {
  color: red;
}
.classB .otherClass {
  color: yellow;
}

Но:

.classA {
  color: red;
}
.class A .otherClass {
  color: yellow;
}
.classB {
  .classA;
}

результаты в:

.classA {
  color: red;
}
.class A .otherClass {
  color: yellow;
}
.classB {
  color: red;
}

Я не могу понять, почему компилятор не включает .otherClass в .classB, Я имею в виду оба classA определения равны, не так ли?

Есть ли простое объяснение странного поведения? Особенно, есть ли способ включить .otherClass через миксин или я должен скопировать код?

Answer 1

Я имею в виду, что оба определения classA равны, не так ли?

Нет, они действительно создают равные CSS-селекторы / наборы правил, но их определение Less - это то, что именно отличается (на самом деле это одно определение набора правил Less в первом фрагменте и два независимых определения набора правил во втором).

Другими словами: средство Mixins не работает с селекторами в стиле HTML (да, это может сначала удивить). Миксины работают с наборами правил и их областью действия, поэтому правило расширения миксинов так же просто, как:

.foo будет соответствовать .foo только набор правил (и развернуть весь код, определенный внутри этого .foo только)

таким образом, любой отдельно определенный .foo .bar и т.д. наборы правил никогда не связаны с .foo звонки. (И да, на самом деле никогда не имеет значения, какие селекторы CSS в конечном итоге получаются. Единственное исключение из этого namespaces, но это еще одна большая история, с которой я не хочу вас смущать).

Для вашего конкретного примера я бы сказал, что extend подойдет лучше.