雙連字符LESS

Question

我對LESS編譯器中的雙符號行爲感到困惑。

看：

.heading { 
    &&--type-small { 
     font-size: 15px; 
    } 
} 

將被編譯到：

.heading.heading--type-small { 
     font-size: 15px; 
} 

並且那好。

但是。

.wrapper { 
    .heading { 
     &&--type-small { 
      font-size: 15px; 
     } 
    } 
} 

會產生：

.wrapper .heading.wrapper .heading--type-small { 
    font-size: 15px; 
} 

它看起來很奇怪。沒有？

有沒有什麼建議，使這個代碼的工作，如：

.wrapper .heading.heading--type-small { 
    font-size: 15px; 
} 

感謝=）

Answer 1

什麼，當你在一個嵌套規則中使用的符號的情況是，默認的嵌套結構得到的忽略輸出選擇器，and符號作爲作爲外部選擇器的完整列表的佔位符，並且只會將所有父規則一直插入層次結構的頂部（上面所有嵌套級別的「路徑」）...否解決方法。

因此，在使用的第一個 - &將剛剛加入（串連）嵌套選擇器外選擇（表現爲如果它只是將其添加到父選擇器），並作爲一個組合子的整個列表 - 看到"Nested rules"在lescss .ORG。但是當你使用第二個符號時 - 你的選擇器將最終再次包括所有外部規則 - .wrapper以及其間的所有規則現在將被添加兩次。所以，這種行爲並不奇怪。另請參閱我對此問題的回答：「How to refer to two previous elements/tags/classes with LESS？」以及&的一些更多功能，另請參閱下面的七個階段 - 最多的評論。或者在lescss.org上找到&作爲"Advanced Usage of &"下的「路徑」佔位符的示例。

和你具體的例子：

我不完全知道爲什麼要重複在類名.header--type-small字「頭」，如果你是在另外一個叫.header類使用它。 ..我只想用其他類如.type-small，就像這樣：

.wrapper { 
    //style for the wrapper 
    .heading{ 
     //general style for the heading 
     &.type-small { 
      //style for the heading with class .type-small 
      font-size: 15px; 
     } 
     &.type-large { 
      //style for the heading with class .type-large ... and so on 
     } 
    } 
} 

與輸出CSS：

.wrapper .heading.type-small { 
    font-size: 15px; 
} 

但如果你真的真的需要整個長字符串用某種特定原因的反覆名字......你可能只是做這樣的事情：

.wrapper { 
    //style for the wrapper 
    .heading { 
     //general style for the heading 
     &.heading--type{ 
      &-small { 
       //style for the heading with class .type-small 
       font-size: 15px; 
      } 
     } 
    } 
} 

與輸出CSS：

.wrapper .heading.heading--type-small { 
    font-size: 15px; 
}