css - 干代码 : Sass Bourbon why use some mixins?

Question

不确定这个问题是否属于这个讨论区，但我想知道在 Bourbon 中使用一些 mixins 的好处(如果有的话)。 Sass 的全部意义在于编写 DRY 代码，所以为什么要使用:

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

当你可以只使用普通的 css 时

.div{
 margin: 10px;
}

Answer 1

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

The benefits are, as I see them:

• Easier to define vertical rhythm in one fell swoop.
• More confidence in (re)moving components if you know their margins all push in the same direction.
• Components and elements don’t have to necessarily live in a certain order if their margins aren’t dependent on adjoining sides.
• Not being concerned with collapsing margins means one less thing to worry about.

您给出的示例实际上将编译为以下 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有关方向属性混合的更多信息。