是否可以在mediaqueries中使用基础语义网格混合?

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);
    }

以上基于这些来源的混合: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

一般来说，您需要做的就是在媒体查询中重新定义扩展mixins，如%clearfix。如果这些类是在另一个文件中定义的，则导入该文件也可以工作(前提是您没有将其放在某种控制块中，例如If/else语句)。

看看项目的源代码，你想要做的事情可能不应该这样做(参见:https://github.com/zurb/foundation/blob/master/scss/foundation/mixins/_semantic-grid.scss)

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