Skip to content

Instantly share code, notes, and snippets.

Avatar

Mark Otto mdo

View GitHub Profile
@mdo
mdo / scss-tests.scss
Last active Aug 29, 2015
You can create the same set of components with HTML and (S)CSS in a handful of ways. Here's how the same set of buttons looks with base and modifier classes, as well as extends and placeholders. The goal is to measure the output—the total number of selectors and declarations. Personally, I consider fewest selectors to be more optimal (for you an…
View 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
@mdo
mdo / input.scss
Last active Jan 12, 2021
Generated by SassMeister.com.
View 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 {
@mdo
mdo / input.scss
Created Jan 26, 2021
Generated by SassMeister.com.
View input.scss
$map: (
"a": "one",
"b": "two",
"c": "three"
);
$variable: inline;
$variable: block !default;
$map: (
@mdo
mdo / input.scss
Last active Feb 11, 2021
Generated by SassMeister.com.
View 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;
@mdo
mdo / input.scss
Created Feb 11, 2021
Generated by SassMeister.com.
View 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;
@mdo
mdo / input.scss
Created Feb 18, 2021
Generated by SassMeister.com.
View 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;
@mdo
mdo / input.scss
Created Feb 18, 2021
Generated by SassMeister.com.
View input.scss
$default: blue !default;
$reassigned: $default !default;
$default: purple;
.default { color: $default; }
.reassigned { color: $reassigned; }
@mdo
mdo / input.scss
Created Feb 18, 2021
Generated by SassMeister.com.
View input.scss
$default: red;
$default: blue !default;
$reassigned: $default !default;
// $default: purple;
.default { color: $default; }
.reassigned { color: $reassigned; }
@mdo
mdo / input.scss
Created Aug 4, 2021
Generated by SassMeister.com.
View input.scss
$theme-colors: (
"primary": blue,
"secondary": gray,
"success": green
) !default;
$theme-colors: map-merge($theme-colors, (
"disabled": gray,
));
@mdo
mdo / input.scss
Created Sep 15, 2021
Generated by SassMeister.com.
View input.scss
@function map-diff($map1, $map2) {
$map1-keys: map.keys($map1);
@each $key in $map1-keys {
$map2: map.remove($map2, $key);
}
@return $map2;
}