1

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

我想在这个项目中使用 Compass,这样我就可以使样式表更易于管理,也可以轻松地为 UI 设置皮肤。

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

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

重构已经定义了样式的现有项目以使其使用 Compass 的正确过程是什么?

4

1 回答 1

2

有或没有 Compass 的大部分重构工作都是一样的,你会比 Compass 更快地看到 Sass 提供的好处。

Compass 的创建者 Chris Eppstein 写了一篇关于他如何重构 digg 的 CSS 的文章。总结一下:

  1. 提取部分。您已经在这方面做得很好,因为您已经为不同的功能提供了单独的样式表。更进一步,提取独立的规则集,使其更易于管理,并将重构项目分解为更小的步骤。

  2. 分析风格。在新的分部中寻找重复的模式和继承关系。无论哪里有选择器重复,都可能是开始下一步的好地方。

  3. 提取基类。这是你用@extend. 将重复的声明提取到基类中并扩展。

  4. 应用嵌套。 嵌套是一个很棒的 Sass 特性,可以让你的样式表更容易阅读。

  5. 提取混合。如果您在第 2 步中找到了常见的样式模式,那么是时候将它们提取到mixins中了。

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

于 2012-07-20T21:32:29.770 回答