对 SCSS (Sass) Mixin 进行分组答案

【问题标题】：Grouping SCSS (Sass) Mixins对 SCSS (Sass) Mixin 进行分组
【发布时间】：2012-02-08 11:33:56
【问题描述】：

将一些 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}

这方面的事情可能吗？

谢谢！

【问题讨论】：

标签： css sass mixins

【解决方案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; }

【讨论】：

太棒了。感谢您对 DRY 的见解，并感谢您提供有关语法的提示。

【解决方案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 会重复代码。这对于较大的代码块特别有用，例如清晰的修复。但是 mixin 确实有自己的位置。

说到有自己的位置……!important真的有必要吗？ ;-)

【讨论】：