基金會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); 
 
    } 
 
    }