Co oznacza! Default w wartości właściwości css?

84

Kod bootstrap na Twitterze ma wiele właściwości CSS z !defaultkońcówką.

Na przykład

p {
  color: white !default;
}

Co robi !default?

AKTUALIZACJA

Moja wina, że ​​nie wyraziłem się jasno. Używam części SASS w Bootstrap.

css twitter-bootstrap sass Ugryzienie kawy
źródło
Nieobecny w css 2.1 w3.org/TR/CSS2
Marcin
1
nigdy wcześniej tego nie widziałem. może być czymś, co dotyczy tylko bootstrapa, może mają jakiś rodzaj analizy, która tego szuka
Huangism

Odpowiedzi:

53

O ile widziałem, Twitter Bootstrap używa MNIEJ. Z drugiej strony, !defaultjest w rzeczywistości częścią Sass i służy do nadawania $vardomyślnych wartości zmiennym Sass ( ), co sprawiłoby, że byłby nieprawidłowy w danym kontekście, nawet w Sassie .

Poza tym, ja nie byłem w stanie znaleźć żadnych odniesień do !defaultw dokumentacji MNIEJ , a według mojej wiedzy jest wyłącznym do Sass. Czy na pewno znalazłeś to w źródle Bootstrap, a nie gdzie indziej? Ponieważ, szczerze mówiąc, nie pamiętam, aby zobaczyć kod Sass / SCSS w arkuszach stylów Bootstrap.

Jeśli chodzi o to, co jest warte, jedynym prawidłowym tokenem, który zaczyna się !w CSS, jest ten !important, o którym być może już wiesz .

BoltClock
źródło
1
OK, właśnie pobrałem i grepowałem nową kopię Bootstrap i rzeczywiście, to zdecydowanie nie pochodzi ze źródła Bootstrap ...
BoltClock
1
Mógł się mylić lub mógł używać portu Sass w Bootstrap . Niezależnie od tego, zadał niejasne pytanie.
trzydzieścidot
@thirtydot: Interesujące, nie byłem świadomy takiego portu. Kod podany powyżej jest nadal nieprawidłowy Sass, a ja nawet nie muszę grepować portu Sass, aby wiedzieć.
BoltClock
@BoltClock Przepraszamy za czerwonego śledzia. Rzeczywiście, pracowałem nad portem SASS w Bootstrap. Oto próbka z kodu:$yellow: #ffc40d !default;
Coffee Bite
@Robert Pounder: Odpowiadającemu nie przyszło do głowy, że mogą zmienić zaakceptowane odpowiedzi, albo zapomnieli o tym pytaniu (zauważ, że nasze odpowiedzi są oddalone od siebie o prawie 5 lat), albo po prostu ich to nie obchodzi.
BoltClock
85

! default jest często używany w Bootstrap Sass. To jest podobne do odwrotności! Ważne. Wszystkie zmienne Bootstraps są ustawiane przy użyciu! Default, aby umożliwić deweloperowi dalsze dostosowywanie bootstrapa. Z! Default sass zdefiniuje zmienną tylko wtedy, gdy nie została jeszcze ustawiona.

Pozwala to na większą elastyczność. 

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

Więc dlaczego jest to ważne? Bootstrap to pakiet. Większość ludzi nie edytuje źródła Bootstrap. NIGDY NIE AKTUALIZUJ ŹRÓDŁA BUTÓW. Aby dostosować bootstrap, dodasz swój własny plik zmiennych i skompilujesz go z kodem bootstrap, ale nigdy nie dotykaj natywnego pakietu bootstrap. Strona Bootstrap sass zawiera wszystkie informacje na temat dostosowywania i kompilowania jej w dokumentacjach.

Nie wiem, dlaczego mniej tego nie robi. Niewiele pracowałem z mniejszym i nie wiem, czy ma własne wbudowane zarządzanie zmiennymi.

Przykładowe skrzypce https://jsfiddle.net/siggysid/344dnnwz/

Sarah M. Giles
źródło
1
„ Aby dostosować bootstrap, dodasz swój własny plik zmiennych i skompilujesz go z kodem bootstrap, ale nigdy nie dotykaj natywnego pakietu bootstrap. Strona Bootstrap sass zawiera wszystkie informacje na temat tego, jak dostosować i skompilować go w dokumentacji. ” Musiałem znaleźć to trochę. Dla wszystkich zainteresowanych, oto link (wersja 4.3) do strony, o której wspomina Sarah.
John E
1

Możesz znaleźć następującą dokładną definicję i przyzwoite wyjaśnienie na stronie sass-lang w sekcji doc (zmienna) - wartość domyślna:

Zwykle podczas przypisywania wartości do zmiennej, jeśli ta zmienna już miała wartość, jej stara wartość jest nadpisywana. Ale jeśli piszesz bibliotekę Sass, możesz chcieć pozwolić użytkownikom na konfigurowanie zmiennych biblioteki, zanim użyjesz ich do wygenerowania CSS. Aby było to możliwe, Sass dostarcza flagę! Default. Spowoduje to przypisanie wartości do zmiennej tylko wtedy, gdy ta zmienna nie jest zdefiniowana lub jej wartość jest null. W przeciwnym razie zostanie użyta istniejąca wartość.

Aspian
źródło