Foundation 6 将 scss 文件应用于各个页面

Question

我是 foundation 6 的新手，我正在使用 foundation-cli 遵循 ZURB 模板。

我看到一个名为 app.scss 的 scss 文件被用作编译为 css 的根文件，然后应用于 html 中的每个文档 src/pages.

我希望能够为我网站上的每个页面创建一个仅应用于我的页面的单独 scss 文件。

我怎样才能做到这一点，以便调用 foundation watch 仅将 scss 文件应用于一个特定的 html 文档？

Answer 1

我建议为每个页面创建不同的 .scss 文件。

例如，如果您有 3 个不同的页面：

Home.html
Page1.html
Page2.html

创建 3 .scss 个文件：

home.scss
page1.scss
page2.scss

这些文件中的每一个都将导入所需的 Foundation 模块，并包含相应页面的样式。它们之间可能有一些重叠，这没关系。

默认的 Foundation 构建脚本 gulpfile.babel.js 需要稍微修改。它只是编译 app.scss 的设置。这将需要更改以编译 /src/assets/scss/ 目录中的所有 .scss 文件。

这是一个simple one-line change。

修改 gulpfile 后，它将创建 3 个单独的 .css 文件：

home.css
page1.css
page2.css

接下来，您需要将每个页面 link 制作到相应的 CSS 文件。如果您使用的是静态文件，您可以简单地 link 到相应的 CSS 文件。例如：home.html 将使用 home.css:

<link rel="stylesheet" type="text/css" href="home.css">

如果您使用的是使用 Panini 编译页面的 Zurb 模板，则需要更改 default.html 布局。这可以使用 Panini 的 ifpage 设置条件 CSS 文件来完成。

{{#ifpage 'index'}}
<link rel="stylesheet" href="{{root}}assets/css/app.css">
{{/ifpage}}

{{#ifpage 'page1'}}
<link rel="stylesheet" href="{{root}}assets/css/page1.css">
{{/ifpage}}

Foundation 6 将 scss 文件应用于各个页面

Foundation 6 Apply scss files to individual pages

sass

zurb-foundation