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

Question

tl;dr;我实现了一种方法来重新生成 Foundation 的网格内部 媒体查询。但它会导致 Sass 弃用警告。是否有更好的实现来实现我的目标？

目标

我想使用媒体查询为不同的响应断点更改总网格宽度(从而更改网格中每个列的大小)。例如，我想要一个用于平板电脑的小网格(总宽度为 768 像素)，而一个用于大型台式机的大网格(总宽度为 1200 像素)。 Twitter Bootstrap 有类似的实现，但 Foundation 没有。

我在做什么

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

问题是我从编译器收到弃用警告，我希望得到一些关于我的实现的建议。首先，它工作得很好(我的 css 正在做我想做的事)...但是如果我将来升级到 Sass 3.3，这将会中断。

具体警告

DEPRECATION WARNING on line 29 of /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 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.

重现步骤/代码示例

1. 创建了一个基金会项目

2. 包含我自己命名的部分 _theme.scss 并将其包含在 app.scss 中。 (这将包含我自己的样式，还允许我覆盖我无法在 _settings.scss 中覆盖的任何 Foundation 事物，并为我提供更清晰的升级路径。)

3. 在我的 _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)}; }
  }
}

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

那么……有什么建议吗？我确定我的 hack 不是“_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;
  }
}