基础5和页面打印

Question

我正在使用Zurb Foundation.我正在尝试打印一个页面,就像它在大屏幕中看起来一样,但是所有内容都被堆叠(并且浮动错误).

通过在foundation.min.css中用"print,screen"替换每个"屏幕"出现,我成功地在打印页面中创建了网格.

问题是现在采用的网格很小.

我在基金会的支持下阅读了这篇文章但老实说我并不确切知道我应该做什么.我需要用sass重新编译基础吗？

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

我该怎么办？谢谢.

Answer 1

我需要用sass重新编译foundation吗？

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

文件夹内scss/有这两个normalize.scss文件foundation.scss。创建一个名为的新文件app.scss并导入标准化和基础，如下所示：

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

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

// Your own SCSS here...

然后按照Rafi Benkual的建议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：sass --watch app.scss:app.css