是否可以在媒體查詢中使用Foundation語義網格混搭？

我用基礎框架（http://foundation.zurb.com/）製作了一個小例子網格。網格是做出來的四個浮動元素在桌面模式（_setting，$ rowWidth 1140px）是否可以在媒體查詢中使用Foundation語義網格混搭？

*標記

<div id="container"> 
    <div id="main"> 
     <div id="column">

* SCSS

#container{ 
     @include outerRow(); 
    } 
    .column{ 
     @include column(3); 
    }

以上基於這些來源混入：http://foundation.zurb.com/docs/sass-mixins.php

現在我想更改縱向模式下在平板電腦上查看示例的列結構。我做了這樣的事情：發生

@media screen and (min-width: 768px) and (orientation: portrait) { 

    #container{ 
     @include outerRow(); 
    } 
    .column{ 
      @include column(6); 
    } 

}

以下錯誤：

>  DEPRECATION WARNING on line 21 of /Library/Ruby/Gems/1.8/gems/zurb-foundation-3.2.3/scss/foundation/mixins/_semantic-grid.scss: 
>  @extending an outer selector from within @media is deprecated. 
>  You may only @extend selectors within the same directive. 
>  This will be an error in Sass 3.3. 
>  It can only work once @extend is supported natively in the browser.

誰能告訴我的工作方法是重新定義在每個不同的媒體查詢柱結構是什麼基於基礎的項目？

來源

2012-12-27 WDP

這些mixin在哪裏定義？來源需要。 – cimmanon

語義網格mixin在這裏定義。 http://foundation.zurb.com/docs/sass-mixins.php – WDP

mixin名稱列表和他們所做的事情的模糊描述不是來源。請提供* actual *來源的鏈接，以加快未來的答覆過程。 – cimmanon

一般而言，您所需要做的就是在媒體查詢中重新定義擴展混合類似%clearfix。如果這些類是在另一個文件中定義的，則導入該文件也可以工作（假設您沒有將它放在某種控制塊內，如if/else語句）。

綜觀項目源，你正在尋找可能做不應該做的那樣（見：https://github.com/zurb/foundation/blob/master/scss/foundation/mixins/_semantic-grid.scss）

無論是在你的示例代碼中引用的混入的生成自己的媒體查詢，所以避免在同一個元素上調用它們兩次，否則最終會產生大量重複/未使用的CSS。相反，只是簡單地覆蓋實際需要修改屬性：

.exampleA { 
    @include outerRow(); 

    @media screen and (min-width: 768px) and (orientation: portrait) { 
     // do not @include outerRow() again here! 
     // these are the only properties that are variable in the outerRow() mixin: 
     width: $tabletWidth; 
     min-width: $tabletMinWidth; 
    } 
}

你需要認識到的另一件事是，一旦你已經定義了你$totalColumns，您使用的column混入時堅持了下來（見：https://github.com/zurb/foundation/blob/master/scss/foundation/mixins/_semantic-grid.scss#L64和https://github.com/zurb/foundation/blob/master/scss/foundation/mixins/_semantic-grid.scss#L19）。您的平板電腦默認不能有6列，然後是4。如果您需要能夠給這個，你可以簡單地運行自己的gridCalc()功能：

.exampleB { 
    @include column(6); 

    @media screen and (min-width: 768px) and (orientation: portrait) { 
     width: gridCalc(2, 6); // columns, totalColumns 
    } 
}

如果你確定與$totalColumns爲媒體的查詢數量，通過$totalColumns作爲第二個參數。

來源

2012-12-27 21:29:24 cimmanon

感謝這個偉大的答案！這對我想要做的事情有幫助。 – WDP

僅供參考所有這些鏈接都已死亡 – mcranston18

是否可以在媒體查詢中使用Foundation語義網格混搭？

回答

相關問題