Question

TL;博士; 我已经实现了一种在媒体查询中重新生成 Foundation的网格的方法。但它会导致Sass弃用警告。有没有更好的实现来实现我的目标？

目标

我想使用媒体查询更改不同响应断点的总网格宽度（从而更改网格中的每个列大小）。例如，我想要一个用于平板电脑的小网格（总宽度为768px），但是需要一个用于大型桌面的大网格（总宽度为1200px）。 Twitter Bootstrap有类似的实现，但基金会没有。

我在做什么

我已经实现了一种在我的项目的响应式网格中创建自己的额外断点的简单方法。内部媒体查询（例如，对于大型桌面）我在此查询中再次将网格宽度更改为1200px ，然后再次 I @import "foundation/components/grid";。这有效地为大型桌面重新生成网格（具有更大的大小）内部媒体查询。

问题是我从编译器收到了弃用警告，我希望能对我的实现提出一些建议。首先，它工作得很好（我的css正在做我想要的）...但如果我将来升级到Sass 3.3，这将会破裂。

具体警告

第29行的弃权警告 /usr/local/Cellar/ruby/1.9.3-p327/lib/ruby/gems/1.9.1/gems/zurb-foundation-3.2.2/scss/foundation/components/_grid.scss：不推荐@extending @media中的外部选择器。您可能只在同一指令中扩展选择器。这将会 Sass 3.3中的错误。它只能在支持@extend后才能工作原生在浏览器中。

重现/编码样本的步骤

创建了一个基金会项目

包含我自己的部分名为_theme.scss，并包含在app.scss中。（这将包含我自己的样式，并允许我覆盖我在_settings.scss中无法覆盖的任何基础知识，并为我提供更清晰的升级路径。）

在我的_theme.scss我有一些媒体查询。一个例子是：

// LARGE DESKTOP & UP @media (min-width: 1441px) { // change the total rowWidth for big screens $rowWidth: 1200px; // now import the grid partial again and generate a bunch of grid styles // with this new default ONLY for use inside this media query @import "foundation/components/grid"; // other big screen tweaks such as a bigger logo image #logo { height: 100px; background: url("../images/logo_large.png") no-repeat scroll 50% 0 transparent; } }

问题发挥作用在“_grid.scss”中我们在第29行使用“@extend”指令，如下所示：

// Creating .row-# classes @for $i from 1 through $totalColumns { .row { .#{convert-number-to-word($i)} { @extend .#{convert-number-to-word($i)}; } } }

因为这是在我的媒体查询中导入的，所以我收到警告（上图）。

那么......有什么建议吗？我确定我的黑客不是“_grid.scss”的预期用法，但它是我能想到的最好/唯一的方法。非常感谢您的帮助！

Answer 1

$rowWidth只是确定'.row'的宽度。如果改变它，那么两次生成网格组件就会过度。

由于.columns的宽度以百分比定义，因此它们始终相对于.row的宽度。因此，您可以简单地在您选择的断点处更改行的宽度，而不是重新生成网格，如下所示：

.row{
  width: $rowWidth;
  @media(min-width: $breakpoint-large){
    width: $rowWidthLarge;
  }
  @media(max-width: $breakpoint-tablets){
    width: $rowWidthTablets;
  }
  @media(max-width: $breakpoint-mobile){
    width: $rowWidthMobile;
  }
}

使用Zurb Foundation，如何在没有弃用警告的情况下在网格大小中创建断点？

1 个答案: