作为 Web 设计师，使用网格确实是交付高质量网站或 Web 应用程序所能做的最好的事情之一。网格被认为是网页设计中最重要的组成部分之一，它能够构建您的网页并创造一种独特的节奏，让一切保持整洁。由于 CSS 网格布局模块和 flexbox 的创新实施，我们已经可以为我们的下一个网站/网络应用程序创建令人惊叹的布局。不过，编写特定布局可能会遇到很多麻烦，因为您需要记住大量直观的属性。幸运的是，这个问题也有解决方案。我们可以利用多种工具的潜力，使我们能够使用 Foundation 和 Bootstrap 等流行的 CSS 框架为网站设计网格。继续阅读以了解您想要了解的有关使用 Sass 和 Susy 的所有信息——这两个流行的框架用于构建出色的网格系统。
Sass 和 Susy 有什么特别之处？
与 Bootstrap 或 Foundation 等传统框架不同，Sass 和 Susy 相对容易学习。另外，如果您熟悉 Sass，那么学习 Susy 是轻而易举的事。它没有加载大量默认样式选项。 Susy 本身就是一个网格布局系统，可以让你更有效地专注于你的设计。
开始使用 Susy 创建完美的网格
Susy 专为与 Compass（一种开源 CSS 创作框架）配合使用而设计，非常易于安装和设置。 Susy 与几乎任何 Sass 工作流程兼容，允许您创建完美的网格。要将 Susy 安装到您的系统上，只需在您的终端中运行以下命令：
$ gem install susy
接下来，您需要设置新项目。如果您使用的是 Compass 框架，那么转到您的 config.rb 文件并添加
require 'susy'
以使用它。此外，您还需要添加
@import "susy";
到主 SCSS 文件中，以便将 Susy 导入到您的 Web 项目中。最后，在项目文件夹中创建一个 index.html 文件。该文件将用于存储标记并将其链接到样式表。
现在，使用 Susy 构建网格需要遵循的步骤
看看我们期待在本教程中实现的目标：
在您的项目中执行了运行 Susy 的步骤之后，是时候创建您的第一个布局了。看一下基本网页布局的外观：
以下是相同的步骤：
第 1 步 - 为网格定义参数
查看以下语法，该语法用于在主 SCSS 文件开头可用的 Sass 映射中定义网格参数：
$ gem install susy
下面列出了一些需要在 Sass 映射中定义以创建网格的重要事项：
- 将用于形成网格的列数
- 容器的最大宽度。忽略在此处定义值会将容器的宽度设置为视口宽度的 100%
- Box-sizing – 此选项的默认值设置为“content-box”。但是，您可以将其替换为“border-box”。
- 装订线——默认情况下，Susy 将装订线作为列的右侧边距，并位于列宽的四分之一处。但是，您可以选择更改装订线比率或选择使用装订线位置来决定装订线的行为。
- 调试图像 – 将此字段的值设置为“显示”将显示展示列网格的特定背景图像。
第 2 步 - 为网格创建基本布局
这是 HTML 结构，其中包括页眉、带有文章的主要内容区域、侧边栏和页脚：
$ gem install susy
从上面的标记中可以看出，Susy 完全依赖 CSS 和 Sass 来自定义网格。 Span mixin 是允许您使用 Susy 创建网格的关键功能。从上图的基本网页布局图中可以看出，我们倾向于让页眉和页脚占据容器宽度的 100%。另外，我们还希望
<div class="article">
和
<aside class="sidebar">
元素在十二列网格中分别占用八列和四列。为此，您只需使用如下所示的 span mixin：
$ gem install susy
与上述 span mixin 相关的两个值得注意的点包括：
- Susy 依赖于上下文。这意味着，我们可以为 <div class=”article”> 元素编写 @include span(8)，它会产生相同的结果，因为我们已经在 Sass 映射中将布局定义为四列。
- 我们在 mixin 中添加了“last”一词，以便将 <aside class=”sidebar”> 作为行中的最后一项。这样做将通知 Susy 有关删除相应元素上可用的右侧边距的信息。
此外，通过观察 CSS 文件，您可以看到上述 Sass 将编译为以下内容：
$ gem install susy
在上面的代码片段中，您可以发现 Susy 已经根据 Sass 映射中指定的设置自动计算了列宽和间距。在这里，请记住在您的元素中包含一些虚拟内容、填充和背景颜色，因为 Susy 没有任何默认样式。
第 3 步 - 清除页脚
浮动元素时，不要忘记清除页脚。与此相关的代码片段如下所示：
$ gem install susy
第 4 步 - 将“Container”Mixin 包含到“Wrapper”元素中
执行此步骤是为了将内容呈现为最大宽度，然后通过简单地将左右边距设置为“自动”将其定位到网页的中心，如下面的代码所示：
$ gem install susy
这样我们就完成了使用 Sass 和 Susy 创建网格（图片显示在本文开头）的工作。
结论
希望以上帖子能帮助您收集有关使用 Susy 和 Sass 创建网格的有用信息。因此，下次您考虑以无代码的方式创建简单或复杂的布局时，阅读这篇文章将成为一个很好的节省时间的方法。