使用Zurb Foundation，如何在没有弃用警告的情况下在网格大小中创建断点？ [英] Using Zurb Foundation, how can I create breakpoints in my grid size without a deprecation warning?

问题描述

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

tl;dr; I've implemented a way to regenerate Foundation's grid inside media queries. But it results in a Sass deprecation warning. Is there a better implementation to accomplish my goal?

目标

I希望使用媒体查询更改不同响应点的总网格宽度（从而更改网格中的每列大小）。例如，我想要平板电脑的 small 网格（总宽度为768px），而大型台式机的网格是 small 网格（总宽度为1200px）。 Twitter Bootstrap具有类似的实现，但Foundation没有。

I'd like to change the total grid width (thereby changing each column size in the grid) for different responsive break points using media queries. For example, I want a small grid for tablets (with a total width of 768px) but a large grid for large desktops (with a total width of 1200px). Twitter Bootstrap has a similar implementation, but Foundation does not.

我在做什么

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

I've implemented a simple way to create my own additional breakpoints in the responsive grid for my project. Inside a media query (for large desktops for example) I change the grid width to 1200px and then I @import "foundation/components/grid"; again inside this query. This effectively regenerates the grid (with a larger size) inside the media query for large desktops.

问题是我得到了来自编译器的弃用警告，我希望获得有关实施的一些建议。首先，它的运行非常好（我的CSS正在做我想要的事情）...但是，如果将来将来升级到Sass 3.3，这将中断。

The problem is that I'm getting a deprecation warning from the compiler, and I'm hoping to get some advice on my implementation. First of all, it's working just great (my css is doing what I want)... But this will break if I upgrade to Sass 3.3 in the future.

特定警告

第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：
@从@media内部扩展外部选择器是不推荐使用。
只能在同一指令中@extend选择器。这将是Sass 3.3中的
错误。只有在浏览器中本地支持@extend
时，它才能工作。

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. 创建基础项目

1. Created a Foundation project

包括我自己的名为 _theme.scss 的部分，并将其包括在 app.scss 中。 （这将包含我自己的样式，还允许我覆盖_settings.scss中无法覆盖的所有Foundation内容，并为我提供了更干净的升级路径。）

Included my own partial named _theme.scss and included that in app.scss. (This will contain my own styles and also allow me to override any Foundation things that I can't override in _settings.scss and gives me a cleaner upgrade path.)

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

In my _theme.scss I have some media queries. One example is:

// 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指令，如下所示：

The issue comes into play where in "_grid.scss" we use an "@extend" directive on line 29 as seen below:

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

因为这是在我的媒体查询中导入的警告（上面）。

Because this is imported inside my media query I get the warning (above).

所以...有什么建议吗？我确定我的骇客不是 _grid.scss的预期用途，但这是我认为可以做到的最佳/唯一方法。非常感谢您的帮助！

So... Any suggestions? I'm sure my hack wasn't the intended usage of "_grid.scss", but it's the best/only way I can think to do this. Thanks so much for any help!

推荐答案

$ rowWidth 只是确定'.row'的宽度。只是为了更改它而两次生成网格组件会产生过大杀伤力。

$rowWidth simply determines the width of '.row'. It would be overkill generate the grid-component twice just to change that.

由于 .columns 的宽度已定义以百分比表示，它们始终相对于 .row 的宽度。因此，无需重新生成网格，只需在所选断点处更改行的宽度，如下所示：

As .columns have their width defined in percent they are always relative to the width of .row. So instead of regenerating the grid, you could simply change the width of row at the breakpoints of your choice like this:

.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，如何在没有弃用警告的情况下在网格大小中创建断点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！