DRY Code：Sass Bourbon 为什么要使用一些 mixin？答案

【问题标题】：DRY Code: Sass Bourbon why use some mixins?DRY Code：Sass Bourbon 为什么要使用一些 mixin？
【发布时间】：2015-10-15 15:35:12
【问题描述】：

不确定这个问题是否属于这个委员会，但我想知道在 Bourbon 中使用某些 mixin 的好处（如果有的话）。 Sass 的重点是编写 DRY 代码，所以为什么要使用：

.div{
 @import margin(10 10 10 10);
}

当你可以使用普通的 css 时

.div{
 margin: 10px;
}

【问题讨论】：

【解决方案1】：

Bourbon 的margin mixin 进行四次测量并将它们映射到相应的单向属性。我从来都不喜欢单向边距属性，但根据CSSWizardry，它们有以下好处：

在我看来，好处是：

更容易一举定义垂直节奏。

如果您知道组件的边距都向同一个方向推进，则对（重新）移动组件更有信心。

如果组件和元素的边距不依赖于相邻的边，则它们不必按特定顺序存在。

不用担心折叠边距意味着少了一件需要担心的事情。

您给出的示例实际上会编译为以下 CSS：

SCSS

.div {
    @import margin(10px 10px 10px 10px);
}

CSS

.div {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

有关方向属性混合的更多信息，请参阅Bourbon Docs。

【讨论】：