使用 Google Web Starter Kit 的 Susy答案

【问题标题】：Susy with Google Web Starter Kit使用 Google Web Starter Kit 的 Susy
【发布时间】：2017-11-29 22:38:30
【问题描述】：

想知道我哪里做错了吗？尝试让 Susy 使用 Google Web Starter Kit。

1.将GWSK克隆到新目录。

2.跑yarn安装依赖。

3.安装Susy：

yarn add susy --dev

4.添加到gulplfile：

/* gulpfile.babel.js */
.pipe($.sass({
  precision: 10,
  includePaths: ['node_modules/susy/sass'] // Added this

5.在我的样式文件中：

/* main.scss */
@import 'susy';
.content {
  @include container;
}
.col {
  @include span(4);
}

6.在准系统html文件中：

/* basic.html */
<div class="container">
  <div class="col">Lorem.</div>
  <div class="col">Ab.</div>
  <div class="col">Earum?</div>
</div>

7.然后gulp serve它。

然而，当basic.html 加载时，div 没有对齐并且没有错误。

【问题讨论】：

【解决方案1】：

显然，我需要添加of 12

.col {
  @include span(4 of 12);
}

我的 css 选择是 .content 不是 .container。呵呵。

【讨论】：

of n 语法可帮助您即时覆盖全局设置。如果您使用开箱即用的 Susy，则全局设置为 4。所以of 12 确实覆盖了全局 4，但您也可以更改一次全局设置 - $susy: ('columns': 12); - 而不必在每个 mixin 或函数中覆盖。
我没有意识到默认值是 4。您经常听说 12 列网格系统。苏西被默认为 4 岁有什么原因吗？
我们选择它是为了鼓励移动优先的方法，从 4 开始，随着屏幕变大而添加列。