首页 文章

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

提问于
浏览 次
2

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

The goal

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

What I'm doing

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

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

The specific warning

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

Steps to reproduce / code sample

  • 创建了一个基金会项目

  • 包括我自己的部分名为 _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”的预期用法，但它是我能想到的最好/唯一的方法 . 非常感谢您的帮助！

compass-sass sass zurb-foundation

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;
  }
}
    回复于

相关问题