rails + compass:直接使用haml + blueprint的优势

Question

我在rails项目上使用haml(+ sass)有一些经验.我最近开始使用blueprintcss - 我唯一做的就是将blueprint.css转换为sass文件,并从那里开始编码.我甚至有一个rails发生器,默认包含所有这些.

似乎Compass完成了我的工作以及其他事情.我试图了解其他东西是什么 - 但文档/教程不是很清楚.

这些是我的结论:

• Compass带有内置的sass mixin,可以实现常见的CSS习语,例如带有图标或水平列表的链接.我的解决方案没有提供类似的东西.(指南针1分).
• Compass有几个命令行选项:您可以创建rails项目,但您也可以在现有的rails项目上"安装"它.我想,轨道发生器可以个性化来做同样的事情.(领带).
• Compass有两种使用蓝图的模式:"基本"和"语义"用法.我不清楚这些之间的差异.使用我的rails生成器我只有一种模式,但似乎足够了.(领带)
• 显然,除了蓝图(例如YUI)之外,Compass还准备使用其他框架.我找不到很多关于这方面的文档,我对此并不感兴趣 - 蓝图对我来说是好的(领带).
• 指南针的学习曲线似乎有点僵硬,文档似乎很少.学习可能有点困难.另一方面,我知道我自己的系统的来龙去脉,可以马上使用它.(我的系统为1分).

通过这种分析,我很想给Compass一个尝试.

我的分析是否正确？我错过了任何关键点,还是我错误地评估了这些要点？

Answer 1

理想的目标是风格和内容的分离:它并不总是100%可行,但通过使用语义标记可以很好地完成.蓝图和其他CSS框架完全失败了.

Compass背后的最初想法是避免使用Blueprint生成的可视标记来污染HTML:如果您正在使用class="column-4"标记进行编写,那么您也可以将其放入style="width:160px"其中.在语义上它是相同的含义,并且维持相同的重复量.

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

#sidebar
  +column(4)

这样,您只需要在样式表中维护它,而不是在许多模板和HTML文件中.

指南针是项目感知的.它将处理整个样式表树的编译,甚至在运行时自动保存compass watch.

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

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

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

通用实用程序为您一直所做的事情提供帮助,但重复次数较少(特别是对于跨浏览器问题).这些是我经常使用的一些基本的:

• + clearfix和+ pie-clearfix(跨浏览器清除方法)
• + float确保你不要忘记显示:IE前面的内联...(如果是时候放弃旧的IE,那就是一次改变.)
• + replace-text隐藏文本并定位图像替换背景.
• + hover-link将:悬停下划线规则添加到基本链接样式

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

然后,除了内置的蓝图之外,Compass还为许多其他样式框架提供了工具.例如,请查看Susy,这是一个Sass原生布局框架,而不仅仅是一个CSS端口.它专注于柔性和流体网格.

Answer 2

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

Answer 3

Compass 对我来说看起来也是一个很好的解决方案，但是在一个项目上尝试过它之后，我并没有真正看到使用它对我来说有什么巨大的优势。和你一样，我对蓝图很满意，而且我认为没有必要在 haml/sass 之上添加另一层。

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