重载嵌套，留在范围

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 &构造中的&点处替换的字符串。