rails + compass：与直接使用haml + blueprint相比的优势答案

【问题标题】：rails + compass: advantages vs using haml + blueprint directlyrails + compass：与直接使用haml + blueprint相比的优势
【发布时间】：2011-02-23 15:32:55
【问题描述】：

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

似乎Compass 做了我所做的事情，以及其他事情。我正在尝试了解其他内容是什么 - 但文档/教程不是很清楚。

这些是我的结论：

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

有了这个分析，我有点犹豫是否要试试 Compass。

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

【问题讨论】：

标签： ruby-on-rails css haml sass compass-sass

【解决方案1】：

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

【讨论】：

就是这样。谢谢你的解释。有趣的是，我无法从网站的文档中自己推断出来。老实说，我的布局上只有 6 或 7 个 div 和演示类。当然，我可以说“article_body”而不是“span-5 prepend-1”会更好，但是..这似乎不是一个很大的收获。

【解决方案2】：

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

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

【讨论】：

感谢您的洞察力。我想我会跟随你的领导，暂时把它放在次要位置。一旦他们有更好的文档/示例，也许会尝试再次使用它。
我认为这个答案错过了使用 Compass 的全部意义。 :-(
查看 compass CSS3 模块，它很棒。对于跨浏览器网站进行编码，有很多开箱即用的解决方法。这就是我使用它的原因

【解决方案3】：

我不确定这些资源是不是最近才出现的，但是你有没有看到 Compass CSS3 helpers 和 General utilities -（我认为这两个都有很好的记录） - 它们确实加快了我的界面构建速度好主意。

另一个很棒的资源是Compass plugins page。

我个人喜欢将这些实用程序 Sass 文件复制到 rubygem 中并手动将它们包含在我项目的 Sass 文件中，因为引用存储在项目之外的 Sass 感觉很奇怪。

【讨论】：

感谢您的反馈。我最近看了 60 分钟长的关于指南针的 vimeo 视频（应该是 15 分钟，真的），现在有点理解了。我仍然认为学习曲线不值得。感谢您链接插件页面，我不知道。
别担心，我同意这个视频很啰嗦

【解决方案4】：

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

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

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

#sidebar
  +column(4)

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

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

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

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

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

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

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

您可以在新的docs site for Compass 上查看这些内容。

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

【讨论】：

您的 cmets 非常有帮助（+1！）。但是，我仍然认为我不需要指南针。正如我所提到的，我在 4 或 5 个 div 中使用 column-x 属性，很容易在布局文件中本地化，所以对我个人而言，删除这些属性并不是什么大收获。所以这只留下了助手和创建我自己的自定义网格的可能性。但是这些（就我个人而言）都不能证明学习新工具的合理性。无论如何，我会检查一下 Susy，谢谢你的提示！