グループSCSS（サス）ミックスイン

Question

は、例えば、サスにいくつかのCSSに変換：この

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

へ

.ptn, 
.pvn, 
.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は再利用可能性に関するものなので、コードDRYを新しいmixinに分割してください。

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

これは、共同を複製するだろうミックスインを使用するよりもクリーンな出力とすることができますde。これは、明確な修正のような、より大きなコードブロックに対しては特に便利です。しかしミックスインは彼らの所在を持っています。

その場を持っているものといえば······!importantは本当に必要ですか？ ;-)