就像上個版本一樣,如果你想使用 Susy 2,就需要在?`config.rb`?文件中引入 susy:
~~~
#config.rb
require 'susy'
~~~
然后向樣式表中導入 Susy:
~~~
// Importing Susy
@import 'susy';
~~~
Susy 2 具有一系列內建的[全局默認配置](http://susydocs.oddbird.net/en/latest/settings/#global-defaults)。完全可以像如下方式修改默認配置:
~~~
// 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;
~~~