/ SASSはmixinのすべてのプロパティに重要な追加をサポートしていますか。 - sass、compass-sass

SASSはmixinのすべてのプロパティに重要な追加をサポートしていますか? - サス、コンパス・サス

私は現在、 コンパスフレームワーク そして、それが役に立つCSS3ミックスインのすべてです。 border-radius(5px) ミックスインし、それに由来するすべてのプロパティをマークします。 !important

もっと少なく 適用することは可能です !important 呼び出しの後にそれを単に指定することによってミックスインのすべてのプロパティに

.myMixin(@x) {
border-radius: @x;
-moz-border-radius: @x;
}

.myClass {
.myMixin(5px) !important;
}

にコンパイル

.myClass {
border-radius: 5px !important;
-moz-border-radius: 5px !important;
}

これは可能ですか? SASSそれとも、私は重要なパラメータでミックスインを書き直す必要がありますか?

@mixin my-border-radius($value, $important: false) {
border-radius: @value if($important, !important, null);
....
}

回答:

回答№1は26

答えはあまりにも明白すぎる…

!important 単にプロパティ値の一部として指定できます

border-radius(5px !important);

回答№2については4

Canderの答えは、他の属性が続かない単純な変数に対して機能します。遷移プロパティのように、より複雑なCSSの場合は、そうすることができます。


@ミキシン遷移($ duration、$ content:ヌル) { -webkit-transition:すべての$期間の線形$コンテンツ。 -moz-transition:すべての$期間の線形$コンテンツ。 -o-transition:すべての$ duration linear $ content 遷移:すべての$ duration linear $ content。 }

私は $content 変数として設定し、 null。これで、mixinをsimpleと呼びます。

@include transition(0.3s);

あなたが追加したい場合 !important、 つかいます

@include transition(0.3s, !important);

ありがとう!


回答№3の場合は1

混入します:

@mixin verlauf($color1, $color2) {
background: $color1;
background: -moz-linear-gradient(top, $color1 0%, $color2 100%);
background: -webkit-linear-gradient(top, $color1 0%,$color2 100%);
background: linear-gradient(to bottom, $color1 0%,$color2 100%);
}

SCSS:

 @include verlauf(#607a8b !important, #4b6272 !important);

結果:

background: #607a8b !important;
background: -moz-linear-gradient(top, #607a8b !important 0%, #4b6272 !important 100%);
background: -webkit-linear-gradient(top, #607a8b !important 0%, #4b6272 !important 100%);
background: linear-gradient(to bottom, #607a8b !important 0%, #4b6272 !important 100%); }

それは2つ(それ以上)の変数mixinでも動作します。