编译sass或scss文件的一部分

Question

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

我有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以及特定页面所需的其他文件

例

scaffolding.scss：

.container {
    width: 100%;
}

nav.scss：

nav {
    color: pink;
}

button.scss：

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

---

index.scss：

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

about.scss：

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

list.scss：

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

---

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