Sass＆Susy –用于创建很棒的网格的流行框架

As a web designer, working with grids is indeed one of the best things that you can do for delivering a top-quality website or web application. Believed to be one of the most vital components of a web design, a grid is capable of structuring your web pages and create a unique rhythm that can keep everything mess-free. Thanks to the innovative implementation of CSS grid layout modules and flexbox, it has become possible for us to create stunning layouts for our next website/web app. Still, there can be a lot of hassles associated with coding up a particular layout simply because you’ll be expected to remember tons of intuitive properties. Fortunately, there’s a solution to this problem as well. We can leverage the potential of several tools that can enable us to design grids for websites using popular CSS frameworks like Foundation and Bootstrap. Stay on this post to find everything about using Sass and Susy – two popular frameworks for achieving an excellent Grid System.

作为Web设计师，使用网格确实是交付高质量网站或Web应用程序可以做的最好的事情之一。 网格被认为是网页设计中最重要的组成部分，它能够构造您的网页并创建独特的节奏，使一切保持零乱。 得益于CSS网格布局模块和flexbox的创新实现，我们有可能为下一个网站/网络应用创建令人惊叹的布局。 尽管如此，编码特定的布局仍可能带来很多麻烦，仅仅是因为您会想起许多直观的属性。 幸运的是，这个问题也有解决方案。 我们可以利用多种工具的潜力，使我们能够使用Foundation和Bootstrap等流行CSS框架为网站设计网格。 继续阅读这篇文章，以查找有关使用Sass和Susy的所有信息–这两个流行的框架可实现出色的网格系统。

Sass和Susy有什么特别之处？ (What’s so special about Sass and Susy?)

Unlike the traditional frameworks like Bootstrap or Foundation, Sass and Susy are relatively easy to learn. Also, if you’re abreast with Sass, then learning Susy would become a breeze. Not loaded with tons of default styling options, Susy is itself a grid layout system that allows you to concentrate on your design more effectively. Talking about Susy, well you’re free to pick and choose what works best for you.

与传统的框架(如Bootstrap或Foundation)不同，Sass和Susy相对易于学习。 另外，如果您与Sass并驾齐驱，那么学习Susy将会变得轻而易举。 Susy本身未安装大量默认样式选项，它本身是一个网格布局系统，可让您更有效地专注于设计。 说到Susy，您可以自由选择最适合自己的东西。

Susy入门以创建完美的网格 (Getting Started with Susy for creation of a perfect grid)

Specially designed to work with Compass (an open source CSS authoring framework) Susy is quite easy-to-install and setup. Compatible with just about any Sass work flow, Susy allows you to create a perfect grid. For installing Susy onto your system, just run the following command in your terminal:

Susy专门设计用于与Compass(一个开源CSS创作框架)一起使用，非常易于安装和设置。 Susy与几乎所有的Sass工作流程兼容，可让您创建一个完美的网格。 要将Susy安装到系统上，只需在终端中运行以下命令：

$ gem install susy

$ gem install susy

Next, you need to set up the new project. If you’re using the Compass framework, then go to your config.rb file and add require 'susy' to it. Additionally, you’ll also be required to add @import "susy"; into the main SCSS file for importing Susy into your web project. Finally, create an index.html file within the project folder. This file would be used for storing the markup and linking the same to the style sheet.

接下来，您需要设置新项目。 如果您使用的是Compass框架，请转到config.rb文件并向其中添加require 'susy' 。 此外，您还需要添加@import "susy"; 到主SCSS文件中，以将Susy导入您的Web项目。 最后，在项目文件夹中创建一个index.html文件。 该文件将用于存储标记并将其链接到样式表。

现在，使用Susy构建网格所需遵循的步骤 (Now, the steps that need to be followed for building a grid using Susy)

Have a look at what we’re looking forward to achieve in this tutorial:

看看我们期待在本教程中实现什么：

After having performed the steps for running Susy in your project, it’s time to create your very first layout. Have a look at how the basic webpage layout would look like:

