2

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

目标

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

我在做什么

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

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

具体警告

/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第29行的弃用警告: 从@media 中@extending 外部选择器已被弃用。您只能在同一指令中 @extend 选择器。这将是 Sass 3.3 中的错误。只有在浏览器本机支持 @extend 时，它才能工作。

重现步骤/代码示例

  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”的预期用途，但这是我能想到的最好/唯一的方法。非常感谢您的帮助！

4

1 回答 1

11

$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;
  }
}
于 2013-01-09T21:50:11.797 回答