HTML5 CSS3 框架 Sass/Compass/320&up/susy/HTML5boilerplate 一起玩？

Question

我一直在探索实现响应式设计的工具和技术。

我喜欢 320 及以上的响应式移动 1st 方法，它说它使用 html5 样板。

对于整体编辑、控制和功能 Compass/Sass 似乎有很多提供。

• 尚不清楚 HTML5 样板是否包含在 Compass 中？
• Compass 好像也有类似的功能？
• Susy 声称包含 320 及更高版本，它说它使用 HTML5 样板文件。
• 我很困惑 html5 样板是否与 Compass 设施共存？我需要选择吗？
• 这里要考虑的最佳堆栈是什么？
• 是否有提供完整堆栈的指南针插件？

Answer 1

（HTML5 不需要响应式设计。）

这些样式表技术中的每一个都建立在另一个之上。它们都“编译”成 CSS。

SASS 是重要的部分。学习基础知识并开始与其他人一起玩。

html5boilerplate：它是一个跨浏览器兼容的样式表。这是 CSS 的一个很好的起点。从 2.0 开始，它使用 normalize 而不是 reset。

CSS：Clarke 的 320 & up 是识别媒体查询的移动浏览器的好方法。 Skeleton 是另一个不错的选择，如果您使用网格系统进行网站布局。这些都是直接的 CSS 基础文件，比如样板文件加上网格和媒体查询。

SASS：如果你想更快地编写 CSS 并减少重复，那么像 SASS 这样的抽象工具会帮助你。它处理 SASS 语法以生成 CSS。亮点包括：变量、自定义函数（mixins）、将现有的 .css、.less、.sass、.scss 文件转换为 .sass 或 .scss 格式。

Compass：Compass 更像是 SASS 混合的集合，而不是“框架”。最终你不会喜欢（重新）创建你自己的 SASS mixin。 Compass 已经解决了很多问题，您可以将他们的解决方案用作 mixins，以及可以导入的预制“CSS 模块”。

• Compass 使用 html5boilerplate 的部分内容，但并未明确包含所有内容。
• 它没有规范化 (normalize.css)，它重置基于迈耶的重置。
• 您必须知道自己想要什么，然后将其拉入 Compass。

Susy：Susy 是用 SASS 编写的基于百分比的网格系统，它使用了一些 Compass 功能。

如果我想了解某个特定问题是如何解决的，我会查看 Compass，看看他们是否已经这样做了。我发现 Compass 有一些开销，所以我不经常使用它。

我个人使用我自己在 SASS 中编写的 320 及以上 的自定义版本，我将每个部分分解为它自己的包含文件：颜色、字体、表单、网格、标题、链接、 mixins，modernizr，表格，排版，供应商，320、480，...等。它使事情保持井井有条，并且它编译成一个“syles.css”文件，然后被缩小。

Answer 2

检查 octopress.org // 这是 jekyll 的模板，使用 compass + 320&up ... divya manian 的网站 nimbupani.com 正在使用 octopress 和 html5boilerplate：http://nimbupani.com/redesign-notes.html

享受吧。