如何使用Susy和Breakpoint创建灵活的布局

作者: Peter Berry

创建日期: 12 七月 2021

更新日期: 16 六月 2024

内容

问题
苏西
货柜
跨度
设置默认值
填充列
管理媒体查询
断点和Susy
使用Mixins掌握布局

由于涉及到数学运算，因此创建响应式布局可能具有挑战性，因此设计师通常会求助于框架和/或Sass来简化流程。许多框架都基于12列网格，但是响应站点并不总是适合这种结构。在这里，我将向您展示如何使用两个Sass扩展名来创建真正灵活的布局，以超越12列网格。

问题

设计响应式布局可能很困难，因为它涉及到计算不同断点处的容器，行，列和装订线的宽度。框架可以通过为常见断点创建预设来提供帮助。例如，Bootstrap 3为我们提供了一个12列的网格，其中包含四个媒体查询断点。然后，您使用使您的内容占据网格中一定数量斑点的类，并且装订线始终占据30px。

在大多数情况下，这种方法都很出色，但是存在两个问题。首先，将这些类添加到标记中可能会有些冗长。假设您想要一种布局，该布局使用移动设备上的所有列，小型设备上的12列中的六列以及中型设备上的四列。该标记可能看起来像这样：

h2>服务/ h2> div>文章> img src =“ images / icon-exoticpets.svg” alt =“ Icon”> h3> Exotic Pets / h3> p>我们为爬行动物，啮齿动物，鸟类和其他动物提供专门护理外来宠物。

第二个问题是这些类将布局信息添加到HTML中，并使代码难以更新，尤其是在大型安装中。随着布局变得越来越复杂，您可能最终会得到一些类似于以下代码的代码：

div>

更大的问题是您几乎没有灵活性。您的框架应该照顾好数学，因为这是最困难的部分，但它不应该决定布局的指标。谁使这些框架成为您的老板？

苏西

Susy的简单承诺是，让您担心设计同时照顾到数学问题。它的核心是一组Sass mixins，用于在完全灵活的网格系统中计算宽度。

首先通过以下导入命令将库导入到您的项目中：@import“ susy”;。这使您可以访问Susy的网格框架，该框架很难实现。在最基本的形式下，您只需要学习两个mixin。首先是容器mixin。

货柜

容器可帮助您控制元素的宽度如何适应不同的断点。使用Susy，我们可以随时在任何元素内重新定义容器，而不必在HMTL代码中添加任何其他类。

假设我要布置另一个网站。如果要在HTML元素中创建容器，可以在声明中添加一个include，如下所示：

#welcome {文章{@include container（70％）; } //文章 }

这将使具有类截面的项目像自举容器一样工作，而无需在HTML中添加.container类-这意味着我们的HTML可以具有更多的语义。

div id =“ welcome”>文章> h1>欢迎来到Landon酒店/ h1> p>最初的Landon在西伦敦市中心住了50年。从剧院到餐厅到历史名胜，西区附近都有适合每个人的东西。不容错过的Rooftop Cafe是旅行者和当地人喝酒，用餐和畅谈的好地方。

除了使我的HTML更具可读性之外，这还使更新更容易。当我们使用诸如内容和场景之类的类时，很容易重新定义这些元素在布局方面的含义，而不必考虑要增加多少类以使内容按照我们希望的方式工作。

跨度

在Susy中，您使用跨度创建行和列。要创建一个占用三列之一的元素，您可以编写如下内容。

#usefulinfo {部分{@include span（1 of 3）; }}

真正重要的是，我们不必遵循特定数量的列，然后相应地调整元素。布局中的任何元素都只能占用当时我需要的空间。

这确实改变了您对列的思考方式。如果我使用的是Bootstrap，我会将上面的代码写为.col-sm-4，因为12列中的三分之一是四列。使用Susy，我不必考虑要扩展多少个单元；我可以简单地指定所需的空间量。当您不再考虑转换为特定数量的列时，您可以专注于布局的外观。

设置默认值

当然，在任何布局系统中，最好使用默认设置，因此我们不必在每个实例中都指定装订线的大小。为此，我们在Sass顶部修改了一个名为$ susy的变量：

$ susy：（列：12，容器：60em，装订线：1/4，装订线位置：内部）;

