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

Question

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

目标

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

我在做什么

我已经实现了一种简单的方法,可以在我的项目的响应网格中创建自己的额外断点. 内部媒体查询(大桌面为例)我改变网格宽度1200像素,然后我@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行的弃权警告:@extending @media中的外部选择器已弃用.您只能在同一指令中@extend选择器.这将是Sass 3.3中的错误.它只能在浏览器中本机支持@extend后才能工作.

重现/编码样本的步骤

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

2. 包括我自己的部分命名_theme.scss并包括在内app.scss.(这将包含我自己的样式,并允许我覆盖_settings.scss中无法覆盖的任何基础知识,并为我提供更清晰的升级路径.)

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)}; }
  }
}

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

那么......有什么建议吗？我确定我的黑客不是"_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;
  }
}