cssプロパティ値の!defaultはどういう意味ですか?


82

Twitterのブートストラップコードには!default、末尾にが付いた多くのCSSプロパティがあります。

例えば

p {
  color: white !default;
}

何をし!defaultますか?

更新

はっきりしないのは悪い。BootstrapのSASS部分を使用しています。



1
今まで見たことがない。ブートストラップにのみ適用されるものである可能性があります。おそらく、それを探す何らかの解析があります
Huangism 2012年

回答:


52

Twitter Bootstrapは、私が見た限りではLESSを使用しています。一方、!defaultは実際にはSassの一部であり、Sass変数($var)にデフォルト値を与えるために使用されます。これにより、Sassあっても、指定されたコンテキストでは無効になります。

また、私はへの参照を見つけることができていませんでした!defaultLESSのドキュメント、および私の知識には、サスに排他的です。これはBootstrapのソースで見つかり、他の場所では見つかりませんでしたか?BootstrapのスタイルシートにSass / SCSSコードが表示されているのを正直覚えていないからです。

価値があるのは!、CSSで始まる唯一の有効なトークンはです!importantこれはすでに知っているかもしれません


1
OK、Bootstrapの新しいコピーをダウンロードして取得しましたが、これは明らかにBootstrapのソースからのものではありません
...– BoltClock

1
彼は間違っているか、BootstrapのSassポートを使用している可能性があります。いずれにせよ、彼は不明確な質問をしました。
30dot 2012年

@thirtydot:興味深いことに、私はそのようなポートを知りませんでした。ただし、上記のコードはまだ無効なSassであり、Sassポートをgrepする必要はありません。
–BoltClock

@BoltClock赤いニシンについて申し訳ありません。実際、私はBootstrapのSASSポートに取り組んでいました。ここではコードのサンプルです:$yellow: #ffc40d !default;
コーヒーは一口

@Robert Pounder:回答者が受け入れた回答を変更できることに気付いていないか、この質問を忘れているか(回答は5年近く離れていることに注意してください)、単に気にしません。
BoltClock

81

!defaultは、BootstrapSassでよく使用されます。これは逆の!importantに似ています。開発者がブートストラップをさらにカスタマイズできるように、すべてのブートストラップ変数は!defaultを使用して設定されます。!defaultを使用すると、sassは変数がまだ設定されていない場合にのみ変数を定義します。

これにより、柔軟性が高まります。

//Example1 Dress color = red
$auroras-dress-color: blue;
$auroras-dress-color: red;

//Example2 Dress color = red
$auroras-dress-color: blue !default;
$auroras-dress-color: red;

//Example3 Dress color = blue
$auroras-dress-color: blue;
$auroras-dress-color: red !default;

では、なぜこれが重要なのでしょうか。Bootstrapはパッケージです。ほとんどの人はブートストラップソースを編集しません。ブートストラップソースは絶対に更新しないでください。ブートストラップをカスタマイズするには、独自の変数ファイルを追加し、ブートストラップコードを使用してコンパイルしますが、ネイティブのブートストラップパッケージには触れないでください。Bootstrap sassのページには、ドキュメントでカスタマイズおよびコンパイルする方法についての完全な説明があります。

lessがこれを行わない理由はわかりません。私はあまり少ない作業をしていませんし、それ自体に変数管理が組み込まれているかどうかもわかりません。

フィドルの例 https://jsfiddle.net/siggysid/344dnnwz/


1
ブートストラップをカスタマイズするには、独自の変数ファイルを追加してブートストラップコードでコンパイルしますが、ネイティブのブートストラップパッケージには触れないでください。ブートストラップsassのページには、ドキュメントでカスタマイズとコンパイルの方法が完全に説明されています。」これは少し。興味のある方は、サラが言及しているページへのリンク(v4.3)をご覧ください。
ジョン

1

次の正確な定義と適切な説明は、sass-lang Webサイトのドキュメントセクション(変数)にあります-デフォルト値:

通常、変数に値を割り当てるときに、その変数にすでに値がある場合、その古い値は上書きされます。ただし、Sassライブラリを作成している場合は、CSSを生成するために使用する前に、ユーザーがライブラリの変数を構成できるようにすることができます。これを可能にするために、Sassは!defaultフラグを提供します。これは、変数が定義されていないか、その値がnullの場合にのみ、変数に値を割り当てます。それ以外の場合は、既存の値が使用されます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.