web-dev-qa-db-ja.com

SASSは、ミックスインのすべてのプロパティに！importantの追加をサポートしていますか？

私は現在 compassフレームワーク を使用しており、CSS3のミックスインに役立ちます。 border-radius(5px)ミックスインを使用し、それに由来するすべてのプロパティに!importantのマークを付けたい

[〜＃〜] less [〜＃〜] では、呼び出し後に指定するだけで、ミックスインのすべてのプロパティに!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);
    ....
}
sasscompass-sass
19
cander

答えはほとんど明白すぎます...

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

border-radius(5px !important);
29
cander

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

 
 @mixin transition（$ duration、$ content：null）{
 -webkit-transition：all $ duration linear $ content; 
 -moz-transition： all $ duration linear $ content; 
 -o-transition：all $ duration linear $ content; 
 transition：all $ duration linear $ content; 
}

_$content_変数を追加して、nullとして設定しました。これで、次のように簡単にミックスインを呼び出すことができます：

@include transition(0.3s);

_!important_を追加する場合は、

@include transition(0.3s, !important);

ありがとう！

8
Madalin

混入します：

@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つ（およびそれ以上）の可変ミックスインでも動作します！

2
Mario Wilhelm