從通過可變插值獲得的值中減去

這裏的就少了預覽網站的例子：http://goo.gl/GVHXUs

下面是我的代碼：

@breakpoint-sm: 600px; 
@breakpoint-md: 800px; 

.Mq(@breakpoint; @rules; @maxMin: min) { 
    & when (@maxMin = min) { 
     @query: ~"(min-width: @{[email protected]{breakpoint}})"; 
     @media screen and @query {@rules();}; 
    } 

    & when not (@maxMin = min) { 
     @break: ~"@{[email protected]{breakpoint}}" - 1; 
     @query: ~"(max-width: @{break})"; 
     @media screen and @query {@rules();}; 
    } 
} 

.test { 
    .Mq(sm; { 
     width: 100%; 
     height: 200px 
    }; max); 

    .Mq(md; { 
     width: 100%; 
     height: 200px 
    }); 
}

結果：

@media screen and (max-width: 600px - 1) { 
    .test { 
    width: 100%; 
    height: 200px; 
    } 
} 
@media screen and (min-width: 800px) { 
    .test { 
    width: 100%; 
    height: 200px; 
    } 
}

所以我想要實現的是，當min以外的東西傳遞給@maxMin它應該從斷點減去1。我想我現在會成爲Stackoverflow的笑柄，但是我不知道。

來源

2016-03-04 Walker

~"@{[email protected]{breakpoint}}"的輸出始終是一個字符串，因此編譯器只是將該數字附加到字符串，而不是執行數學運算。

一種方法是使用如下所示的臨時變量（只添加需要修改的部分），然後執行算術運算。

.Mq(@breakpoint; @rules; @maxMin: min) { 
    /* the rest of the mixin */ 

    & when not (@maxMin = min) { 
    @temp: ~"[email protected]{breakpoint}"; 
    @break: (@@temp - 1); /* the braces are mandatory, without which it again appends */ 
    @query: ~"(max-width: @{break})"; 
    @media screen and @query {@rules();}; 
    } 
} 

/* the selector blocks and mixin calls */

下面是我發現它已經離開我難倒了解決方案工作，而幾件事情。我試圖找到原因，並會在找到答案時更新答案。

大括號在@break變量中扮演着重要角色。沒有它，媒體查詢中的輸出仍然是串聯的。但是，如果在媒體查詢外部使用相同的變量（在像prop: @break這樣的常規屬性值對中，它會打印相減的值）。
以下代碼返回連接的值（800像素 - 1）
```
@break: ~"@{[email protected]{breakpoint}}" - 1; 
prop: @break;
```
而下面給出了一個「操作上無效類型」編譯錯誤。
```
@break: ~"@{[email protected]{breakpoint}}"; 
prop: @break - 1;
```
而我可以看到他們背後的原因（第一個結果字符串連接，而第二減法說不能在一個字符串值發生），我有點難倒，爲什麼行爲是不是兩者之間的一致性。

（你絕對不是一個笑柄。雖然我知道了問題的原因，花了時間讓我找到一個解決方案）

來源

2016-03-04 11:25:49 Harry

從通過可變插值獲得的值中減去

回答

相關問題