如何重构现有项目以使用Compass？

Question

我有一个使用常规CSS的Django项目。样式表按功能划分，因此有一个nav.css，course.css，default.css，reset.css等。所有这些都是在main.css中导入的，它是从html页面引用的。

我想在这个项目中使用Compass，这样我就可以使样式表更易于管理，并且可以轻松地为UI设置外观。

在检查Compass之前，我查看了Sass，并为我的所有样式表创建了.scss文件。

现在我意识到使用Compass可能比使用Sass更好，因为我将获得随附的所有默认样式。但是，我对如何开始重构过程感到有点困惑。

对于已经定义其样式的现有项目，重构（在婴儿步骤中）以使其使用Compass的正确过程是什么？

Answer 1

无论是否有Compass，大部分重构工作都是相同的，你会看到Sass比Compass提供的好处更快。

指南针创作者克里斯·埃普斯坦（Chris Eppstein）写了一篇关于他如何走向refactoring digg's CSS的文章。总结一下：

1. 提取部分内容。由于您已经拥有不同功能的单独样式表，因此您已经完成了这一步。进一步制定独立的规则集，使其更易于管理，并将重构项目分解为更小的步骤。

2. 分析样式。在新的部分中查找重复的模式和继承关系。只要你有选择器重复，就可以开始下一步。

3. 提取基类。这是您使用@extend干掉CSS的地方。将重复的声明拉出到基类中并进行扩展。

4. 应用嵌套。 Nesting是一个很棒的Sass功能，可让您的样式表更易于阅读。

5. 提取mixin。如果您在步骤2中找到了常见的样式模式，则可以将其提取到mixins。

现在你可以真正开始利用Compass及其可重复使用的模式。熟悉Compass documentation将有助于确定哪些mixin适用于您的项目。