有沒有辦法在LESS中編寫自定義選擇器？

我將舉一個我想要做的例子。有沒有辦法在LESS中編寫自定義選擇器？

:all() { 
    &, 
    &:link, 
    &:visited, 
    &:active, 
    &:focus 
}

上面是「定製選擇器」其本身返回選擇一個錨定標記的所有僞類的想象，減去：懸停。

我想使用它作爲一個選擇，像這樣：

.menu { 
    a.top-level:all, span { 
     color: @dormant-grey; 
    } 
    a.top-level:hover { 
     color: @off-black; 
    } 
}

併爲它生成：

.menu a.top-level, 
.menu a.top-level:link, 
.menu a.top-level:visited, 
.menu a.top-level:active, 
.menu a.top-level:focus, 
.menu span { 
    color: #686868; 
} 
.menu a.top-level:hover { 
    color: #22282a; 
}

所以我希望我清楚地溝通的問題是什麼。有沒有辦法重用選擇？

請注意，這不同於將樣式傳遞到mixin中。將樣式傳遞到混合中以實現相同的效果將需要重複樣式。一次傳入mixin，然後再次傳入mixin無法處理的所有其他選擇。它也是我現在正在做的事情，我發現它不值得使用mixin，因爲我不得不重複自己很多次，以至於我只是想把它拉出來。

所以我希望很清楚。我在問是否有重複使用選擇的方法，而不是風格。如果不能做到這一點，有沒有一種語言可以？

來源

2014-09-04 Andrew Hoffman

Sass和LESS不可互換。薩斯*可以*做到這一點：http://stackoverflow.com/questions/17369600/styling-a-specific-set-of-input-types-in-a-reusable-way-with-sass – cimmanon 2014-09-04 15:11:46

SASS可以做到這一點，而LESS不能！ – 2014-09-04 15:13:13

只需要確認一下，[這個方法]（http://codepen.io/hari_shanx/pen/bHpLd）和你說的已經試過的一樣嗎？ – Harry 2014-09-04 15:57:05

（所以不要離開這一個W/O的答案 - 複製我的上述評論）：

.all(@-) { 
    &, 
    &:link, 
    &:visited, 
    &:active, 
    &:focus { 
     @-(); 
    } 
} 

.menu { 
    .span { 
     color: red; 
    } 
    a.top-level { 
     .all({.span}); 
     :hover { 
      color: blue; 
     } 
    } 
}

這顯然會產生重複的樣式.span和a.top-level家庭，但只要你關心，並生成一個精縮CSS版本--clean-css --clean-option=--advanced選項將消除愛的重複樣式。

來源

2014-09-05 08:04:51

有沒有辦法在LESS中編寫自定義選擇器？

回答

相關問題