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

Question

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

我喜欢320及以上的响应式移动第一种方法,它说它使用html5样板.

对于整体编辑,控制和功能Compass/Sass似乎有很多东西可以提供.

• 目前尚不清楚Compass中是否包含HTML5样板？
• 看起来Compass有它自己的类似功能吗？
• Susy声称合并了320&up,它说它使用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 mixins的集合,而不仅仅是一个"框架".最终你不会喜欢(重新)创建自己的SASS mixins.Compass已经解决了许多问题,您可以将他们的解决方案用作mixins,并预先制作可以导入的"CSS模块".

• Compass使用html5boilerplate的部分内容,但它没有明确包含所有内容.
• 它不归(normalize.css),它会重置基础上,迈耶的复位.
• 你必须知道你想要什么,然后在指南针中拉它.

Susy:Susy是一个基于百分比的网格系统,用SASS编写,使用一些Compass功能.

如果我想看看特定问题是如何解决的,我会看看指南针,看看他们是否已经这样做了.我发现Compass有一些开销,所以我不经常使用它.

我个人使用自己定制的320及以上的版本在SASS中创作,在那里我将每个部分分解成它自己的包含文件:颜色,字体,表格,网格,标题,链接,mixins,modernizr,表格,排版,供应商, 320,480,......等它保持良好和有条理,并编译成一个'syles.css'文件,然后缩小.