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

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

.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 через примеси или мне нужно скопировать код?


less less-mixins
person devwithenth    schedule 07.08.2015    source источник
comment
Я не менее эксперт, но то, что я вижу здесь, именно то, что я ожидал. В первом случае .classB ссылается на селектор .classA, в котором он имеет .otherClass, поэтому он будет расширен для класса B. И во втором случае он ссылается на селектор класса .classA, у которого нет . otherClass IN IT (.classA .otherClass — другой селектор), поэтому он не расширяется.   -  person Kukeltje    schedule 07.08.2015

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

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

person seven-phases-max    schedule 07.08.2015
comment
И для такого кода это замечание обычно полезен (так что вы не будете слишком часто использовать такой код с самых первых шагов). - person seven-phases-max; 07.08.2015