Sass !default und themenbezogene Designsysteme

Das ist ein großartiger Blogbeitrag von Brad Frost, in dem er uns durch ein interessantes Beispiel führt. Nehmen wir an, wir erstellen ein Theme und haben Sass wie dieses

.c-text-input {
  background-color: $form-background-color;
  padding: 10px
}

Wenn die Variable $form-background-color nicht definiert ist, möchten wir nicht, dass die background-color überhaupt in unserem CSS ausgegeben wird. Tatsächlich möchten wir, dass unsere Ausgabe stattdessen so aussieht:

.c-text-input {
  padding: 10px;
}

Siehst du? Keine background-color-Eigenschaft. Wie Brad zeigt, ist das heute mit Sass's !default-Flag möglich. Du kannst es so verwenden, wenn du die Variable einrichtest:

$form-background-color: null !default;

.c-text-input {
  background-color: $form-background-color; /* this line won’t exist in the outputted CSS file */
  padding: 10px;
}

$form-background-color: red;

.c-text-input-fancy {
  background-color: $form-background-color; /* this line will be “red” because we defined the variable */
  padding: 10px;
}

Es ist eine wirklich nützliche Sache, die man sich merken sollte, wenn man sicherstellen möchte, dass sein CSS so klein wie möglich ist, während man komplexe Themes mit Sass erstellt.

Direkter Link →