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

基于这些来源的mixins：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）

示例代码中引用的两个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和{{ 3}}）。默认情况下，您不能拥有6个列，而平板电脑则不能包含4个列。如果您需要能够做到这一点，您可以自己运行gridCalc()函数：

.exampleB {
    @include column(6);

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

如果您对媒体查询的$totalColumns数量感到满意，请将$totalColumns作为第二个参数传递。

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

1 个答案: