css - 编译部分 sass 或 scss 文件

Question

我已经编写了一个带有变量和 mixins 的大型 main.scss 文件来设置我网站的许多页面的样式，我想知道是否有一种方法可以为不同的页面编译不同的文件，而这些文件只包含页面的样式。例如：

我有 main.scss 文件，其中包含 index.php、about.php 和 list.php 的样式，而不是所有这些 php 文件共享相同的编译 main.css，我希望 sass/compass 编译器为这些编译不同的文件页。

或者还有另一种技术可以实现这一点。

请指教，

谢谢，

Answer 1

1. 将您的 main.scss 拆分为多个文件。例如scaffolding.scss、nav.scss、button.scss等。

2. 创建 index.scss、about.scss 和 list.scss。在每个文件中导入scaffolding.scss、nav.scss 和特定页面所需的其他文件

例子

脚手架.scss：

.container {
    width: 100%;
}

导航.scss：

nav {
    color: pink;
}

按钮.scss：

input[type=button] {
    width: 2em;
}

---

索引.scss：

@import "scaffolding";
@import "nav";

关于.scss：

@import "scaffolding";
@import "nav";

列表.scss：

@import "scaffolding";
@import "button";

---

如果您担心性能，将所有 css 放在一个文件中仍然是一个不错的选择，因为它只会在第一次下载时才会从缓存中加载。