以更少的工作：避免樹繼承

Question

當我想要寫的東西像

.security-list ul { 
    list-style: none; 
    margin-left: 0; 
} 
.security-list ul li { 
    padding: 10px 9px; 
    display: inline-block; 
} 
.security-list ul li a { 
    width: 234px; 
    color: #000; 
    text-decoration: none; 
    display: inline-block; 
    background-image: url(http://domain.com/infopage-icons.png); 
    background-position: 200px 0; 
    background-repeat: no-repeat; 
} 
.security-list ul li a.basket, 
.security-content h3.basket { 
    background-position: 200px 0; 
} 

.security-list ul li a.creditcard, 
.security-content h3.creditcard { 
    background-position: 200px -205px; 
} 

我最終書面方式：

.security-list ul { 
    list-style: none; 
    margin-left: 0; 

    li { 
     padding: 10px 9px; 
     display: inline-block; 

     a { 
      width: 234px; 
      color: #000; 
      text-decoration: none; 
      display: inline-block; 
      background-image: url(http://domain.com/infopage-icons.png); 
      background-position: 200px 0; 
      background-repeat: no-repeat; 

      &.basket, 
      .security-content h3.basket { 
       background-position: 200px 0; 
      } 

      &.creditcard, 
      .security-content h3.creditcard { 
       background-position: 200px -205px; 
      } 
     } 
    } 

，但我的問題是，這將編譯最後2塊作爲

.security-list ul li a.basket, 
.security-list ul li a .security-content h3.basket { ... } 

.security-list ul li a.creditcard, 
.security-list ul li a .security-content h3.creditcard { ... } 

其中我真正想要的是：

.security-list ul li a.basket, 
.security-content h3.basket{ ... } 

.security-list ul li a.creditcard, 
.security-content h3.creditcard { ... } 

我能做些什麼在LESS，他知道我不想繼承孔樹，但仍然沒有重複自己在同一個樣式規則，換句話說，不創造2規則與相同的內容...

Answer 1

你的問題是，你想忽略巢內巢，這是不（至少目前）的可能。如果它確實起作用，那麼它也會使具有挑戰性的代碼讀取，因爲您不希望在嵌套內定義非嵌套項目。

我認爲一個優雅的解決方案，特別是在你的情況下，是進一步抽象巢。此代碼由.security巢內查找這一切得到接近你的願望：

.security { 
    &-list ul { 
     list-style: none; 
     margin-left: 0; 

     li { 
      padding: 10px 9px; 
      display: inline-block; 

      a { 
       width: 234px; 
       color: #000; 
       text-decoration: none; 
       display: inline-block; 
       background-image: url(http://domain.com/infopage-icons.png); 
       background-position: 200px 0; 
       background-repeat: no-repeat; 
      } 
     } 
    } 

    &-list ul li a, 
    &-content h3 { 
     &.basket { 
       background-position: 200px 0; 
     } 
     &.creditcard { 
       background-position: 200px -205px; 
     } 
    } 
} 

以上disaccociates從該列表中的深嵌套，這確實需要一個很小的代碼重複在ul li a呼叫通話，但它會產生這樣的CSS：

.security-list ul { 
    list-style: none; 
    margin-left: 0; 
} 
.security-list ul li { 
    padding: 10px 9px; 
    display: inline-block; 
} 
.security-list ul li a { 
    width: 234px; 
    color: #000; 
    text-decoration: none; 
    display: inline-block; 
    background-image: url(http://domain.com/infopage-icons.png); 
    background-position: 200px 0; 
    background-repeat: no-repeat; 
} 
.security-list ul li a.basket, 
.security-content h3.basket { 
    background-position: 200px 0; 
} 
.security-list ul li a.creditcard, 
.security-content h3.creditcard { 
    background-position: 200px -205px; 
} 

假設.security-list類只保存一個真實的目錄（如ul）的容器上使用，那麼如果你能夠從直security-list ul li a選擇刪除background-position，你然後可以減少.basket和.creditcard的選擇器通過移除ul li的那個區域以使其僅爲.security-list a.basket等等。這將減少在該調用上的選擇器嵌套膨脹。