前言
在前端开发中，许多时候我们需要对元素进行排版布局，其中包括垂直和水平等距离排列。 Sass 作为一门 CSS 预处理语言，可以帮助我们更方便地实现这些功能，提高开发效率。
在本文中，我们将探讨 Sass 实现垂直和水平等距离布局技巧，并提供可供学习和参考的代码示例。
垂直等距离排列
问题
在进行页面布局时，经常需要将一组元素垂直等距离排列。例如，如下图所示，我们需要将三个框一字排列，每两个框之间有相等的间隔距离。
解决方案
我们可以使用 Sass 的 mixin，通过对元素的 margin 和 padding 属性调整，实现垂直等距离排列。
-- -------------------- ---- -------
------ ------------------------ ------- -
-------- -----
--------------- -------
---------------- -------
------------ -------
- --------- -
----------- -------- - -------------- - -- - --
-------------- -------- - -------------- - -- - --
-
-在上述代码中，我们定义了一个名为 vertical-center 的 mixin，其中 $parent 表示父元素的高度，$child 表示子元素的选择器。我们使用 flex 布局，设置 flex-direction 为 column，表示子元素将会垂直分布。justify-content 和 align-items 分别设置为 center，意味着子元素将会居中对齐。
接着，我们通过计算得出子元素的 margin-top 和 margin-bottom 属性，保证子元素之间的距离相等。其中，(parent - height(child) * 3) / 2 表示父元素高度减去子元素高度的累计值再除以 2，即可计算出每个子元素相对于上下边缘的间距。
下面是使用该 mixin 的示例代码：
-- -------------------- ---- -------
------ -
------- ------
-------- ---------------------- ------
---- -
------ -----
------- -----
----------------- -----
-
-在上述代码中，我们设定容器 .block 的高度为 100px，调用 vertical-center mixin，传入参数 100px 和 .box，让 box 元素在 .block 容器内垂直等距离排列。
学习和指导意义
使用 Sass 的 mixin，我们可以避免重复编写样式代码。该方法实现灵活、简单，只需在元素内加入指定的 mixin，便可得到所需的效果。对于类似于垂直等距离排列的需求，我们只需调用 vertical-center mixin 即可，避免了对每个元素进行设置的冗余步骤，提高了开发效率。
同时，该方法还能让我们更方便地灵活调整样式，满足不同的需求。 例如，想改变每一个子元素之间的间距，只需要调整 $parent 的值即可。
水平等距离排列
问题
另外，我们也经常需要将一组元素水平等距离排列。例如，如下图所示，我们需要将三个框等间距地水平排列。
解决方案
与垂直等距离排列类似，我们可以通过 mixin 调整元素的 margin 和 padding 属性来实现水平等距离排列。
-- -------------------- ---- -------
------ -------------------------- ------- ----- -
-------- -----
---------------- -------
- --------- -
------------ -------- - ------------- - - - ---- - -- - --
------------- -------- - ------------- - - - ---- - -- - --
-
- --------------------------- -
------------ -----
-
-在上述代码中，我们定义了一个名为 horizontal-center 的 mixin，其中 $parent 表示父元素的宽度，$child 表示子元素的选择器，$gap 表示子元素之间的间隔距离。我们同样使用 flex 布局，设置 justify-content 为 center，意味着子元素将会水平居中对齐。
接着，我们计算得出子元素的 margin-left 和 margin-right 属性，保证子元素之间的距离相等。其中，($parent - width($child) * 3 - $gap * 2) / 2 表示父元素宽度减去所有子元素宽度和间隔距离的累计值再除以 2，即可计算出每个子元素相对于左右边缘的间距。我们使用伪类 :not(:first-child)，给除第一个子元素以外的元素，添加 margin-left 的间隔距离。
下面是使用该 mixin 的示例代码：
-- -------------------- ---- -------
------ -
------ ------
-------- -----
-------- ------------------------ ----- ------
---- -
------ -----
------- -----
----------------- -----
-
-在上述代码中，我们设定容器 .block 的宽度为 300px，调用 horizontal-center mixin，传入参数 300px、.box 和 20px，让 box 元素在 .block 容器内水平等距离排列。
学习和指导意义
通过 Sass mixin 的方法，我们能够方便快捷地实现水平等距离排列的需求。该方法的调用形式简单明了，指定各个参数后即可实现所需的效果，避免了冗余的样式代码，提高了代码的可维护性。此外，该方法还可以为我们提供更好的灵活性和控制度，例如，如需调整子元素之间的间隔距离，我们只需要调整 $gap 的值即可。
总结
Sass 的 mixin 可以帮助我们轻松实现垂直和水平等距离排列，在提高开发效率的同时，也为前端开发者带来了更多的控制性和灵活性。 希望本文能对你掌握 Sass 简单实用的布局技巧有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646209ef968c7c53b035ea0a