codecamp

为什么选择 Susy?

正如上文所述,Susy 是极佳的辅助工具,可以用来创建各种天马行空的布局设计,而又无需考虑其中的数学问题(译者注:流式布局的百分比计算需要大量的数学计算)。Susy 的魅力之处就在于,它所实现的 CSS 样式是与 HTML 文件完全分离的。

如果你之前使用过传统的栅格框架,比如说 Foundation 和 Bootstrap,那么你就应该了解,它们所创造的栅格都是既定的宽度值和断点。更进一步地说,如果你想要改变布局,那么必须添加相应的类名到 HTML 文件中。

Susy 将这些既定样式统统抛弃了,你可以在任何 CSS 类型上实现栅格布局。

我知道这么描述比较抽象难以理解。那么我们就不只讲理论,接下来还要使用 Susy 2 创建一个复杂的栅格系统。该栅格系统是由 Arnaud Guera (AG) 首创,总共包含了十列,具体如下图所示:

Susy

安装 Susy 2
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }