HTML5 CSS3框架 Sass/Compass/320&up/susy/HTML5boilerplate如何一起使用？

Question

HTML5 CSS3框架 Sass/Compass/320&up/susy/HTML5boilerplate如何一起使用？

htmlcsssasscompass-sass

6

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

我喜欢320 & up采用的响应式移动优先的方法，它说它使用了html5模板。

对于整体编辑、控制和特性，Compass/Sass似乎提供了很多选择。

不清楚HTML5模板是否包含在Compass中？
Compass似乎有自己类似的功能？
Susy声称将320 & up纳入其中，后者声称使用HTML5模板。
我很困惑，HTML5模板是否与Compass工具共存？我需要做出选择吗？
哪种堆栈是最好考虑的？
是否有Compass插件提供完整的堆栈？

- dartdog

6

我没有想到一个问题标题中能够压缩这么多网络前端技术的名称。 - BoltClock

2个回答

-2

请查看octopress.org // 这是一个使用compass + 320&up运行的jekyll模板... Divya Manian的网站nimbupani.com正在使用octopress和html5boilerplate：http://nimbupani.com/redesign-notes.html

享受吧。

- doud

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Benxamin · Accepted Answer

HTML5不需要响应式设计。

这些样式表技术是相互建立的，它们最终都会“编译”成CSS。

SASS是其中重要的部分。学习基础并开始尝试其他工具。

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

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

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

Compass：它更像是一组SASS mixin和include而不是一个“框架”。最终，您将不喜欢（重新）创建自己的SASS mixin。Compass已经解决了许多问题，您可以使用它们的解决方案作为mixin，并导入预制的“CSS模块”。

Compass使用了html5boilerplate的部分内容，但并没有明确地包含所有内容。
它没有进行标准化（normalize.css），而是基于Meyer的reset进行重置。
您必须知道您想要什么，然后从Compass中提取它。

Susy: Susy是一个基于百分比的网格系统，用SASS编写，并使用了一些Compass的特性。

如果我想查看某个特定问题的解决方法，我会查看Compass并看看他们是否已经解决了该问题。我发现使用Compass存在一些额外的开销，因此我不经常使用它。

我个人使用自己定制版本的320&up，在SASS中编写，其中我将每个部分分成自己的包含文件：颜色、字体、表单、网格、标题、链接、混合、modernizr、表格、排版、vendors、320、480等等。这使得事情变得井井有条，并且编译成一个名为“styles.css”的文件，然后进行最小化处理。