基金会5和页面打印

Question

我正在使用Zurb基金会。 我试图打印一个页面，因为它看起来在大屏幕上，但一切都堆积（和浮动错误）。

我通过在foundation.min.css中用“print，screen”替换每个“屏幕”事件，从而成功地在打印页面中生成网格。

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

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

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

我请告诉我应该怎么办？ 谢谢。

Answer 1

我需要用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年底通过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); 
    } 
    } 
} 

备注：这可能会也可能不会。我没有自己尝试。但在基金会论坛被认为是有帮助的。

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

最后，compile的app.scss文件是：sass --watch app.scss:app.css

Answer 2

关注@Hashem Qolami的答案，但需要在for循环的小变化，因为某些原因，它不计算列的百分比值，也是gridCalc()已经deprecated (line #22)在基金会5.所以，你应该使用grid-calc()代替或者更好，如果您直接与percentage()计算百分比：

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

它会做基本的东西，但如果你创建了一个卡斯特需要更多的黑客om一些技巧的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 3

这里是这样的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 4

这三个sass循环让我的生活更轻松，当打印页面的样式，并像魅力一样工作。

变量$ total-columns来自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); 
 
    } 
 
    }