如何在CSS 3媒體查詢中使用SASS邏輯

我正在通過指南針框架和藍圖/網格依賴關係使用saas。我希望能夠通過媒體查詢來設置列的寬度，像這樣：如何在CSS 3媒體查詢中使用SASS邏輯

// /src/partials/_base.scss 
$blueprint-grid-columns: 18; 

@media screen and (max-width: 1024px){ 
    // If screen res is 1024 or lower, then set grid width to 46px 
    $blueprint-grid-width: 46px; 
} 
@media screen and (max-width: 1280px){ 
    $blueprint-grid-width: 50px; 
} 
@media screen and (max-width: 1600px){ 
    $blueprint-grid-width: 76px; 
} 

$blueprint-grid-margin: 8px;

這編譯爲在/stylesheets/screen.css：

@media screen and (max-width: 1024px) {} 
@media screen and (max-width: 1280px) {} 
@media screen and (max-width: 1600px) {}

但在價值觀screen.css的其餘部分沒有相應設置。我猜這是有道理的，因爲$ blueprint-grid-width變量是在編譯時讀取的，而不是運行時。

有沒有辦法通過使用媒體查詢獲得屏幕分辨率來輸出具有不同網格寬度的佈局？

相關github上的問題：
https://github.com/chriseppstein/compass/issues/302

來源

2011-03-14 Adam

到目前爲止，我能想到的唯一的解決辦法是編譯3個獨立的樣式表：它被固定爲3.1.0版本。然後將輸出的CSS複製並粘貼到媒體查詢中的樣式表中。雖然這很糟糕。 – Adam 2011-03-16 21:58:55

如果我對ruby更熟練，我會定製編譯器將三個樣式表放在一起。 – Adam 2011-03-16 21:59:39

這是SASS中的一個錯誤。每個屏幕的分辨率1 -

http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#310

來源

2011-05-05 17:56:28 Adam

我試圖自己做這件事，但仍然無法確定它出。您能否指出更改日誌的哪個部分明確指向此修復？謝謝！ – sguha 2012-04-24 23:01:38

看看它在說什麼：@import現在可以在CSS或媒體規則中使用。導入的文件將被視爲嵌套在規則中。帶有mixin的文件不能在嵌套的上下文中導入。以下是我現在如何做的鏈接：http://jsfiddle.net/9bdRp/ – Adam 2012-04-26 17:45:40

我試圖找出同樣的事情，但似乎不是一個很好的方式來得到這個工作，我希望它的方式。就像你說的，變量在編譯時設置，而不是運行時，所以很難確定。我想你可以做這樣的事情：

@media screen and (max-width: 1024px) { 
    $blueprint-grid-width: 46px; 
    @import 'blueprint'; 
    // do everything else you need to with this size 
}

但你不得不這樣做同樣的，蠻力樣的藍圖重置您想要運行的每個媒體查詢。

來源

2011-03-16 21:23:12

當我嘗試獲取錯誤時：錯誤src/screen.scss（第3行：導入指令只能在文檔的根目錄中使用）。 – Adam 2011-03-16 21:57:26

如何在CSS 3媒體查詢中使用SASS邏輯

回答

相關問題