DRY Code：Sass Bourbon为什么要使用一些mixins？

Question

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

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

当你可以使用像

这样的普通css时

.div{
 margin: 10px;
}

Answer 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;
}

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