0

我用基础框架（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.

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

4

1 回答 1

3

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

查看项目的来源，您想要做的事情可能不应该那样做（参见： https ://github.com/zurb/foundation/blob/master/scss/foundation/mixins/_semantic-网格.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的 . /_semantic-grid.scss#L64和https://github.com/zurb/foundation/blob/master/scss/foundation/mixins/_semantic-grid.scss#L19）。默认情况下，您的平板电脑不能有 6 列，然后是 4 列。如果您需要这样做，您可以简单地自己运行该功能：columngridCalc()

.exampleB {
    @include column(6);

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

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

于 2012-12-27T21:29:24.113 回答