mdo

// Original
//
// Markup:
//
// <button class="button">Button</button>
// <button class="button button-primary">Button</button>
// <button class="button button-danger">Button</button>
//
// Total selectors:    6
// Total declarations: 19

mdo

Ikea Bekant standing desk with Gerton table top

mdo

@mixin color-scheme($name) {
  @if $name == dark {
    @media (prefers-color-scheme: dark) {
      @content;
    }
  } @else if $name == light {
    @media (prefers-color-scheme: light) {
      @content;
    }
  } @else {

mdo

$map: (
    "a": "one",
    "b": "two",
    "c": "three"
);
$variable: inline;


$variable: block !default;
$map: (

mdo

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

mdo

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

mdo

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

mdo

$default: blue !default;
$reassigned: $default !default;

$default: purple;

.default { color: $default; }
.reassigned { color: $reassigned; }

mdo

$default: red;

$default: blue !default;
$reassigned: $default !default;

// $default: purple;

.default { color: $default; }
.reassigned { color: $reassigned; }

mdo

$theme-colors: (
  "primary":    blue,
  "secondary":  gray,
  "success":    green
) !default;

$theme-colors: map-merge($theme-colors, (
  "disabled": gray,
));