CSS 3 medya sorgusu içinde SASS mantığı nasıl kullanılır?

Question

Pusula çerçevesi ve plan/kılavuz bağımlılığı aracılığıyla saa kullanıyorum.

// /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; 

Bu /stylesheets/screen.css te derler: Öyle gibi bir medya sorgu içeren bir sütunun genişliğini ayarlamak mümkün istiyorum

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

Ama değerler screen.css geri kalanı buna göre ayarlanmamıştır. Tahmin ediyorum ki, blueprint-grid-width değişkeni derleme zamanında okunduğundan, zamandan değil.

Ekran çözünürlüğünü almak için medya sorgusu kullanarak farklı ızgara genişliklerine sahip bir düzen çıktı almanın bir yolu var mı?

İlgili github sorunu: Ben de aynı şeyi anlamaya çalışıyorum ama istediğiniz şekilde çalıştığından bu almak için iyi bir yol olarak görünmüyor
https://github.com/chriseppstein/compass/issues/302

Answer 1

Bu, SASS'ta bir hataydı. Bu sürümü 3.1.0 olarak düzeltildi ediyor:

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

Answer 2

. Dediğin gibi, değişkenler derleme zamanında ayarlanıyor, çalışma zamanı değil, bu yüzden zor.

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

Ama sonra çalıştırmak istediğiniz her medya sorgu için Blueprint sıfırlanması aynı, kaba kuvvet tür yapmak olurdu: Ben böyle bir şey yapabileceğini düşünüyorum.