在执行了在项目中运行Susy的步骤之后，是时候创建您的第一个布局了。 看看基本的网页布局是什么样的：

Here are the steps for the same:

这是相同的步骤：

步骤1-定义网格参数 (Step 1- Define parameters for grid)

Have a look at the below syntax that is used for defining parameters for the grid in the Sass map available towards the beginning of the main SCSS file:

看一下下面的语法，该语法用于在Sass映射中为主SCSS文件的开头定义网格的参数：

$susy: (
  columns: 12,
  container: 1200px,
  gutters: 1/4,
  debug: (image: show)
  global-box-sizing: border-box,
);

$susy: (
  columns: 12,
  container: 1200px,
  gutters: 1/4,
  debug: (image: show)
  global-box-sizing: border-box,
);

Here’s a list of a few vital things that need to be defined within the Sass map for creating a grid:

这是在Sass映射中创建网格需要定义的一些重要事项的列表：

• Count of columns that would be used in the formation of a grid
  用于形成网格的列数
• Maximum width of the container. Ignoring to define a value here will set the container’s width to be 100% of the viewport’s width
  容器的最大宽度。 忽略此处定义的值会将容器的宽度设置为视口宽度的100％
• Box-sizing – Default value for this is set to ‘content-box’. However, you can replace it by ‘border-box’.
  Box-Sizing –此项的默认值设置为“ content-box”。 但是，您可以将其替换为“边框”。
• Gutters – By default, Susy has gutters as the right-hand margins on the columns and at one quarter of the column width. However, you may choose to change the gutter ratio or opt for using gutter-position for deciding the behavior of gutters.
  装订线–默认情况下，Susy在列上以及列宽的四分之一处具有装订线作为右边距。 但是，您可以选择更改装订线比例或选择使用装订线位置来确定装订线的行为。
• Debug image – Setting the value for this field to ‘show’ will display a specific background image showcasing the column grids.
  调试图像–将此字段的值设置为'show'将显示特定的背景图像，其中显示了列网格。

第2步-为网格创建基本布局 (Step 2- Create a basic layout for the grid)

Here is the HTML structure which includes a header, the main content area with an article, a sidebar and a footer:

这是HTML结构，其中包括标题，带有文章的主要内容区域，侧边栏和页脚：

<body>
  <div class="wrapper">
    <header>
      Header
    </header>
    <div class="article">
      Right Side Content Here
    </div>
    <aside class="sidebar">
      Sidebar Content Here
    </aside>
    <footer>
      Footer
    </footer>
  </div>
</body>

<body>
  <div class="wrapper">
    <header>
      Header
    </header>
    <div class="article">
      Right Side Content Here
    </div>
    <aside class="sidebar">
      Sidebar Content Here
    </aside>
    <footer>
      Footer
    </footer>
  </div>
</body>

As is visible in the above markup, Susy purely depends on CSS and Sass for customization of the grid. Span mixin is the critical feature that allows you to create a grid using Susy. As it can be seen in the above image of a basic web page layout, we are inclined on having our header and footer take up 100% of the container’s width. Plus, we also want the <div class="article"> and <aside class="sidebar"> elements to consume eight columns and four columns respectively in the twelve-column grid. For achieving this, you simply need to use span mixin as displayed below:

从上面的标记中可以看出，Susy完全依靠CSS和Sass来定制网格。 Span mixin是一项关键功能，可让您使用Susy创建网格。 从上面的基本网页布局图像可以看出，我们倾向于使页眉和页脚占据容器宽度的100％。 另外，我们还希望<div class="article">和<aside class="sidebar">元素在十二列网格中分别占用八列和四列。 为此，您只需要使用如下所示的span mixin：

/* SCSS */
.article {
  @include span(8 of 12);
  /* Style Define here */
}
.sidebar{
  @include span(4 of 12 last);
  /* Style Define here */
}

/* SCSS */
.article {
  @include span(8 of 12);
  /* Style Define here */
}
.sidebar{
  @include span(4 of 12 last);
  /* Style Define here */
}

