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

( nullSass 3.2+ で利用可能) はここでその魔法を実行します: 変数が の場合、そのnullプロパティは生成されません。ただし、 の使用をあきらめる必要があります!important(ほとんどの人は、とにかく最後の手段としてのみ使用する必要があると主張します)。この mixin に依存すると、かなりの膨張がmargin: 10px 0発生します。これは、常に省略形 ( ) よりも長い形式が使用されるためです。そのため、責任を持って使用するか、必要に応じて省略形を生成するより強力な mixin を作成する必要があります。

とはいえ、この目的 (マージンの追加) に mixin を使用すると、コードの可読性が低下します。ソース全体を見るまで、名前は意味がありませんでした。バニラ CSS の可読性については、多くのことが言えます。mixin は、 aやmixinmarginifyのような再利用可能なパターンではありません。mixin を書くことは、キーストロークを節約することだけではありません。clearfixinline-menu

于 2012-12-17T14:00:23.110 に答える
0

結局、ミックスインをまったく使用しなくなりました。代わりに、CSS ルールをそのままにして、あまり文書化されていない という機能を使用しまし@extendた。見よ!:

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