Was bedeutet! Standard in einem CSS-Eigenschaftswert?

84

Der Twitter-Bootstrap-Code hat viele CSS-Eigenschaften mit einem !defaultam Ende.

Z.B

p {
  color: white !default;
}

Was macht !defaultdas

AKTUALISIEREN

Mein schlechtes, weil ich nicht klar bin. Ich verwende den SASS-Teil von Bootstrap.

Kaffeebiss
quelle
Nicht vorhanden in CSS 2.1 w3.org/TR/CSS2
Marcin
1
noch nie gesehen. könnte etwas sein, das nur für Bootstrap gilt, vielleicht haben sie eine Art
Analyse

Antworten:

53

Twitter Bootstrap verwendet WENIGER, soweit ich gesehen habe. Auf der anderen Seite !defaultist es tatsächlich Teil von Sass und wird verwendet, um Sass-Variablen ( $var) Standardwerte zu geben, die es in Ihrem gegebenen Kontext ungültig machen würden, selbst in Sass .

Außerdem konnte ich !defaultin der WENIGER Dokumentation keine Verweise finden , und meines Wissens ist dies ausschließlich Sass vorbehalten. Sind Sie sicher, dass Sie dies in der Bootstrap-Quelle und nicht anderswo gefunden haben? Weil ich mich ehrlich gesagt nicht daran erinnere, Sass / SCSS-Code in den Stylesheets von Bootstrap gesehen zu haben.

Für das, was es wert ist, ist das einzige gültige Token, mit dem !in CSS begonnen wird !important, das Sie möglicherweise bereits kennen .

BoltClock
quelle
1
OK, ich habe gerade eine neue Kopie von Bootstrap heruntergeladen und gepackt, und tatsächlich ist dies definitiv nicht aus Bootstraps Quelle ...
BoltClock
1
Er könnte sich irren oder einen Sass-Port von Bootstrap verwenden . Wie auch immer, er stellte eine unklare Frage.
dreißig Punkte
@thirtydot: Interessant, ich war mir eines solchen Ports nicht bewusst. Der oben angegebene Code ist jedoch immer noch ungültig, und ich muss nicht einmal den Sass-Port durchsuchen, um dies zu wissen.
BoltClock
@ BoltClock Entschuldigung für den roten Hering. Ich habe tatsächlich am SASS-Port von Bootstrap gearbeitet. Hier ist ein Beispiel aus dem Code:$yellow: #ffc40d !default;
Coffee Bite
@ Robert Pounder: Entweder ist dem Antwortenden nicht in den Sinn gekommen, dass er akzeptierte Antworten ändern kann, oder er hat diese Frage vergessen (beachten Sie, dass unsere Antworten fast 5 Jahre auseinander liegen), oder es ist ihm einfach egal.
BoltClock
82

! default wird häufig in Bootstrap Sass verwendet. Es ist ähnlich wie umgekehrt! Wichtig. Alle Bootstraps-Variablen werden mit! Default festgelegt, damit der Entwickler den Bootstrap weiter anpassen kann. Mit! Default definiert sass eine Variable nur, wenn sie noch nicht gesetzt wurde.

Dies ermöglicht mehr Flexibilität.

//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;

Warum ist das so wichtig? Bootstrap ist ein Paket. Die meisten Leute bearbeiten die Bootstrap-Quelle nicht. AKTUALISIEREN SIE NIEMALS DIE BOOTSTRAP-QUELLE. Um den Bootstrap anzupassen, fügen Sie Ihre eigene variable Datei hinzu und kompilieren sie mit dem Bootstrap-Code. Berühren Sie jedoch niemals das native Bootstrap-Paket. Auf der Seite von Bootstrap sass finden Sie ausführliche Informationen zum Anpassen und Kompilieren in den Dokumentationen.

Ich weiß nicht, warum weniger das nicht tut. Ich habe nicht viel mit weniger gearbeitet und weiß nicht, ob es eine eigene integrierte Variablenverwaltung hat.

Beispiel Geige https://jsfiddle.net/siggysid/344dnnwz/

Sarah M Giles
quelle
1
" Um Bootstrap anzupassen, fügen Sie Ihre eigene variable Datei hinzu und kompilieren sie mit dem Bootstrap-Code, berühren jedoch niemals das native Bootstrap-Paket. Auf der Seite von Bootstrap sass finden Sie ausführliche Informationen zum Anpassen und Kompilieren in den Dokumentationen. " Ich musste danach suchen das ein bisschen. Für alle Interessierten ist hier der Link (v4.3) zu der Seite, die Sarah erwähnt.
John E
1

Die folgende genaue Definition und eine anständige Erklärung finden Sie auf der sass-lang- Website im Dokumentabschnitt (Variable) - Standardwert:

Wenn Sie einer Variablen einen Wert zuweisen und diese Variable bereits einen Wert hatte, wird normalerweise ihr alter Wert überschrieben. Wenn Sie jedoch eine Sass-Bibliothek schreiben, möchten Sie Ihren Benutzern möglicherweise erlauben, die Variablen Ihrer Bibliothek zu konfigurieren, bevor Sie sie zum Generieren von CSS verwenden. Um dies zu ermöglichen, stellt Sass das Flag! Standard zur Verfügung. Dies weist einer Variablen nur dann einen Wert zu, wenn diese Variable nicht definiert ist oder ihr Wert null ist. Andernfalls wird der vorhandene Wert verwendet.

Aspian
quelle