是否可以在媒体查询中使用 Foundation 语义网格混合？

Question

我使用基础框架 (http://foundation.zurb.com/) 制作了一个小示例网格。网格由桌面模式下的四个浮动元素组成(_setting, $rowWidth 1140px)

*标记

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

*scss

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

以上基于这些来源的 mixin：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.

谁能告诉我在基于基础的项目中为每个不同的媒体查询重新定义列结构的工作方法是什么？

Answer 1

一般来说，您需要做的就是在您的媒体查询中重新定义像%clearfix 这样的扩展混合。如果这些类是在另一个文件中定义的，那么导入该文件也可以工作（前提是您没有将它放在某种控制块中，例如 if/else 语句）。

看看项目的源代码，你想做的事情可能不应该那样做（见：https://github.com/zurb/foundation/blob/master/scss/foundation/mixins/_semantic-grid.scss）

您的示例代码中引用的两个 mixin 都会生成它们自己的媒体查询，因此请避免在同一个元素上两次调用它们，否则您最终会得到大量重复/未使用的 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 作为第二个参数传递。