Susy有很多默认值，您可以用来设置默认网格，但是此基本设置将负责将类似Bootstrap的默认默认值放在一起。别忘了，Susy中的所有内容都是可自定义的，因此您永远不会与任何一个结婚，并且可以逐个标签地对其进行更改。

现在，当我们在容器mixin中使用@include命令时，默认网格将具有12列，并且该容器将以60em的宽度锁定，装订线槽的宽度为列的四分之一。如果我们想让我们前面的部分适合这个网格，我们可以这样写声明：

#usefulinfo {部分{@include span（4）; }}

这意味着每个部分占据12列中的4列。但是，我认为能够说一个元素占据“三分之一”列更有意义。如果需要将列偏移到某个位置，则可以使用以下表示法：

@include span（8 at 12 of 4）;

从12列网格的第四个位置开始，这使元素占据了八列。因此，在创建布局时，您可以专注于内容需要执行的操作，而不是设计如何适合现有的网格。

填充列

控制元素放置的另一种方法是填充列。这会在您的列的两边添加许多列空间。例如，您可以将一列向右移动七个单位，并从左侧向其填充一个单位，如下所示：

@include pad（7,1）;

这意味着，除了考虑正空间（元素应占用多少列）来进行布局之外，您还可以进行相反的操作，并根据内容两侧的间距来创建设计。

管理媒体查询

为了使事情真正具有响应性，您需要能够将列设置和设计与响应性断点结合在一起。为此，我们可以使用来自名为Breakpoint的库中的另一组mixins。

使用断点可以更轻松地处理布局中的媒体查询。通过简化用于创建媒体查询断点的语言来做到这一点。传统上，您使用以下规则创建这些规则：

@media（最小宽度：34em）和（最大宽度：62em）{.container {...}}

这将创建一个宽度范围，在这些宽度范围内声明会对您的布局产生影响。断点将这些调用封装到一个常识混合中，这样更容易编写：

.container {@include breakpoint（34em 62em）{...}}

调用也有所不同，因为我们可以轻松地在现有类中分配此名称。 Breakpoint的伟大之处在于它基于通用的布局需求做出假设。

断点规则也很容易学习。您只需要了解三件事：

如果在断点调用中仅包含一个数字，则断点将假定最小宽度的媒体查询调用
如果包含两个数字，则断点将假定您要指定两个数字之间的范围（如上例所示）
如果包含两个值，一个是字符串，则假定您正在发送混合中的特征值对，因此，如果您仍然可以按方向或任何其他特殊媒体查询规则发送

自2.2.1版以来，断点已折叠到Susy中。 Susy版本的工作方式与Breakpoint mixins一样，但是您使用susy-breakpoint而不是调用断点。可以像这样进行相同的调用：

.container {@include susy-breakpoint（34em 62em）{最大宽度：50％；左边距：自动；右边距：自动； }}

断点和Susy

将Breakpoint与Susy结合使用时，您将获得一个灵活的网格，可以轻松调整以适应不同的媒体查询声明。让我们看一下网站信息部分的HTML。

div id =“ hotelinfo”>文章id =“ usefulinfo”>部分id =“ arrivalinfo”> / section>部分id =“ services”> / section>部分id =“ accessibility”> / section> / article>文章id = “ greenprogram”> /文章> / div>！-hotelinfo->

结合Susy和Breakpoint，我们可以创建包含不同网格布局的媒体查询。在布局中，我有三个不同的部分，但我希望它们根据视口的宽度具有不同的规则。

在这两个不同的断点处，我们的布局行为截然不同。在右侧较大的断点处，每个部分占用三列。在较小的断点处，第一列占据视口的100％，而其他两列占据视口的一半。这就是使这些mixin如此强大的原因。表达这两种布局的代码很简洁：

部分{@include susy-breakpoint（650px）{@include span（1 of 3）; } // breakpoint @include susy-breakpoint（450px 650px）{＆.checklist {@include span（1 of 2）} // checklist} // breakpoint} // section

首先，我们为section标记中的任何元素设置默认值。如果这些元素到达的视口大于650像素，则它们将占据3个单元的网格，每个网格占用一个单元。

如果布局在450像素和650像素之间，则具有.checklist类（服务和可访问性部分）的元素将放入只有两列的全新网格中，并且每个元素将占据这些单元之一。

在这两个断点之间，到达信息占据了100％的网格。请注意，我们没有指定在450像素以下会发生什么情况。默认情况下会解决此问题-每个部分将占据视口的100％。