如何使用Susy：超强大的Sass网格

最新推荐文章于 2026-05-11 09:35:26 发布

翻译最新推荐文章于 2026-05-11 09:35:26 发布 · 470 阅读

标签

#java #python #javascript #css #less

Susy是一款Sass混入集，用于构建自定义网格布局，无需遵循固定网格哲学，提供强大的配置和默认设置。本文介绍了Susy的基础用法，包括span和container混入，以及如何使用Sass地图进行配置。

Susy是Sass mixins的强大集合，用于构建基于网格的布局。

Susy有什么了不起的？在本教程中，我们将向您展示使用Susy的基础知识，但以下是需要考虑的专业人士列表：

反框架 ：Susy不会对您施加任何特定的网格哲学。因此，您将无需放入CSS文件并直接使用类（就像使用Bootstrap这样的Framework一样）；相反，您将定义自己的网格规则，让Susy替您处理计算。
面向Mixin的方法 ：Susy不是框架。它没有千字节数，因为它不会输出您没有手动定义CSS规则。
强大的配置，明智的默认设置 ：Susy在其构建过程中使用配置规则，但不需要您学习一切就可以开始。

这三个简单的职业选手足以让Susy看起来不错。让我们开始吧！

建立

首先，您需要对Sass足够熟悉，才能编写和编译它。在撰写本文时，Susy实现了一些Sass功能，而LibSass （基于C的Sass编译器）目前不支持这些功能，因此您需要使用Ruby版本的Sass。首先安装Sass，然后学习如何使用watch命令，这对于与Sass以及Susy一起使用通常是必不可少的。

接下来，您需要在计算机上安装Susy。由于Susy唯一的依赖项是Sass本身，因此您可以从GitHub下载该项目的zip文件，并将Sass文件夹的内容复制到您的项目中。

接下来，您需要将Susy导入到Sass文件中。

@import "susy";

假设您所在的目录中包含Sass文件夹的内容。

你好专栏：第一个例子

Susy从根本上讲是一组mixin ，类似于Sass中的函数。这些混合文件在您的Sass代码内部被调用，当Sass编译器运行时，它将查看Susy文件中的混合文件定义并确定正确的输出。

Susy中最重要的mixin是span mixin，如下所示：

.content {
    @include span(20%);
}

span mixin还依赖于container mixin，它设置了Susy所谓的“布局上下文”。

.container {
    @include container(1180px);
}

Susy还允许您基于网格集中的预设列数来创建跨度：

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

Susy的功率远远超出了平均电网，因此比常规电网配置要少。让我们从一个简单的示例开始：9列布局。

.ninth {
        @include span(1 of 9);
}

萨斯地图

Susy允许您通过$susy变量设置配置。创建Sass贴图可让您确定有关Susy如何布置跨度的多个首选项。 Susy实现了一个layout混合，该混合输出输出配置图。这是默认设置，直接从Susy的文档中获取。

$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 4,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

您可以通过将任何特定设置添加到自己的$susy映射中来覆盖它们：

$susy: (
    columns: 16,
    last-flow: from
)

通常更改的选项是列数，装订线宽度和output选项。这些配置选项中的每一个都做不同的事情。

实际例子

在本教程中，我们将不介绍所有配置选项（ Susy的文档在解释它们方面做得很好）。取而代之，让我们来看一些如何使用Susy的实际示例。

跨度和容器混合

在这里，我们可以看到span和container mixins的基本用法：

注意：为了欣赏全角的列，请查看全屏版本。

此示例有一些注意事项。我们创建了人为设计的仪表板示例。我们还提供了一些JavaScript，可从uifaces.com API中获取伪造的用户图像。

Susy特定的部分是列。在此示例中，我们使用@include span()语法创建了一个响应式布局。我们还在一些地方使用SCSS的嵌套功能。请注意，Susy非常适合您的普通媒体查询语法。我们使用@include container;在.stats部分之外创建了一个@include container; 。

还应注意，在此特定示例中有嵌套的列。 .avatar元素嵌套在另一个Susy列中，这非常.avatar ，因为Susy默认情况下使用流体宽度。

布局简写

接下来，我们可以看到Susy的速记在布局上的用法，该网格的中间列比外面大。

在此示例中，我们使用了一些不同的选项，这些选项对您来说似乎很新。首先，我们使用Haml创建标记。 Haml是在Ruby之上构建HTML的空白敏感标记替代品。可以认为它有点像HTML的预处理器。

让我们看看我们的示例创建了什么。

.brick-list

默认情况下，这将创建一个<div>元素，并为其提供一类brick-list 。

- 30.times do |i|

该缩进线重复嵌套在同一缩进内的任何内容30次。这意味着输出的任何内容都将在我们上面使用.brick-list创建的div .brick-list 。 |i| 部分从0开始传递当前索引，它是循环的计数。因此，例如，在我们第五次通过循环时， i等于4 。

.col
      %img{src: "http://hhhhold.com/jpeg/700?v=#{i}"}

我们在30.times循环中看到了这一点。 .col创建一个带有col class的div 。 %img{...}创建一个<img>元素，花括号中的属性传递到该图像中。我们正在将hhhhold.com用于我们的占位符图像。这里的语法是Ruby哈希语法，在很多方面与JSON非常相似。

这些行的另一个重要部分是#{} ，它允许您打印出i索引变量（如果您想了解更多信息，这称为插值， Hugo Giraudel解释了您需要了解的所有内容）。我们在URL中使用此变量作为参数，以使加载的图像不尽相同。

Susy网格在此示例中是唯一的。我们用以下行设置一个网格变量：

$grid: (1 2 5 5 2 1);

该变量将在我们的span mixin调用中传递给Susy，并进行读取以创建具有六列的网格。 第一列的相对宽度为1，第二列的相对宽度为2，第三列的相对宽度为5，依此类推。

然后，我们将在整个示例中利用此网格，将.col div放置在第1、3和5列的起始位置，并使用nth-child CSS规则跨越2列。如果我们要修改此相同的网格，以使每列具有相同的相对列宽，则看起来像这样。

这是相同的示例，但布局不同。

如您所见，非常规网格是直接完成的任务，Susy使强大的网格控制成为一项令人愉快的任务。

结论

Susy提供了一种更灵活，更自以为是的方式来创建自己的网格布局，而不会强迫您采用一组预定CSS。由于具有这种灵活性，Susy可以很快地被学习并引入到项目中，而不必完全致力于在您创建的每个CSS声明中都使用它。

无论您确定Susy是否适合您，作为前端开发人员，您至少应该了解可以使用的所有预处理工具。它们正在成为现代开发人员的关键工具集。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-use-susy-superpowered-sass-grids--cms-22744