如何在SCSS中实现OOCSS的间隔模块？

Question

我有一个基于SCSS的布局，我想在其中使用spacing module from OOCSS。

OOCSS模块是纯CSS - ptl，例如，代表padding-top: large，其中large是一个定义的值(默认情况下为20px)。

我想用SCSS来增强它。到目前为止，我已经能够用SCSS变量替换固定值，所以如果我想(我不想)，我可以在一个地方更改这些值：

$spacing-small: 5px;
$spacing-medium: 10px;
$spacing-large: 20px;
...
.pts,.pvs,.pas{padding-top:$spacing-small !important}

现在我希望能够使用ptn、pvs等作为mixins，所以我可以这样做：

.client-name {
  @include spacing-pvs; // this has the same padding properties as pvs
}

我在语法上很灵活，但这是我感兴趣的功能。

我能想到的唯一方法就是手动定义每个单独的混合：

@mixin spacing-pvs {
  padding-top: $spacing-small !important;
  padding-bottom: $spacing-small !important;
}
.pvs { @include spacing-pvs; }

但是大约有56种风格/混音。像这样单独地做每一个都将是编写和维护的痛苦。

在SASS/SCSS中有没有更好的方法来做到这一点？

Answer 1

我最终完全不再使用mixins。相反，我保留了CSS规则的原样，并使用了这个文档较少的特性，称为@extend。看！：

.client-name {
  @extend .pvs; // this has the same padding properties as .pvs
}

Answer 2

最有效的混入是这样的(你需要一个类似的混入来填充，或者添加一个额外的参数来在边距/填充之间切换)：

@mixin marginify($t: null, $r: null, $b: null, $l: null) {
    margin-top: $t;
    margin-right: $r;
    margin-bottom: $b;
    margin-left: $l;
}

.test {
    @include marginify($t: 10px, $b: 10px);
    color: green;
}

这将生成以下内容：

.test {
  margin-top: 10px;
  margin-bottom: 10px;
  color: green;
}

null (在Sass 3.2+中可用)在这里发挥了它的魔力:如果一个变量是null，那么它不会为它生成一个属性。然而，你必须放弃使用!important (大多数人会争辩说，无论如何你都应该把它作为最后的手段)。依赖这种mixin将引入相当多的臃肿，因为手写形式总是通过速记(margin: 10px 0)使用，所以您需要负责任地使用它，或者编写一个更强大的mixin，以便在适当的情况下生成速记。

也就是说，使用混入来达到这个目的(增加页边距)确实会降低代码的可读性。在我查看整个源代码之前，这些名称毫无意义。关于普通CSS的可读性，有很多要说的。marginify mixin并不像clearfix或inline-menu mixin那样是一个可重用的模式:编写mixin不仅仅是为了节省击键。