使用 Susy 轻松构建网页布局

Susy 为您提供构建自己的网格布局的工具，以满足您网站的需求。它让您能够自由灵活地构建任何您能想象到的设计。无论您的设计是 5 列、14 列还是 48 列，都没有关系。不均等宽度的列？Susy 都能满足您的需求。

为什么您要选择 Susy 而不是互联网上其他数百万个框架？您可能以前从未听说过它。如果它的美丽只是表面现象怎么办？

在过去几个月里，Susy 是我前端开发工作流程中发生的最棒的事情之一。它给了我如此大的帮助，以至于我决定写一本书来分享它的优点。这是一本关于 Susy 的深入指南，介绍了如何使用它轻松创建任何您想要的网站设计。

仍然不相信？好吧，我唯一的要求是您给我机会尝试通过本文改变您的想法。我们将了解 Susy 为什么如此特别，以及它如何帮助您。

正如人们所说，经验是无法替代的，因此我将引导您体验创建布局的 Susy 体验。您可以将其与手动创建相同布局的体验进行比较（这涉及自己计算像素……）。

我们将从简单的开始，一旦您对 Susy 有了一定的了解，我们将继续学习更花哨的布局。

在开始之前，您必须了解一些关于我们朋友 Susy 的事情。您**必须**为它使用 Sass 预处理器语言，这意味着您至少必须知道如何将 Sass 转换为 CSS。不，您不能使用 LESS。对不起，LESS 粉丝们！

创建非常简单的布局

CSS-Tricks 拥有一个非常直观的布局，所以让我们用它作为我们的第一个示例。

查看该博客，您会发现 CSS-Tricks 由两个内容区域组成：主要内容和侧边栏区域。

我们将假设 CSS-Tricks 为整个站点使用 12 列布局，其内容区域占据 12 列中的 8 列，而侧边栏占据 12 列中的 4 列。如果您之前使用过网格，这都是非常标准的内容。

如果您之前使用过 Bootstrap 或 Foundation，则此站点布局的标记将如下所示

<div class="wrap">
  <div class="content col-md-8"></div>
  <div class="content col-md-4"></div>
</div>

很简单，是的。但是 Bootstrap 和 Foundation 也附带了许多包袱，很多时候我们根本不想处理它们。如果您不需要 Bootstrap 和 Foundation 附带的大多数其他内容，那么 Susy 将更适合您。

一个从头开始手动编写所有站点代码，没有框架或装饰的坚定的开发者可能会这样编写他的标记

<div class="wrap">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>

要创建 8 列内容和 4 列侧边栏，您必须测量内容、间隙和侧边栏的宽度。响应式网页开发的一条规则是使用百分比输出这些宽度，因此您必须相应地进行转换。

因此，相应的 CSS 可能如下所示

/* I tend to use border-box sizing for all my web layouts. */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

.wrap {
  max-width: 1120px; 
}

/* Clearfix for floated children */
.wrap:after {
  content: " ";
  clear: both; 
  display: block;
}

.content {
  float: left; 
  width: 66.071429%; /* 740px / 1120px */
  margin-right: 1.6964286%; /* 19px/1120px */
}

.sidebar {
  float: right; 
  width: 32.2321429%; /* 361px / 1120px */
}

在我们继续之前，快速说明一点：我喜欢将所有网页元素的box-sizing属性设置为border-box，我强烈建议您也这样做。Chris 已经在这里详细介绍了 box-sizing。

无论如何，如果要处理多个布局，从头开始手动编码的方法可能会变得乏味。想象一下，每次都计算所有这些百分比！

这正是 Susy 帮助您的地方。它为您完成了数学运算。

使用 Susy 创建简单的布局

使用 Susy 创建任何布局时，您首先必须让它知道您希望它使用哪些设置。Susy 使用许多默认设置来启动每个项目。

我假设这是您第一次使用 Susy，因此我们现在将坚持使用大多数默认设置。不过，您确实需要更改三个属性，您可以通过在$susy映射上声明它们来更改它们。

同时，让我们也像上面一样应用border-box属性。

@import "susy"

