CSS'lookbehind'使用sass/less

Question

我目前使用sass來幫助構建我的CSS。下面給出一個簡單的例子。

.container { 
    .list { 
     .selected { 
      background-image : url('highlighted.png'); 
     } 
    } 
} 

不過我也使用Modernizr的（http://modernizr.com/docs/），並希望利用CSS3在可能的情況。在這個例子中，我想測試border-radius的可用性，並使用border-radius而不是背景圖片。因此我需要檢查html元素上是否存在borderradius類。是否有可能通過某種背後的方式來實現這一點？或者，我必須與.borderradius類再重複的代碼，最終的結果是以下幾點：

.container { 
    .list { 
     .selected { 
      background-image : url('highlighted.png'); 
     } 
    } 
} 

.borderradius .container { 
    .list { 
     .selected { 
      background : yellow; 
      border-radius : 10px; 
     } 
    } 
} 

對我來說這看起來雜亂無章，難以在大項目來維持。有沒有人有一個更優雅的方式來實現這一目標？

Answer 1

您可以使用符號（&）引用父選擇，就像這樣：

.container { 
    .list { 
     .selected { 
      background-image : url('highlighted.png'); 
      .borderradius & { 
       background : yellow; 
       border-radius : 10px; 
      } 
     } 
    } 
} 

這將編譯爲：

.container .list .selected { 
    background-image : url('highlighted.png'); 
} 

.borderradius .container .list .selected { 
    background : yellow; 
    border-radius : 10px; 
} 

退房this article，或this one進行了較爲深入的解釋這可能是多麼有用：

...你可以把plac e在選擇器聲明末尾添加一個尾符號（&）字符代替重複選擇器，然後坐下來欣賞Sass的迷人效果