12

我有一些在 Rails 项目中使用 haml (+sass) 的经验。我最近开始将它们与 blueprintcss 一起使用——我唯一做的就是将 blueprint.css 转换为 sass 文件，然后从那里开始编码。我什至有一个默认包含所有这些的Rails 生成器。

似乎Compass做了我所做的事情，以及其他事情。我试图了解其他的东西是什么——但文档/教程不是很清楚。

这些是我的结论：

  • Compass 带有内置的 sass mixins，它们实现了常见的 CSS 习惯用法，例如带有图标的链接或水平列表。我的解决方案没有提供类似的东西。（指南针 1 分）。
  • Compass 有几个命令行选项：您可以创建一个 rails 项目，但您也可以将它“安装”在现有的 rails 项目上。我猜，rails 生成器可以个性化来做同样的事情。（领带）。
  • Compass 有两种使用蓝图的模式：“基本”和“语义”使用。我不清楚它们之间的区别。使用我的 rails 生成器，我只有一种模式，但似乎已经足够了。（领带）
  • 显然，Compass 准备使用除蓝图之外的其他框架（例如 YUI）。我找不到太多关于此的文档，而且我对此也不感兴趣 - 蓝图对我来说没问题（领带）。
  • Compass 的学习曲线似乎有点僵硬，而且文档似乎很少。学习可能有点困难。另一方面，我知道自己系统的来龙去脉，并且可以立即使用它。（我的系统得 1 分）。

有了这个分析，我犹豫要不要尝试 Compass。

我的分析正确吗？我是否遗漏了任何关键点，还是我错误地评估了这些点？

4

4 回答 4

25

理想的目标是风格和内容的分离：并不总是 100% 可能，但可以通过使用语义标记来相当好地做到这一点。Blueprint 和其他 CSS 框架在这方面完全失败了。

Compass 背后的最初想法是避免使用 Blueprint 生成的视觉标记污染 HTML：如果您正在编写class="column-4"标记，那么您不妨将其放入style="width:160px"其中。从语义上讲，它具有相同的含义，并且要保持相同的重复次数。

Compass 将 Blueprint 类.column-4转换为 mixin，您可以将其应用于有意义的选择器：

#sidebar
  +column(4)

这样，您只需要在样式表中维护它，而不是跨越多个模板和 HTML 文件。

Compass 具有项目意识。它将处理您的整个样式表树的编译，甚至在您运行时自动保存compass watch。

指南针提供了一些非常有用的功能，例如：

image_url是一个可配置的函数，可以处理相对或绝对路径，甚至可以根据需要设置旋转资产主机。

CSS3 模块负责处理圆角、阴影等所有特定于浏览器的样式规则。

通用实用程序为您一直在做的事情提供帮助，但重复较少（特别是对于跨浏览器问题）。这些是我经常使用的一些基本的：

  • +clearfix和+pie-clearfix（跨浏览器清除方法）
  • +float确保您不会忘记 display:inline 在它前面的 IE...（如果需要放弃旧的 IE，这是一个单一的更改。）
  • +replace-text隐藏文本并定位图像替换背景。
  • +hover-link将 :hover 下划线规则添加到基本链接样式

您可以在Compass的新文档站点上查看这些内容。

然后，除内置蓝图外，Compass 还为许多其他样式框架提供了工具。例如，请查看Susy，它是一个 Sass-native 布局框架，而不仅仅是一个 CSS 端口。它专门研究灵活和流体网格。

于 2010-06-20T12:28:38.903 回答
5

“语义模式”是指使用比 css 框架附带的更多语义类名称的可能性：.article 与 .grid_1。我个人认为这是一个很大的+。

于 2010-05-25T12:52:14.563 回答
2

我不确定这些资源是不是最近才出现的，但是您是否看过Compass CSS3 助手和通用实用程序——（我认为两者都有很好的记录）——它们确实大大加快了我的界面构建速度。

另一个很棒的资源是Compass 插件页面。

就我个人而言，我喜欢将这些实用程序 Sass 文件从 ruby​​gem 中复制出来并手动将它们包含在我项目的 Sass 文件中，因为引用存储在项目之外的 Sass 感觉很奇怪。

于 2010-06-15T06:59:30.533 回答
0

Compass 对我来说也是一个很好的解决方案，但是在一个项目中尝试它之后，我并没有真正看到为我使用它的巨大优势。像你一样，我对蓝图很好，我没有看到需要在 haml/sass 之上再添加一层。

我最终从那个项目中剥离了指南针，只使用了蓝图 CSS 文件的 sass 版本，然后从那里开始。我将任何自定义/附加样式存储在单独的 sass 文件中，仅此而已。如果您只想保持简单，则不需要指南针或类似的东西。

于 2010-05-25T12:59:04.177 回答