在mixin中發生意外的SASS媒體查詢編譯

我目前正在研究Vaadin項目的一些前端代碼。我試圖獲得一些響應式的風格和運行。不幸的是，Vaadin構建的響應式附加組件does not have support for IE11。在mixin中發生意外的SASS媒體查詢編譯

所以我想用媒體查詢來做響應式設計。我有兩個SASS文件：commontheme.scss是所有常用樣式，mymixin.scss包含所有桌面特定樣式。

因此，這裏是我的代碼：

@import "../commontheme/commontheme.scss"; //the common them. The common theme 

@mixin mymixin 
{ 
    @include commontheme; //Including the stuff from the common theme. 

    $small-size: 100px; 
    $med-size: 200px; 

    @media (max-width:500px) 
    { 
     .my-image 
     { 
      width: $small-size; 
     } 
    } 

    @media (min-width:501px) 
    { 
     .my-image 
     { 
      width: $med-size; 
     } 
    } 
}

這編譯以下CSS：

.mymixin 
{ 
    @media (max-width:500px) 
    { 
     .my-image 
     { 
      width: 100px; 
     } 
    } 

    @media (min-width:501px) 
    { 
     .my-image 
     { 
      width: 200px; 
     } 
    } 
}

而我需要的是下面的代碼，如果我還活着編輯出有問題的，工作正常已編譯CSS中塊的開始和結束處的行。

@media (max-width:500px) 
{ 
    .my-image 
    { 
     width: 100px; 
    } 
} 

@media (min-width:501px) 
{ 
    .my-image 
    { 
     width: 200px; 
    } 
}

我是這個整個開發堆棧的新手。所以我假設我在某個地方做錯了什麼，但我沒有任何運氣修復它。如果任何人在這裏可以提供一些見解或方向進行調查，我將不勝感激。

僅供參考，我使用的Vaadin 7.2.3應包含完整的SASS支持。

來源

2014-10-18 leonvn

您的Sass沒有問題（請參閱：http://sassmeister.com/gist/fa94eb844ee63e2c3a7b）。將來，請確保您的代碼可以按原樣編譯（未定義的mixins，不可用的導入等）。 – cimmanon 2014-10-18 13:49:11

響應式插件實際上可以在IE11中像魅力一樣工作。使用它，因爲我認爲普通的CSS媒體查詢不是你想要的。使用CSS時，例如，您不能聲明斷點。您響應式組件的父組件變得太小/很寬。 – agassner 2014-10-21 22:27:30

你只需要把@media標記出來mymixin這樣的：

$myVar: 100px; 
@mixin mymixin 
{ 
    @include commontheme; //Including the stuff from the common theme. 
    .my-image 
    { 
     width: $myVar; 
    } 
} 

$myVar: 50px; 
@media (max-width:500px) 
{ 
    .mymixin 
    { 
     .my-image 
     { 
      width: $myVar; 
     } 
    } 
}

你可能會添加@media單獨.scss文件混入並將其包含在主myTheme.scss，但文件結構concpet是不是這個問題的一部分。

來源

2014-10-18 17:29:44 Zigac

在mixin中發生意外的SASS媒體查詢編譯

回答

相關問題