擺脫範圍

Question

理想情況下，我想這樣做：

@w: 4px; 

@media (max-width:900px) { 
    @r: 3px; 
} 
@media (min-width:900px) { 
    @r: 5px; 
} 

.myclass { 
    border-radius: @w + @r; 
} 

這並不編譯，因爲@r沒有在我定義.myclass的範圍限定。明顯的解決方案是在@media區塊內定義.myclass或在.myclass的定義內複製@media查詢。

但是，只要您在許多課程中使用@r，兩種解決方案都很麻煩並且涉及許多重複。

有乾淨的乾燥解決方案嗎？

Answer 1

只需使用一個mixin，根據mediaquery計算屬性值。沒有必要通過導入來做到這一點。

LESS：

@w: 4px; 
.bordermixin(@w,@r) { 
    .myclass{ 
    border-radius: @w + @r; 
    } 
} 
@media (max-width:900px) { 
    .bordermixin(@w,3px); 
} 
@media (min-width:900px) { 
    .bordermixin(@w,5px); 
} 

CSS：

@media (max-width: 900px) { 
    .myclass{ 
    border-radius: 7px; 
    } 
} 
@media (min-width: 900px) { 
    .myclass{ 
    border-radius: 9px; 
    } 
} 

Answer 2

我找到了一個解決方案，基於@import，這讓我保持乾燥。

我做兩個文件：

classes.less

@w: 4px; 

.myclass { 
    border-radius: @w + @r; 
} 

mediawidth.less

@media (max-width:900px) { 
    @r: 3px; 
    @import "classes.less"; 
} 
@media (min-width:900px) { 
    @r: 5px; 
    @import "classes.less"; 
} 

生成CSS：

@media (max-width: 900px) { 
    .myclass { 
    border-radius: 7px; 
    } 
} 
@media (min-width: 900px) { 
    .myclass { 
    border-radius: 9px; 
    } 
} 

這種方式我不必重複許多類的定義，只能導入。

---

我接受了馬丁的答案，在最常見的情況下，當只有少數變量可以通過時，我的答案更爲清晰。只要你有更多的變量，並且你的類在許多文件中被定義，我的解決方案可能會變得乾燥和清潔。