LESS: Daha önceden tanımlanmış iç içe geçmiş bir seçiciyi genişletin

Question

Aşağıdaki LESS ifadesini işe almak için deli bir adam gibi deniyorum, ama şimdi bunun olmayacağından korkuyorum:/Yani şimdi size dönüyorum. yardım için son!

aşağıdaki ifadeyi vardır:

.top{ 
    &-first{ 
     background:black; 
     &-item{ 
      color:white; 
     } 
    } 
    &-second{ 
     background:green; 
     &-item:extend(.top-first-item){} 
    } 
} 

aşağıdaki çıktıyı başarmak için umuyordum

:

.top-first { 
    background: black; 
} 
.top-first-item, 
.top-second-item{ 
    color: white; 
} 
.top-second { 
    background: green; 
} 

Ama ne yazık ki bu derleme değil ama bu yerine:

.top-first { 
    background: black; 
} 
.top-first-item{ 
    color: white; 
} 
.top-second { 
    background: green; 
} 

Answer 1

LESS şu anda desteklemiyor t "birleştirilmiş isim" selektörlerini genişletme (temel olarak, .top &-first &-item üç farklı seçici eleman olarak yorumlanır ve hiçbir zaman tek bir seçici aramaksızın extend tarafından bulunur).

size bu durumun bir geçici çözüm:

.top { 
    &-first { 
     background: black; 
    } 

    &-second { 
     background: green; 
    } 

    &-first, &-second { 
     &-item { 
      color: white; 
     } 
    } 
} 

Answer 2

Diğer bir seçenek ayrı sınıfa belirtme kırmaktır:

.top{ 
    &.first{ 
     background:black; 
     &.item{ 
      color:white; 
     } 
    } 
    &.second{ 
     background:green; 
     &.item:extend(.top.first.item){} 
    } 
} 

CSS Çıktı

AZ elbette html tanımlaması class="top first item" için class="top-first-item" den bir değişiklik gerektirir

.top.first { 
    background: black; 
} 
.top.first.item, 
.top.second.item { 
    color: white; 
} 
.top.second { 
    background: green; 
} 

.

Answer 3

Bu açıkça LESS'de çalışması gereken bir şey. Birkaç ay önce, tam olarak bu konuda LESS.js github ile ilgili bir sorunum var. Bu arada

Link to Github issue

i basitçe şöyle bir araya sınıfları koyarak yedi evrelerini-Max'in çözüm kullanılmasını öneriyoruz:

&-first, &-second {} 

Ama sonra sen cant soyut saniye dışarı başka bir dosyaya .

Başka bir çözüm, zamanınızı kullanarak zamanınızı bulduğunuz küçük parçacıklara sahip olabileceğiniz bir "extends.less" dosyasını hazırlar.

Answer 4

Sadece 'all' sonekini kullanın. Örnek: &: genişletin (.top-birinci-öğe hepsi);