分组SCSS（Sass）Mixins

Question

将一些CSS转换为Sass，例如：

.ptn,
.pvn,
.pan{padding-top:0px !important}

到这个

@mixin ptn {padding-top:0px !important}
@mixin pvn {padding-top:0px !important}
@mixin pan {padding-top:0px !important}

但希望我能做更像这样的事情

@mixin ptn,
@mixin pvn,
@mixin pan {padding-top:0px !important}

是否可以沿着这些方向发展？

谢谢！

Answer 1

怎么样

@mixin nopadding{ padding-top:0px !important }

.ptn,
.pvn,
.pan{ @include nopadding }

？ Sass是关于可重用性的，所以试着通过将代码分解为新的mixin来保留代码DRY。

另外你可以这样写：

@mixin nopadding{ padding-top:0px !important }

@mixin anothermixin{ @include nopadding; ... }

normalselector{ @include anothermixin; }

Answer 2

或者，您可以使用@extend功能更清洁，具体取决于您的目的。

所以如果你有：

.ptn { padding-top:0px !important; }

你可以在你的代码中的任何其他地方执行此操作（它不需要它用于作为范围的目的，如mixins那样）：

.pvn { @extend .ptn; /* pvn-specific rules can still go here */ }

.pan { @extend .ptn; /* pan-specific rules can still go here */}

这将输出：

.ptn, .pvn, .pan { padding-top:0px !important; }

.pvn { /* pvn-specific rules can still go here */ }

.pan { /* pan-specific rules can still go here */ }

这可能比使用mixins更清晰，但会复制代码。这对于较大的代码块特别有用，例如明确的修复。但是mixins确实有它们的位置。

说到有自己位置的事情...... !important真的有必要吗？ ; - ）