LESS：減去變量

Question

使用LESS，如何在變量末尾用「px」減去值。我有以下變量：

@bpMobile: 600px 

我想要做的是減去該1px的

@media only screen and (max-width: @bpMobile - 1px) { 
} 

我怎樣才能用更少實現這一目標？

Answer 1

您可以隨時使用此calc function。

語法： calc(expression)

如：

abc { 
    width:calc(100%-20px) 
} 

Here都支持此功能的瀏覽器的列表

編輯1：

您可以在使用它以下兩種方式：

LESS輸入：

@bpMobile: 600px; 
max-width: calc(~'@{bpMobile} - 1px'); 

CSS輸出：

max-width: calc(600px - 1px); 

第二方式： 更少的輸入：

@bpMobile: 600px; 
max-width: calc(@bpMobile - 1px); 

CSS輸出：

max-width: calc(599px); 

有了第一個選項，calc參數會被轉義，以防止它們在編譯時被評估。在客戶端評估之前，這些值將保持完全靜態。

第二種選擇是在編譯時計算calc值。這將是一樣

max-width: @bpMobile - 1px; 

這將導致

max-width: 599px; 

Answer 2

的問題是不是數學函數，它是你想在媒體查詢使用它。 The docs說，你需要讓整個查詢一個變量：

@bpMobile: 600px; 
@bpMobile1: @bpMobile - 1px; 

@singleQuery: ~"only screen and (max-width: @{bpMobile1})"; 

@media @singleQuery { 
} 

Answer 3

從freejosh的修復不適合我的lesscss 1.7.0工作。

什麼訣竅是簡單地增加paranthesis周圍的每一個變量或計算媒體查詢裏面：

@media only screen and (max-width: (@bpMobile - 1px)) { ... } 

或

@other: @bpMobile - 1px; 
@media only screen and (max-width: (@other)) { ... } 

Answer 4

對不起，我回答這麼晚，但我有這個非常問題看起來LESS對於間距是挑剔的。您的計算還需要()。

這是行不通的：

@media screen and (max-width: (@widthSmall-2)) { } 

然而，這將（注意變量和數字之間的空間）：

@media screen and (max-width: (@widthSmall - 2)) { }