/* Changing Susy default global settings */
$susy: (
  /* Tells Susy to use 12 columns */
  columns: 12,
  /* Tells Susy that the container has a max-width of 1120px */
  container: 1120px,
  /* Tells Susy to use border-box */
  global-box-sizing: border-box 
  );

/* Makes border-box properties */
@include border-box-sizing;

建议您在使用 Susy 时使用containermixin 创建网站的容器。在我们的例子中，此容器是.wrap

.wrap {
  @include container;
}

这一次，我们将不再手动计算布局的精确像素和百分比，而是告诉 Susy 为我们计算。为此，**您只需告诉 Susy content 是 8 列，sidebar 是 4 列即可**。

我们确实必须让 Susy 知道sidebar是行上的最后一个项目，以便它可以进行必要的调整。

/* Tells Susy there's 8 columns in the content */
.content {
  @include span(8); 
}

/* Tells Susy there's 4 columns in the sidebar, and its the last item on the row. */
.sidebar {
  @include span(4 last); 
}

这编译成

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

.wrap {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.wrap:after {
  content: " ";
  display: block;
  clear: both;
}

.content {
  width: 66.10169%;
  float: left;
  margin-right: 1.69492%;
}

.sidebar {
  width: 32.20339%;
  float: right;
  margin-right: 0;
}

**您是否注意到 CSS 输出正是我们需要的？**Susy 确实为我们节省了很多时间。

但是我们还没有完成 CSS-Tricks 布局。如果您向下滚动到站点的底部，您会发现社交媒体区域，您还可以看到此区域中有 10 个社交媒体项目

如果您在设计中使用传统的网格框架，那么您就遇到了麻烦。据我所知，在不影响其余布局的情况下，使用 Bootstrap 或 Foundation 等框架将列数从 12 快速更改为 10 实际上没有简单的方法。

Susy 不会用此类规则束缚您。您可以自由创建自己的规则。毕竟，这是您的网格。

您的网格，您的规则

当您创建自己的网格时，一切皆有可能。在我们继续 CSS 之前，让我们首先将标记正确化。它应该如下所示

<div class="wrap">
  <div class="content"></div>
  <div class="sidebar"></div>
  <div class="social">
    <ul>
      <li class="social__list-item"></li> <!-- repeat 10x --> 
    </ul>
  </div>
</div>

现在我们可以开始处理 CSS 了。使用手动编码方法，您可能已经意识到您将不得不再次计算每个项目和间隙的宽度。

.social {
  padding: 1.6964286% /* 19px / 1120px */
}

/* Adds clearfix to social to prevent the float collapse  */
.social:after {
  content: " ";
  clear: both; 
  display: block;
}

.social__list-item {
  float: left; 
  width: 9.1497227; /* 99px / 1082px */
  margin-right: 1.0166359; /* 11px / 1082px */
}

/* And the last item cannot have any right margins */
/* It is also good to float it right to mitigate subpixel rounding errors */

.social__list-item:last-child {
  float: right; 
  margin-right: 0;
}

如果您问我，这感觉就像一项相当乏味的工作。

如果我们让 Susy 为我们做这件事，那就简单多了。您只需告诉 Susy 总共有 10 列（而不是 12 列），并且每个社交项目占据一列。

.social {
  /* Adds a padding of 19px to each side of the .social container */
  padding: gutter();
  /* Adding a clearfix because all children elements are floated */
  @include clearfix;

  .social__list-item {
    /* Telling Susy that there are 10 items, and each takes up 1 row */
    @include span(1 of 10);
    /* Another way to tell Susy that this is the last item in the row */
    &:last-child {
      @include last;
    }
  }
}

Susy 生成了我们网格所需的完全相同的 CSS 属性！

.social {
  padding: 1.69492%;
}

.social:after {
  content: "";
  display: table;
  clear: both;
}

.social .social__list-item {
  width: 8.16327%;
  float: left;
  margin-right: 2.04082%;
}

.social .social__list-item:last-child {
  float: right;
  margin-right: 0;
}

使用 Susy 可以如此简单。无需数学技能。**只要您知道如何使用原生 CSS 创建网格，您就会知道如何使用 Susy。**

使用百分比的一件事是不可避免的事实，即您的输出将包含子像素，例如 10.4px。这长期以来一直是布局的主要问题，因为不同的浏览器对这些子像素的处理方式不同。

例如，webkit 浏览器会向下舍入这些像素，并且 10.4px 将向下舍入到 10px。布局中项目的数量越多，每个舍入错误出现的次数就越多。因此，我们的 10 个项目错误在 webkit 浏览器中清晰可见。

此类错误是不雅观的，我们绝对不能容忍。

处理子像素舍入错误

一种方法是确保百分比根本不会生成子像素。但是
这不是一个好主意，因为您将要么被困在一个非响应式网站，要么被困在一个会捕捉到不同网格宽度的网站。

还有另一种方法，我称之为**隔离技术**。

此方法稍微高级一些，需要您更多地了解使用隔离技术布局元素，该技术由Jamie Hill开发。此技术已在经过实战检验的zen 网格中使用了很长时间。如果您熟悉 Zen 网格，您就会知道我在说什么。

如果不是，让我们看看如何使用此技术。

隔离技术

隔离技术的原理是通过使用特定的边距将舍入错误放置在它们应该在的位置，从而减少舍入错误的累积效应。

使用此技术的要求是

1. 每个元素都必须具有margin-left属性才能将其放置在正确的位置。

2. 每个元素都必须具有margin-right属性为-100%，以便将下一个项目拉到容器的最左边缘。

如果您不熟悉负边距，这种技巧可能会令人困惑。让我们逐步详细解释一下它是如何工作的。

假设您需要创建一个3列布局

我们将逐个介绍每个项目的定位。项目1非常简单。

1. 它的margin left为0，所以它位于起始线。
2. 然后它使用margin-right为-100%将下一个项目（项目2）拉回到起始线。

在项目2自己的CSS属性生效之前，它已经被项目1拉到了起始线。

然后，项目2使用margin-left属性将其自身定位到2列和2个间距的百分比值，使其正好位于第三列。

项目2也具有margin-right属性，它将下一个项目（项目3）拉到起始线。

在项目3自己的CSS属性生效之前，它已经被项目2拉到了起始线。

然后，它通过margin-left属性（其值为4列和4个间距的百分比）定位到第5列。

它将下一个项目拉到起始线，并且对于总项目数，此模式重复。

如果任何项目需要在新行开始，则必须使用clear: left属性清除其前一个项目的浮动。

为了将其与第一列对齐（位于起始线），它必须将其margin-left属性更改回0以将其放置在那里。

这就是隔离技术的工作原理。现在您已经了解了它，我们可以用它来解决亚像素舍入问题。

解决亚像素舍入错误

我们必须使用隔离技术手动定位每个项目，而Susy可以帮助我们做到这一点。

Susy有一个便捷函数可以帮助您跳过所有手动操作。它被称为gallery混合。

.social__list-item {
  @include gallery(1 of 10);
}

它输出的CSS使用了上面提到的隔离技术。

.social__list-item:nth-child(10n + 1) {
  margin-left: 0;
  margin-right: -100%;
  clear: both;
  margin-left: 0;
}
.social__list-item:nth-child(10n + 2) {
  margin-left: 10.20408%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 3) {
  margin-left: 20.40816%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 4) {
  margin-left: 30.61224%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 5) {
  margin-left: 40.81633%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 6) {
  margin-left: 51.02041%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 7) {
  margin-left: 61.22449%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 8) {
  margin-left: 71.42857%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 9) {
  margin-left: 81.63265%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 10) {
  margin-left: 91.83673%;
  margin-right: -100%;
  clear: none;
}

社交媒体区域恢复正常！

现在我们已经积累了一些动力，让我们更上一层楼，使布局响应式。

使布局响应式

响应式网站变得越来越重要，如果我不谈谈如何使用Susy创建响应式布局，那我就亏欠你了。

创建响应式布局的第一步是确保您熟悉媒体查询的工作原理。请特别注意文章中的移动优先媒体查询，因为我们将使用它们。

为简单起见，我们只创建一个具有两个断点的布局——一个用于从0px开始到700px结束的移动视图；另一个用于从700px开始的桌面视图。

在移动视图中，.content和.sidebar部分都占据视口100%的宽度。700px之后，.content和.sidebar将分别分成8列和4列。

如果您手动编写代码，它可能如下所示（使用Sass）

.content {
  /* Styles for mobile view go here */

  /* Styles for desktop view go here */
  @media (min-width: 700px) {
    width: 66.10169%;
    float: left;
    margin-right: 1.69492%;
  }
}

.sidebar {
  /* Styles for mobile view go here */

  /* Styles for desktop view go here */
  @media (min-width: 700px) {
    width: 32.20339%;
    float: right;
    margin-right: 0;
  }
}

您无需为移动视图创建任何样式，因为<div>块默认占用100%的宽度。但是，您需要确保一旦视口达到700px，桌面布局就会生效。

手动编写响应式布局与使用Susy编写响应式布局相同，只是Susy使事情变得更快。您使用完全相同的技术和媒体查询。

.content {
  /* Styles for mobile view go here */ 

  /* Styles for desktop view go here */
  @media (min-width: 700px) {
    @include span(8); 
  }
}

.sidebar {
  /* Styles for mobile view go here */ 

  /* Styles for desktop view go here */
  @media (min-width: 700px) {
    @include span(4 last); 
  }
}

这就是.content和.sidebar的内容。

接下来是社交媒体部分。这是它在移动视图中的样子。

每个项目不再占用10列中的1列，而是在移动视图中占用10列中的2列，您可以使用span(2 of 10)来实现这一点。

注意：您可能想知道为什么不使用1 of 5列。span(1 of 5)和span(2 of 10)之间存在细微差别，图片可以更好地解释这一点

由于涉及的间距数量不同，这些从根本上来说是不同的布局。您始终可以使用1 of 5选项，但我将坚持使用10，因为间距的大小将更接近12。

我们将再次调用gallery混合，并在每个项目下方添加一个间距，以在行之间提供一些分隔。

.social {
  /* ... Same styles as above */

  .social__list-item {
    @include gallery(2 of 10);
    margin-bottom: gutter(10); 
  }

  @media (min-width: 700px) {
    @include gallery(1 of 10); 
    margin-bottom: 0; 
  }
}

以下是我们到目前为止所做工作的示例

查看Zell Liew在CodePen上的笔 eidcj (@zellwk)。

使用Susy就像使用原生CSS一样。**关键区别在于Susy是一个数学天才。**

Susy非常擅长数学，它可以让您创建具有不同大小列的古怪非对称网格。

让我们尝试使用非对称网格创建CSS-Tricks的布局。

使用非对称网格创建布局

使用非对称网格时，声明列的方式略有不同。您使用Sass列表告诉Susy列数及其大小的比例。由于CSS-Tricks的内容宽度是侧边栏的两倍，因此列可以用2 1列表表示。这意味着有两列，其中一列是另一列的两倍宽。

您还需要在Susy的全局设置中将输出模式设置为isolate

$susy : (
  columns: 2 1, 
  output: isolate,
)

现在，我们不再说内容有8列，而是说内容有1列。如果您告诉Susy其位置，Susy就能智能地知道列的大小。在这种情况下，内容是第一个项目。

.content {
  @include span(1 first); 
}

同样，您需要让Susy知道侧边栏占用了多少列以及它位于何处。在这种情况下，侧边栏占据第二列，碰巧也是该行中的最后一项。

.sidebar {
  @include span(1 last);
}

它看起来会是这样的

非对称网格还有很多内容，需要一整篇文章才能向您展示如何使用Susy构建它们。我在我的博客上创建了一个简单的设计来解释非对称网格的概念，它使用以下内容作为示例。

此外，我在Learning Susy中全面介绍了如何创建非对称布局，并提供了一个更真实的示例，该示例基于Nathan Ford的设计。如果您想了解更多信息，可以购买这本书。

结论

好吧，我们已经完成了Susy的入门介绍，以及一些外围（但重要）的事项，如亚像素舍入错误。我希望您至少有点相信可以尝试使用Susy。

事实上，Susy的功能远不止我这里介绍的这些。因此，我将向您推荐我的书Learning Susy中的5个示例章节。阅读一下，您将了解如何使用Susy做更多的事情。此外，如果您有任何关于Susy或前端开发方面的问题，请随时与我联系。