基础5和页面打印

Question

我在用Zurb基金会。我正试着打印一个页面，就像它在大屏幕上看起来一样，但是所有的东西都堆叠在一起(并且浮动错误)。

我成功地在打印页面中用foundation.min.css中的"print，screen“替换了出现的每个"screen”。

问题是，现在采用的网格是小网格。

我读了这篇关于基金会支持的文章，但老实说，我不知道我到底应该做什么。我需要用sass重新编译foundation吗？

http://foundation.zurb.com/forum/posts/412-printing-paper-copies-of-site-built-on-foundation

我该怎么做？谢谢。

Answer 1

以下是用于该功能的CSS：

@media print {
  .large-1 {
    width: 8.33333%;
  }

  .large-2 {
    width: 16.66667%;
  }

  .large-3 {
    width: 25%;
  }

  .large-4 {
    width: 33.33333%;
  }

  .large-5 {
    width: 41.66667%;
  }

  .large-6 {
    width: 50%;
  }

  .large-7 {
    width: 58.33333%;
  }

  .large-8 {
    width: 66.66667%;
  }

  .large-9 {
    width: 75%;
  }

  .large-10 {
    width: 83.33333%;
  }

  .large-11 {
    width: 91.66667%;
  }

  .large-12 {
    width: 100%;
  }
}

来源：http://foundation.zurb.com/forum/posts/2820-printing-foundation-5

Answer 2

这三个sass循环让我在设计打印页面样式时变得更容易，而且效果很好。

变量$total-column来自foundation的核心设置。

​

  @for $i from 1 through $total-columns {
    .large-#{$i} {
      width: 100% * ($i/$total-columns);
    }
  }

  @for $i from 1 through $total-columns {
    .medium-#{$i} {
      width: 100% * ($i/$total-columns);
    }
  }

  @for $i from 1 through $total-columns {
    .small-#{$i} {
      width: 100% * ($i/$total-columns);
    }
  }

​

Answer 3

我需要用sass重新编译基础吗？

嗯，是的。您需要创建一个自定义sass文件，并将打印规则放入其中。然后使用Sass编译器重新编译该文件。

在scss/文件夹中有这两个normalize.scss和foundation.scss文件。创建一个名为app.scss的新文件，并导入normalize和foundation，如下所示：

// Import the normalize.scss
@import "normalize";

// Import the foundation.scss
@import "foundation";

// Your own SCSS here...

然后将下面的代码片段放在创建的app.scss文件的末尾

例如，在

中，您可以通过在项目中添加以下代码来强制大网格便于打印：

// This would make the large grid function like a print grid
@media print {
  @for $i from 1 through $total-columns {
    .large-#{$i} {
      width: gridCalc($i, $total-columns);
    }
  }
}

注意：这可能会也可能不会起作用。我自己也没试过。然而，它在基金会论坛上被认为是有帮助的。

$total-columns变量在scss/foundation/components/_grid.scss文件中定义，您可以通过编辑scss/foundation/_settings.scss来覆盖该变量(与其他设置一样)。因此，您需要在导入基础文件之前导入@import "foundation/settings";。

最后，通过以下命令对app.scss文件执行compile：sass --watch app.scss:app.css