1

我有一个基于 SCSS 的布局，我想在其中使用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 中有没有更好的方法来做到这一点？

4

2 回答 2

3

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

@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 的可读性有很多话要说。marginifymixin 并不是像 aclearfix或mixin 那样真正可重用的模式inline-menu：编写 mixin 不仅仅是为了节省击键次数。

于 2012-12-17T14:00:23.110 回答
0

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

.client-name {
  @extend .pvs; // this has the same padding properties as .pvs
}
于 2012-12-17T17:31:41.863 回答