codecamp

配置 Susy 2

就像上个版本一样,如果你想使用 Susy 2,就需要在 config.rb 文件中引入 susy:

#config.rb 
require 'susy'

然后向样式表中导入 Susy:

// Importing Susy 
@import 'susy'; 

Susy 2 具有一系列内建的全局默认配置。完全可以像如下方式修改默认配置:

// Configuring Susy 2 Global Defaults
$susy: (
  key : value
  );

也许此时你会想深入了解使用这些默认配置的方式,不过我还是将相关内容另写一篇文章吧。现在就请直接使用默认配置吧,但我个人来说,比较喜欢使用 border-box 和 rem 单位,所以这里会有点小小的修改:

$susy: (
  global-box-sizing: border-box,
  use-custom: (rem: true
    )
  );

注意,Susy 默认使用的时流失布局。这意味着外部容器元素的宽度是 100%

反之,如果你喜欢在 Susy 中使用精确断点的固定布局,那么只需把 math 关键字的值修改为 static 即可。这两种模式的主要区别就在于窗口宽度改变时的响应效果。

另一点需要注意的是,你还需要在项目中导入 normalize 和 compass。简而言之,最初的配置文件如下所示:

@import "normalize";
@import "compass";
@import "susy";
// Configuring Susy Defaults
$susy: (
  global-box-sizing: border-box,
  use-custom: (rem: true
    )
  );
@include border-box-sizing;
安装 Susy 2
AG 栅格的 HTML 和 CSS
温馨提示
下载编程狮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; }