Two noteworthy points related to above span mixin include:

与以上跨度mixin有关的两个值得注意的点包括：

1. Susy is dependent on context. That means, we can write @include span(8) for the <div class=”article”> element and it would produce same result simply because we’ve already defined the layout as four columns in the Sass map.
   Susy取决于上下文。 这意味着，我们可以为<div class =“ article”>元素编写@include span(8)，并且由于我们已经在Sass映射中将布局定义为四列，因此它会产生相同的结果。
2. We’ve added the word ‘last’ to mixin so as to have <aside class=”sidebar”> as the last item in the row. Doing this will inform Susy about the removal of right-hand margin available on the respective element.
   我们在混入中添加了单词“ last”，以便将<aside class =“ sidebar”>作为行中的最后一项。 这样做将通知Susy有关删除相应元素上可用的右手边距的信息。

Additionally, on observing the CSS file, you can see that the above mentioned Sass will compile to the following:

此外，在观察CSS文件时，您可以看到上述Sass将编译为以下内容：

.article {
  width: 65%;
  float: left;
  margin-right: 2%;
  margin-bottom:15px;
}
.sidebar {
  width: 33%;
  float:right;
}

.article {
  width: 65%;
  float: left;
  margin-right: 2%;
  margin-bottom:15px;
}
.sidebar {
  width: 33%;
  float:right;
}

In the above code snippet, you can find that Susy has automatically calculated the column widths along with gutters on the basis of settings that have been specified in the Sass map. Here, do remember to include some dummy content, padding and a background color on your elements because Susy doesn’t come with any default styling.

在上面的代码片段中，您可以找到Susy根据在Sass映射中指定的设置自动计算了列宽和装订线。 在这里，请记住要在元素上包括一些虚拟内容，填充和背景色，因为Susy没有任何默认样式。

步骤3-清除页脚 (Step 3- Clear the footer)

While floating the elements, don’t forget to clear the footer. Code snippet associated with this is displayed below:

在浮动元素时，不要忘记清除页脚。 与此相关的代码段显示如下：

header {
  padding: 20px;
  background-color: #c12a2a;
  margin-bottom:15px;
}
.article {
  @include span(8);
  padding: 20px;
  background: #c64c4c;
}
.sidebar{
  @include span(4 last);
  padding: 20px;
  background: #400d0d;
}
footer {
  clear: both;
  padding: 20px;
  background: #ff4848;
}

header {
  padding: 20px;
  background-color: #c12a2a;
  margin-bottom:15px;
}
.article {
  @include span(8);
  padding: 20px;
  background: #c64c4c;
}
.sidebar{
  @include span(4 last);
  padding: 20px;
  background: #400d0d;
}
footer {
  clear: both;
  padding: 20px;
  background: #ff4848;
}

步骤4-将“容器” mixin包含到“包装器”元素中 (Step 4- Include ‘container’ mixin into the ‘wrapper’ element)

This step is performed for rendering the content a maximum width, followed by positioning it towards the center of the webpage by simply setting the right and left margins to ‘auto’ as shown in the below code:

执行此步骤以使内容呈现最大宽度，然后通过简单地将左右边距设置为“自动”，将其定位在网页的中心，如以下代码所示：

div.wrapper {
  @include container;
}

div.wrapper {
  @include container;
}

With that we’re done with creating a grid (the image is displayed in the beginning of this post) using Sass and Susy.

这样，我们就完成了使用Sass和Susy创建网格的操作(图像显示在本文的开头)。

结论 (Conclusion)

Here’s hoping the above post would have helped you gather useful information about creating a grid using Susy and Sass. So, the next time you think about creating simple or complex layouts in a code-free way, following this post would turn to be a good time-saver.

希望以上文章能帮助您收集有关使用Susy和Sass创建网格的有用信息。 因此，下次您考虑以无代码的方式创建简单或复杂的布局时，遵循本文将节省大量时间。

翻译自: https://www.script-tutorials.com/sass-susy-popular-frameworks-for-creating-awesome-grids/