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：

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

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

在SASS / SCSS中有更好的方法吗？

Answer 1

最有效的mixin就是这样（你需要一个类似的mixin来填充，或者添加一个额外的参数来在margin / padding之间切换）：

@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来生成如果合适的话。>

也就是说，为此目的使用mixin（添加边距）会降低代码的可读性。在我查看整个来源之前，这些名字毫无意义。关于vanilla CSS的可读性还有很多要说的。 marginify mixin实际上不是像clearfix或inline-menu mixin那样的可重用模式：编写mixin不仅仅是保存击键。

Answer 2

我最终根本没有使用mixins。相反，我按原样保留了CSS规则，并使用了这个名为@extend的记录较少的功能。看哪：

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

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

2 个答案: