Mark Otto mdo

## scss-tests.scss
// 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

## 00-intro.md

      
              3 files
            
          
              28 forks
            
          
              53 comments
            
          
              297 stars
            
          
                mdo
                / 00-intro.md
            
            
              Last active
              March 24, 2024 08:04
            
              
                Instructions for how to affix an Ikea Gerton table top to the Ikea Bekant sit-stand desk frame.
              
          
    Ikea Bekant standing desk with Gerton table top


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

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


$variable: block !default;
$map: (

## input.scss
$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;

## input.scss
$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;

## input.scss
$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;

## input.scss
$default: blue !default;
$reassigned: $default !default;

$default: purple;

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

## input.scss
$default: red;

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

// $default: purple;

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

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

$theme-colors: map-merge($theme-colors, (
  "disabled": gray,
));
	// 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
	@mixin color-scheme($name) {
	@if $name == dark {
	@media (prefers-color-scheme: dark) {
	@content;
	}
	} @else if $name == light {
	@media (prefers-color-scheme: light) {
	@content;
	}
	} @else {
	$map: (
	"a": "one",
	"b": "two",
	"c": "three"
	);
	$variable: inline;


	$variable: block !default;
	$map: (
	$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;
	$default: blue !default;
	$reassigned: $default !default;

	$default: purple;

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

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

	// $default: purple;

	.default { color: $default; }
	.reassigned { color: $reassigned; }
	$theme-colors: (
	"primary": blue,
	"secondary": gray,
	"success": green
	) !default;

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