Skip to content

Instantly share code, notes, and snippets.

@jasonmelgoza
Created January 27, 2021 16:33

Revisions

  1. jasonmelgoza created this gist Jan 27, 2021.
    28 changes: 28 additions & 0 deletions input.scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    $gray-50: #999;
    $gray-100: #888;
    $gray-200: #777;
    $gray-300: #666;
    $gray-400: #555;
    $gray-500: #444;
    $gray-600: #333;
    $gray-700: #222;
    $gray-800: #111;
    $gray-900: #000;

    $colors: (
    "transparent": transparent,
    "current": currentColor,
    "black": $gray-700,
    "white": #fff,
    "gray-50": $gray-50,
    "gray-100": $gray-100,
    "gray-200": $gray-200,
    "gray-300": $gray-300,
    "gray-400": $gray-400
    );

    @each $name, $color in $colors {
    .b-#{$name} {
    border-color: $color !important;
    }
    }
    35 changes: 35 additions & 0 deletions output.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    .b-transparent {
    border-color: transparent !important;
    }

    .b-current {
    border-color: currentColor !important;
    }

    .b-black {
    border-color: #222 !important;
    }

    .b-white {
    border-color: #fff !important;
    }

    .b-gray-50 {
    border-color: #999 !important;
    }

    .b-gray-100 {
    border-color: #888 !important;
    }

    .b-gray-200 {
    border-color: #777 !important;
    }

    .b-gray-300 {
    border-color: #666 !important;
    }

    .b-gray-400 {
    border-color: #555 !important;
    }
    9 changes: 9 additions & 0 deletions settings.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    {
    "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
    },
    "autoprefixer": false
    }