Foundation 5 和页面打印

Question

我正在使用 Zurb 基金会。 我正在尝试完全按照它在大屏幕上的样子打印页面，但所有内容都被堆叠（并且浮动错误）。

通过在f​​oundation.min.css中用“print, screen”替换每个“screen”出现，我成功地在打印页面中添加了网格。

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

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

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

我该怎么办？ 谢谢。

Answer 1

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

变量 $total-columns 来自基金会的核心设置。

  @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 2

这里是 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 3

遵循@Hashem Qolami 的回答，但需要在 for 循环中进行一些小的更改，因为由于某种原因，它不会计算列的百分比值以及 Foundation 5 中的 gridCalc() 已经 deprecated (line #22)。所以你应该使用如果您直接使用percentage() 计算百分比，grid-calc() 会更好：

@media print {
  @for $i from 1 through $total-columns {
    .large-#{$i} {
      width: percentage($i / $total-columns);
    }
  }
}

它会做一些基本的事情，但如果您使用一些技巧创建自定义 HTML 结构，则需要更多技巧。

将整个html的宽度设置为大尺寸：

@media print {
  html {
    width: rem-calc(1280px);
  }

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

最后在_settings.scss（第82 行附近）将$screen 值从"only screen" 设置为"only print, screen"：

$screen: "only print, screen";

Answer 4

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

嗯，是的。您需要创建一个自定义 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...

然后在app.scss文件as suggested的末尾加上下面的代码sn-p by Rafi Benkual:

例如，您可以通过以下方式强制大网格打印友好 将以下代码添加到您的项目中：

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

注意：这可能有效，也可能无效。我自己没有尝试过。然而，它在 Foundation Forum 被认为很有帮助。

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

最后，compileapp.scss 归档：sass --watch app.scss:app.css