重載嵌套，留在範圍

Question

我在想，如果我能覆蓋LESS嵌套，留在我的範圍 - 只是因爲它更簡單... :-)

如果我有兩個元素根據我們說的body -class，我需要定義兩個CSS對象。我想每個模塊只有一個。

.module { 
    h1 { 
     float: left; 
    } 
} 

body.secondary { 
    .module { 
     h1 { 
      float: right; 
     } 
    } 
} 

當你定義父與&一樣，有沒有辦法覆蓋該父？因此，也許它可能是這樣的：

.module { 
    h1 { 
     float: left; 
    } 

    &=body.secondary { 
     h1 { 
      float: right; 
     } 
    } 
} 

凡&被定義爲另一選擇...

這可能是真棒，使我的CSS在每個模塊一個CSS對象方面更加簡單。

謝謝... :-)

Answer 1

我都在this answer和this answer做了一些廣泛的評論這一點。你的具體情況，這將是這樣的：

LESS

.module { 
    h1 { 
     float: left; 
     body.secondary & { 
      float: right; 
     } 
    } 
} 

CSS輸出

.module h1 { 
    float: left; 
} 
body.secondary .module h1 { 
    float: right; 
} 

的關鍵是要認識到&不只是瞄準「父母「本身在html結構中，而是它所在的整個嵌套結構的字符串替換。因此，在我上面的解決方案中，嵌套的LESS「父級」是.module h1，它是嵌套在body.secondary &構造中的&點處替換的字符串。