分组SCSS（萨斯）混入

Question

把一些CSS来萨斯，例如：

.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; } 

你可以做到这一点其他任何​​地方在你的代码（它不需要它之后去确定范围的目的，如混入做）：

.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 */ } 

这可以是比使用混入的清洁器的输出，这将重复所述共德。这对于更大的代码块尤其有用，如清除修复。但mixin确实有它们的位置。

说起事物有它们的地方......那是!important真的有必要吗？ ;-)