web-dev-qa-db-ja.com

Compass Mixinを使用して！importantを追加する

CSSにコンパスを使用していて、次のような関数またはmixinを使用している場合：

   @include background-image(linear-gradient(#a3cce0, #fff));

コンパスが生成するすべての行に！importantを追加する簡単な方法はありますか？

compass-sass
45
David

[〜＃〜] update [〜＃〜]：sassの新しいバージョンはこの構文をサポートします：

@include border-radius(5px !important);

これを行うだけです（@naoufalの回答に記載されています）。

---古い回答---

！importantをコンパスミキシングで使用することはできませんが、犯人はコンパスではありません。このためにsassを責める必要があります。

@include border-radius(5px) !important; #=> SASS Syntax Error
28
tothemario

次のようにミックスイン内に含めることができます：

@include border-radius(5px !important);

Compassは以下を出力します：

-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-ms-border-radius: 5px !important;
-o-border-radius: 5px !important;
border-radius: 5px !important;
85
naoufal

前回この問題が発生しましたが、より強力なセレクターでコンパススタイルをオーバーライドします。 html要素にIDを追加しました

span { @include border-radius(5px);}

span#no-radius { @include border-radius(0px); } // override
4
Thomas delissen

これを理解するのに何時間も費やしましたが、簡単なトリックがあります。 SASSファイルの先頭に次を追加します。

$i: unquote("!important");

あなたのスタイルで次のことを行います：

color: #CCCCCC $i;

出力は次のとおりです。

color: #CCCCCC !important;

完全なサンプル：

$i: unquote("!important");

.some-style {
    color: white $i;
}

出力：

.some-style {
    color: white !important;
}
3
John Angelini

この質問は、同様の問題の検索で出てきました、それはスポットです、しかし、私はそれを追加したかっただけです オプションの引数でSassのミックスインを作成する は、私が有用であるとわかった別の可能なアプローチです。

insetをimportantに置き換えて、!important必要なときに。

3
Shane Maiolo