使用較少，我可以使用@media部分中的當前值嗎？

Question

我有以下更少的代碼：

@appbar-padding: 10px; 

.container { 
    padding-bottom: @appbar-padding + 10; 
} 

@media (min-width: 750px) { 
    .container { 
     padding-bottom: @appbar-padding + 20; 
    } 
} 

是否有可能採取padding-bottom的電流值在@media一部分？所以，我可以這樣做：

@media (min-width: 750px) { 
    .container { 
     padding-bottom: @this + 10; 
    } 
} 

這樣一來，如果我改變了「正常」 .container規則，比方說，@appbar-padding + 20，對於屏幕比750px寬的意志更大的規則，實際上，有@appbar-padding + 30代替+ 20 。

Answer 1

正如Harry所建議的，你必須通過一箇中間變量。的代碼示例可以是：

@appbar-padding: 10px; 

@default-padding:@appbar-padding + 10; 

.container { 
    padding-bottom: @default-padding; 
} 

@media (min-width: 750px) { 
    .container { 
     padding-bottom: @default-padding + 20; 
    } 
} 

的想法是預先定義「默認」（你叫什麼「正常」）的填充值，是計算了@appbar-padding開始，然後將其應用到.container 。

在媒體查詢中，此「默認值」值是您再次更改的值。這樣，你可以模擬你想要的行爲。

注意：您必須聲明，因爲scope@default-padding:@appbar-padding + 10;外.container類定義。