// Important

.foo {
  color: orange !important;
}

.bar {
  color: orange ! important;
}

.baz {
  color: orange!important;
}

.qux {
  color: orange! important;
}

// Default

$foo: red!default;

$bar: red !default;

$baz: red! default;

$qux: red ! default;

// Global

$foo: red!global;

$bar: red !global;

$baz: red! global;

$qux: red ! global;

// Optional

.foo {
  @extend .notice !optional;
}

.bar {
  @extend .notice ! optional;
}

// Both the following are invalid
// .baz {
//   @extend .notice!optional;
// }
//
// .qux {
//   @extend .notice! optional;
// }