编译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和特定页面所需的其他文件

实施例

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放在一个文件中仍然是一个不错的选择，因为它只会在下次从缓存加载时第一次下载。