配置 Susy 2

最后更新于:2022-04-01 01:53:00

就像上个版本一样,如果你想使用 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; ~~~
';