Skip to content

Instantly share code, notes, and snippets.

@smlombardi

smlombardi/SassMeister-input.scss

Last active August 29, 2015 14:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save smlombardi/6bf7a1f7c01cc308e4c2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save smlombardi/6bf7a1f7c01cc308e4c2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. smlombardi revised this gist Apr 22, 2015. 2 changed files with 814 additions and 0 deletions.
    14 changes: 14 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -151,4 +151,18 @@ pbgray: (
    .oranother {
    color: map-get(map-get($pbcolors, pbcyan), 500);;
    }
    @each $item, $color in $pbcolors {
    @each $shade, $value in $color {
    .bg-#{$item}-#{$shade} {
    background-color: $value;
    }
    }
    }
    @each $item, $color in $pbcolors {
    @each $shade, $value in $color {
    .#{$item}-#{$shade} {
    color: $value;
    }
    }
    }

    800 changes: 800 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -9,3 +9,803 @@
    .oranother {
    color: #009DBF;
    }

    .bg-pbcyan-50 {
    background-color: #E5F5FC;
    }

    .bg-pbcyan-100 {
    background-color: #CCEBF9;
    }

    .bg-pbcyan-200 {
    background-color: #99D7F2;
    }

    .bg-pbcyan-300 {
    background-color: #66C3EC;
    }

    .bg-pbcyan-400 {
    background-color: #33AFE5;
    }

    .bg-pbcyan-500 {
    background-color: #009DBF;
    }

    .bg-pbcyan-600 {
    background-color: #008CAB;
    }

    .bg-pbcyan-700 {
    background-color: #007C98;
    }

    .bg-pbcyan-800 {
    background-color: #006D85;
    }

    .bg-pbcyan-900 {
    background-color: #005D72;
    }

    .bg-pbmediumblue-50 {
    background-color: #E5F1F8;
    }

    .bg-pbmediumblue-100 {
    background-color: #CCE3F1;
    }

    .bg-pbmediumblue-200 {
    background-color: #99C7E3;
    }

    .bg-pbmediumblue-300 {
    background-color: #66AAD4;
    }

    .bg-pbmediumblue-400 {
    background-color: #338EC6;
    }

    .bg-pbmediumblue-500 {
    background-color: #0072B8;
    }

    .bg-pbmediumblue-600 {
    background-color: #0065A5;
    }

    .bg-pbmediumblue-700 {
    background-color: #005A93;
    }

    .bg-pbmediumblue-800 {
    background-color: #004F80;
    }

    .bg-pbmediumblue-900 {
    background-color: #00436E;
    }

    .bg-pbpurple-50 {
    background-color: #F5ECF5;
    }

    .bg-pbpurple-100 {
    background-color: #ECD9EB;
    }

    .bg-pbpurple-200 {
    background-color: #D9B2D7;
    }

    .bg-pbpurple-300 {
    background-color: #C68CC3;
    }

    .bg-pbpurple-400 {
    background-color: #B365AF;
    }

    .bg-pbpurple-500 {
    background-color: #A03F9B;
    }

    .bg-pbpurple-600 {
    background-color: #90388B;
    }

    .bg-pbpurple-700 {
    background-color: #80327C;
    }

    .bg-pbpurple-800 {
    background-color: #702C6C;
    }

    .bg-pbpurple-900 {
    background-color: #60255D;
    }

    .bg-pbmagenta-50 {
    background-color: #FAE6F3;
    }

    .bg-pbmagenta-100 {
    background-color: #F5CEE7;
    }

    .bg-pbmagenta-200 {
    background-color: #EC9DD0;
    }

    .bg-pbmagenta-300 {
    background-color: #E26BB8;
    }

    .bg-pbmagenta-400 {
    background-color: #D93AA1;
    }

    .bg-pbmagenta-500 {
    background-color: #CF0989;
    }

    .bg-pbmagenta-600 {
    background-color: #BA087C;
    }

    .bg-pbmagenta-700 {
    background-color: #A5076E;
    }

    .bg-pbmagenta-800 {
    background-color: #900660;
    }

    .bg-pbmagenta-900 {
    background-color: #7C0552;
    }

    .bg-pbdarkorange-50 {
    background-color: #FDF0E7;
    }

    .bg-pbdarkorange-100 {
    background-color: #FCE1CE;
    }

    .bg-pbdarkorange-200 {
    background-color: #F8C49D;
    }

    .bg-pbdarkorange-300 {
    background-color: #F5A66D;
    }

    .bg-pbdarkorange-400 {
    background-color: #F1893C;
    }

    .bg-pbdarkorange-500 {
    background-color: #EE6B0B;
    }

    .bg-pbdarkorange-600 {
    background-color: #D65F09;
    }

    .bg-pbdarkorange-700 {
    background-color: #BE5408;
    }

    .bg-pbdarkorange-800 {
    background-color: #A64A07;
    }

    .bg-pbdarkorange-900 {
    background-color: #8E3F06;
    }

    .bg-pborange-50 {
    background-color: #FDF2E5;
    }

    .bg-pborange-100 {
    background-color: #FCE6CC;
    }

    .bg-pborange-200 {
    background-color: #F9CD99;
    }

    .bg-pborange-300 {
    background-color: #F5B466;
    }

    .bg-pborange-400 {
    background-color: #F29B33;
    }

    .bg-pborange-500 {
    background-color: #EF8200;
    }

    .bg-pborange-600 {
    background-color: #D77500;
    }

    .bg-pborange-700 {
    background-color: #BF6800;
    }

    .bg-pborange-800 {
    background-color: #A75B00;
    }

    .bg-pborange-900 {
    background-color: #8F4E00;
    }

    .bg-pbyellow-50 {
    background-color: #FDF8E5;
    }

    .bg-pbyellow-100 {
    background-color: #FBF1CC;
    }

    .bg-pbyellow-200 {
    background-color: #F8E299;
    }

    .bg-pbyellow-300 {
    background-color: #F4D466;
    }

    .bg-pbyellow-400 {
    background-color: #F1C533;
    }

    .bg-pbyellow-500 {
    background-color: #EDB700;
    }

    .bg-pbyellow-600 {
    background-color: #D5A300;
    }

    .bg-pbyellow-700 {
    background-color: #BD9100;
    }

    .bg-pbyellow-800 {
    background-color: #A57F00;
    }

    .bg-pbyellow-900 {
    background-color: #8E6D00;
    }

    .bg-pbgreen-50 {
    background-color: #F1F9EC;
    }

    .bg-pbgreen-100 {
    background-color: #E3F2DA;
    }

    .bg-pbgreen-200 {
    background-color: #C7E5B4;
    }

    .bg-pbgreen-300 {
    background-color: #AAD98F;
    }

    .bg-pbgreen-400 {
    background-color: #8ECC69;
    }

    .bg-pbgreen-500 {
    background-color: #72BF44;
    }

    .bg-pbgreen-600 {
    background-color: #65AB3D;
    }

    .bg-pbgreen-700 {
    background-color: #5A9836;
    }

    .bg-pbgreen-800 {
    background-color: #4F852F;
    }

    .bg-pbgreen-900 {
    background-color: #437228;
    }

    .bg-pbdarkgreen-50 {
    background-color: #E5F7EC;
    }

    .bg-pbdarkgreen-100 {
    background-color: #CCEFD9;
    }

    .bg-pbdarkgreen-200 {
    background-color: #99E0B3;
    }

    .bg-pbdarkgreen-300 {
    background-color: #66D08C;
    }

    .bg-pbdarkgreen-400 {
    background-color: #33C166;
    }

    .bg-pbdarkgreen-500 {
    background-color: #00B140;
    }

    .bg-pbdarkgreen-600 {
    background-color: #009F3A;
    }

    .bg-pbdarkgreen-700 {
    background-color: #008D34;
    }

    .bg-pbdarkgreen-800 {
    background-color: #007B2D;
    }

    .bg-pbdarkgreen-900 {
    background-color: #006A27;
    }

    .bg-pbgray-50 {
    background-color: #F0F0F0;
    }

    .bg-pbgray-100 {
    background-color: #DBDBDB;
    }

    .bg-pbgray-200 {
    background-color: #C0C0C0;
    }

    .bg-pbgray-300 {
    background-color: #9B9B9B;
    }

    .bg-pbgray-400 {
    background-color: #717171;
    }

    .bg-pbgray-500 {
    background-color: #4E4E4E;
    }

    .bg-pbgray-600 {
    background-color: #3E3E3E;
    }

    .bg-pbgray-700 {
    background-color: #2E2E2E;
    }

    .bg-pbgray-800 {
    background-color: #1F1F1F;
    }

    .bg-pbgray-900 {
    background-color: #0F0F0F;
    }

    .pbcyan-50 {
    color: #E5F5FC;
    }

    .pbcyan-100 {
    color: #CCEBF9;
    }

    .pbcyan-200 {
    color: #99D7F2;
    }

    .pbcyan-300 {
    color: #66C3EC;
    }

    .pbcyan-400 {
    color: #33AFE5;
    }

    .pbcyan-500 {
    color: #009DBF;
    }

    .pbcyan-600 {
    color: #008CAB;
    }

    .pbcyan-700 {
    color: #007C98;
    }

    .pbcyan-800 {
    color: #006D85;
    }

    .pbcyan-900 {
    color: #005D72;
    }

    .pbmediumblue-50 {
    color: #E5F1F8;
    }

    .pbmediumblue-100 {
    color: #CCE3F1;
    }

    .pbmediumblue-200 {
    color: #99C7E3;
    }

    .pbmediumblue-300 {
    color: #66AAD4;
    }

    .pbmediumblue-400 {
    color: #338EC6;
    }

    .pbmediumblue-500 {
    color: #0072B8;
    }

    .pbmediumblue-600 {
    color: #0065A5;
    }

    .pbmediumblue-700 {
    color: #005A93;
    }

    .pbmediumblue-800 {
    color: #004F80;
    }

    .pbmediumblue-900 {
    color: #00436E;
    }

    .pbpurple-50 {
    color: #F5ECF5;
    }

    .pbpurple-100 {
    color: #ECD9EB;
    }

    .pbpurple-200 {
    color: #D9B2D7;
    }

    .pbpurple-300 {
    color: #C68CC3;
    }

    .pbpurple-400 {
    color: #B365AF;
    }

    .pbpurple-500 {
    color: #A03F9B;
    }

    .pbpurple-600 {
    color: #90388B;
    }

    .pbpurple-700 {
    color: #80327C;
    }

    .pbpurple-800 {
    color: #702C6C;
    }

    .pbpurple-900 {
    color: #60255D;
    }

    .pbmagenta-50 {
    color: #FAE6F3;
    }

    .pbmagenta-100 {
    color: #F5CEE7;
    }

    .pbmagenta-200 {
    color: #EC9DD0;
    }

    .pbmagenta-300 {
    color: #E26BB8;
    }

    .pbmagenta-400 {
    color: #D93AA1;
    }

    .pbmagenta-500 {
    color: #CF0989;
    }

    .pbmagenta-600 {
    color: #BA087C;
    }

    .pbmagenta-700 {
    color: #A5076E;
    }

    .pbmagenta-800 {
    color: #900660;
    }

    .pbmagenta-900 {
    color: #7C0552;
    }

    .pbdarkorange-50 {
    color: #FDF0E7;
    }

    .pbdarkorange-100 {
    color: #FCE1CE;
    }

    .pbdarkorange-200 {
    color: #F8C49D;
    }

    .pbdarkorange-300 {
    color: #F5A66D;
    }

    .pbdarkorange-400 {
    color: #F1893C;
    }

    .pbdarkorange-500 {
    color: #EE6B0B;
    }

    .pbdarkorange-600 {
    color: #D65F09;
    }

    .pbdarkorange-700 {
    color: #BE5408;
    }

    .pbdarkorange-800 {
    color: #A64A07;
    }

    .pbdarkorange-900 {
    color: #8E3F06;
    }

    .pborange-50 {
    color: #FDF2E5;
    }

    .pborange-100 {
    color: #FCE6CC;
    }

    .pborange-200 {
    color: #F9CD99;
    }

    .pborange-300 {
    color: #F5B466;
    }

    .pborange-400 {
    color: #F29B33;
    }

    .pborange-500 {
    color: #EF8200;
    }

    .pborange-600 {
    color: #D77500;
    }

    .pborange-700 {
    color: #BF6800;
    }

    .pborange-800 {
    color: #A75B00;
    }

    .pborange-900 {
    color: #8F4E00;
    }

    .pbyellow-50 {
    color: #FDF8E5;
    }

    .pbyellow-100 {
    color: #FBF1CC;
    }

    .pbyellow-200 {
    color: #F8E299;
    }

    .pbyellow-300 {
    color: #F4D466;
    }

    .pbyellow-400 {
    color: #F1C533;
    }

    .pbyellow-500 {
    color: #EDB700;
    }

    .pbyellow-600 {
    color: #D5A300;
    }

    .pbyellow-700 {
    color: #BD9100;
    }

    .pbyellow-800 {
    color: #A57F00;
    }

    .pbyellow-900 {
    color: #8E6D00;
    }

    .pbgreen-50 {
    color: #F1F9EC;
    }

    .pbgreen-100 {
    color: #E3F2DA;
    }

    .pbgreen-200 {
    color: #C7E5B4;
    }

    .pbgreen-300 {
    color: #AAD98F;
    }

    .pbgreen-400 {
    color: #8ECC69;
    }

    .pbgreen-500 {
    color: #72BF44;
    }

    .pbgreen-600 {
    color: #65AB3D;
    }

    .pbgreen-700 {
    color: #5A9836;
    }

    .pbgreen-800 {
    color: #4F852F;
    }

    .pbgreen-900 {
    color: #437228;
    }

    .pbdarkgreen-50 {
    color: #E5F7EC;
    }

    .pbdarkgreen-100 {
    color: #CCEFD9;
    }

    .pbdarkgreen-200 {
    color: #99E0B3;
    }

    .pbdarkgreen-300 {
    color: #66D08C;
    }

    .pbdarkgreen-400 {
    color: #33C166;
    }

    .pbdarkgreen-500 {
    color: #00B140;
    }

    .pbdarkgreen-600 {
    color: #009F3A;
    }

    .pbdarkgreen-700 {
    color: #008D34;
    }

    .pbdarkgreen-800 {
    color: #007B2D;
    }

    .pbdarkgreen-900 {
    color: #006A27;
    }

    .pbgray-50 {
    color: #F0F0F0;
    }

    .pbgray-100 {
    color: #DBDBDB;
    }

    .pbgray-200 {
    color: #C0C0C0;
    }

    .pbgray-300 {
    color: #9B9B9B;
    }

    .pbgray-400 {
    color: #717171;
    }

    .pbgray-500 {
    color: #4E4E4E;
    }

    .pbgray-600 {
    color: #3E3E3E;
    }

    .pbgray-700 {
    color: #2E2E2E;
    }

    .pbgray-800 {
    color: #1F1F1F;
    }

    .pbgray-900 {
    color: #0F0F0F;
    }
  2. smlombardi revised this gist Apr 22, 2015. 2 changed files with 18 additions and 5 deletions.
    15 changes: 12 additions & 3 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    $pbcolors: (

    @@ -131,15 +135,20 @@ pbgray: (
    )
    );

    @function pbcolor($pbcolor, $tone: 'base') {
    @function pbcolor($pbcolor, $tone: 500) {
    @return map-get(map-get($pbcolors, $pbcolor), $tone);
    }

    .oneway {
    color: pbcolor(pbcyan,100);
    color: pbcolor(pbcyan, 500);
    }

    .oneway {
    color: pbcolor(pbcyan);
    }


    .oranother {
    color: map-get(map-get($pbcolors, pbcyan), 100);;
    color: map-get(map-get($pbcolors, pbcyan), 500);;
    }

    8 changes: 6 additions & 2 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,11 @@
    .oneway {
    color: #CCEBF9;
    color: #009DBF;
    }

    .oneway {
    color: #009DBF;
    }

    .oranother {
    color: #CCEBF9;
    color: #009DBF;
    }
  3. smlombardi revised this gist Apr 22, 2015. 1 changed file with 0 additions and 4 deletions.
    4 changes: 0 additions & 4 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,3 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    $pbcolors: (

  4. smlombardi revised this gist Apr 22, 2015. 2 changed files with 136 additions and 181 deletions.
    181 changes: 132 additions & 49 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,64 +3,147 @@
    // Compass (v1.0.3)
    // ----

    $pb-cyan: #009dbf;
    $pb-medium-blue: #0072b8;
    $pb-blue: #3e53a4;
    $pb-purple: #a03f9b;
    $pb-magenta: #cf0989;
    $pbcolors: (

    // SECONDARY
    $pb-dark-orange: #ee6b0b;
    $pb-orange: #ef8200;
    $pb-yellow: #edb700;
    $pb-green: #72bf44;
    $pb-dark-green: #00b140;
    pbcyan : (
    50: #E5F5FC,
    100: #CCEBF9,
    200: #99D7F2,
    300: #66C3EC,
    400: #33AFE5,
    500: #009DBF,
    600: #008CAB,
    700: #007C98,
    800: #006D85,
    900: #005D72
    ),
    pbmediumblue: (
    50: #E5F1F8,
    100: #CCE3F1,
    200: #99C7E3,
    300: #66AAD4,
    400: #338EC6,
    500: #0072B8,
    600: #0065A5,
    700: #005A93,
    800: #004F80,
    900: #00436E
    ),

    // new grays use for all NEUTRALS
    $pb-gray: #4e4e4e;
    $pb-gray-50: #f0f0f0;
    $pb-gray-100: #dbdbdb;
    $pb-gray-200: #c0c0c0;
    $pb-gray-300: #9b9b9b;
    $pb-gray-400: #717171;
    $pb-gray-500: $pb-gray;
    pbpurple: (
    50: #F5ECF5,
    100: #ECD9EB,
    200: #D9B2D7,
    300: #C68CC3,
    400: #B365AF,
    500: #A03F9B,
    600: #90388B,
    700: #80327C,
    800: #702C6C,
    900: #60255D
    ),

    $all-color-map: (
    'pb-cyan': $pb-cyan,
    'pb-medium-blue': $pb-medium-blue,
    'pb-blue': $pb-blue,
    'pb-purple': $pb-purple,
    'pb-magenta': $pb-magenta,
    'pb-dark-orange': $pb-dark-orange,
    'pb-orange': $pb-orange,
    'pb-yellow': $pb-yellow,
    'pb-green': $pb-green,
    'pb-dark-green': $pb-dark-green,
    'pb-gray': $pb-gray,
    'pb-gray-50': $pb-gray-50,
    'pb-gray-100': $pb-gray-100,
    'pb-gray-200': $pb-gray-200,
    'pb-gray-300': $pb-gray-300,
    'pb-gray-400': $pb-gray-400,
    'pb-gray-500': $pb-gray-500);
    pbmagenta: (
    50: #FAE6F3,
    100: #F5CEE7,
    200: #EC9DD0,
    300: #E26BB8,
    400: #D93AA1,
    500: #CF0989,
    600: #BA087C,
    700: #A5076E,
    800: #900660,
    900: #7C0552
    ),

    pbdarkorange: (
    50: #FDF0E7,
    100: #FCE1CE,
    200: #F8C49D,
    300: #F5A66D,
    400: #F1893C,
    500: #EE6B0B,
    600: #D65F09,
    700: #BE5408,
    800: #A64A07,
    900: #8E3F06
    ),

    @each $colorname, $colorvalue in $all-color-map {
    $j: $colorname;
    $k: $colorvalue;

    .bg-#{$j} {
    background-color: $k;
    }

    .fg-#{$j} {
    color: $k;
    }
    pborange: (
    50: #FDF2E5,
    100: #FCE6CC,
    200: #F9CD99,
    300: #F5B466,
    400: #F29B33,
    500: #EF8200,
    600: #D77500,
    700: #BF6800,
    800: #A75B00,
    900: #8F4E00
    ),

    }
    pbyellow: (
    50: #FDF8E5,
    100: #FBF1CC,
    200: #F8E299,
    300: #F4D466,
    400: #F1C533,
    500: #EDB700,
    600: #D5A300,
    700: #BD9100,
    800: #A57F00,
    900: #8E6D00
    ),

    pbgreen: (
    50: #F1F9EC,
    100: #E3F2DA,
    200: #C7E5B4,
    300: #AAD98F,
    400: #8ECC69,
    500: #72BF44,
    600: #65AB3D,
    700: #5A9836,
    800: #4F852F,
    900: #437228
    ),

    pbdarkgreen: (
    50: #E5F7EC,
    100: #CCEFD9,
    200: #99E0B3,
    300: #66D08C,
    400: #33C166,
    500: #00B140,
    600: #009F3A,
    700: #008D34,
    800: #007B2D,
    900: #006A27
    ),

    pbgray: (
    50: #F0F0F0,
    100: #DBDBDB,
    200: #C0C0C0,
    300: #9B9B9B,
    400: #717171,
    500: #4E4E4E,
    600: #3E3E3E,
    700: #2E2E2E,
    800: #1F1F1F,
    900: #0F0F0F
    )
    );

    @function pbcolor($pbcolor, $tone: 'base') {
    @return map-get(map-get($pbcolors, $pbcolor), $tone);
    }

    .oneway {
    color: pbcolor(pbcyan,100);
    }

    .oranother {
    color: map-get(map-get($pbcolors, pbcyan), 100);;
    }

    136 changes: 4 additions & 132 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,135 +1,7 @@
    .bg-pb-cyan {
    background-color: #009dbf;
    .oneway {
    color: #CCEBF9;
    }

    .fg-pb-cyan {
    color: #009dbf;
    }

    .bg-pb-medium-blue {
    background-color: #0072b8;
    }

    .fg-pb-medium-blue {
    color: #0072b8;
    }

    .bg-pb-blue {
    background-color: #3e53a4;
    }

    .fg-pb-blue {
    color: #3e53a4;
    }

    .bg-pb-purple {
    background-color: #a03f9b;
    }

    .fg-pb-purple {
    color: #a03f9b;
    }

    .bg-pb-magenta {
    background-color: #cf0989;
    }

    .fg-pb-magenta {
    color: #cf0989;
    }

    .bg-pb-dark-orange {
    background-color: #ee6b0b;
    }

    .fg-pb-dark-orange {
    color: #ee6b0b;
    }

    .bg-pb-orange {
    background-color: #ef8200;
    }

    .fg-pb-orange {
    color: #ef8200;
    }

    .bg-pb-yellow {
    background-color: #edb700;
    }

    .fg-pb-yellow {
    color: #edb700;
    }

    .bg-pb-green {
    background-color: #72bf44;
    }

    .fg-pb-green {
    color: #72bf44;
    }

    .bg-pb-dark-green {
    background-color: #00b140;
    }

    .fg-pb-dark-green {
    color: #00b140;
    }

    .bg-pb-gray {
    background-color: #4e4e4e;
    }

    .fg-pb-gray {
    color: #4e4e4e;
    }

    .bg-pb-gray-50 {
    background-color: #f0f0f0;
    }

    .fg-pb-gray-50 {
    color: #f0f0f0;
    }

    .bg-pb-gray-100 {
    background-color: #dbdbdb;
    }

    .fg-pb-gray-100 {
    color: #dbdbdb;
    }

    .bg-pb-gray-200 {
    background-color: #c0c0c0;
    }

    .fg-pb-gray-200 {
    color: #c0c0c0;
    }

    .bg-pb-gray-300 {
    background-color: #9b9b9b;
    }

    .fg-pb-gray-300 {
    color: #9b9b9b;
    }

    .bg-pb-gray-400 {
    background-color: #717171;
    }

    .fg-pb-gray-400 {
    color: #717171;
    }

    .bg-pb-gray-500 {
    background-color: #4e4e4e;
    }

    .fg-pb-gray-500 {
    color: #4e4e4e;
    .oranother {
    color: #CCEBF9;
    }
  5. smlombardi created this gist Apr 22, 2015.
    66 changes: 66 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    $pb-cyan: #009dbf;
    $pb-medium-blue: #0072b8;
    $pb-blue: #3e53a4;
    $pb-purple: #a03f9b;
    $pb-magenta: #cf0989;

    // SECONDARY
    $pb-dark-orange: #ee6b0b;
    $pb-orange: #ef8200;
    $pb-yellow: #edb700;
    $pb-green: #72bf44;
    $pb-dark-green: #00b140;

    // new grays use for all NEUTRALS
    $pb-gray: #4e4e4e;
    $pb-gray-50: #f0f0f0;
    $pb-gray-100: #dbdbdb;
    $pb-gray-200: #c0c0c0;
    $pb-gray-300: #9b9b9b;
    $pb-gray-400: #717171;
    $pb-gray-500: $pb-gray;

    $all-color-map: (
    'pb-cyan': $pb-cyan,
    'pb-medium-blue': $pb-medium-blue,
    'pb-blue': $pb-blue,
    'pb-purple': $pb-purple,
    'pb-magenta': $pb-magenta,
    'pb-dark-orange': $pb-dark-orange,
    'pb-orange': $pb-orange,
    'pb-yellow': $pb-yellow,
    'pb-green': $pb-green,
    'pb-dark-green': $pb-dark-green,
    'pb-gray': $pb-gray,
    'pb-gray-50': $pb-gray-50,
    'pb-gray-100': $pb-gray-100,
    'pb-gray-200': $pb-gray-200,
    'pb-gray-300': $pb-gray-300,
    'pb-gray-400': $pb-gray-400,
    'pb-gray-500': $pb-gray-500);


    @each $colorname, $colorvalue in $all-color-map {
    $j: $colorname;
    $k: $colorvalue;

    .bg-#{$j} {
    background-color: $k;
    }

    .fg-#{$j} {
    color: $k;
    }

    }






    135 changes: 135 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,135 @@
    .bg-pb-cyan {
    background-color: #009dbf;
    }

    .fg-pb-cyan {
    color: #009dbf;
    }

    .bg-pb-medium-blue {
    background-color: #0072b8;
    }

    .fg-pb-medium-blue {
    color: #0072b8;
    }

    .bg-pb-blue {
    background-color: #3e53a4;
    }

    .fg-pb-blue {
    color: #3e53a4;
    }

    .bg-pb-purple {
    background-color: #a03f9b;
    }

    .fg-pb-purple {
    color: #a03f9b;
    }

    .bg-pb-magenta {
    background-color: #cf0989;
    }

    .fg-pb-magenta {
    color: #cf0989;
    }

    .bg-pb-dark-orange {
    background-color: #ee6b0b;
    }

    .fg-pb-dark-orange {
    color: #ee6b0b;
    }

    .bg-pb-orange {
    background-color: #ef8200;
    }

    .fg-pb-orange {
    color: #ef8200;
    }

    .bg-pb-yellow {
    background-color: #edb700;
    }

    .fg-pb-yellow {
    color: #edb700;
    }

    .bg-pb-green {
    background-color: #72bf44;
    }

    .fg-pb-green {
    color: #72bf44;
    }

    .bg-pb-dark-green {
    background-color: #00b140;
    }

    .fg-pb-dark-green {
    color: #00b140;
    }

    .bg-pb-gray {
    background-color: #4e4e4e;
    }

    .fg-pb-gray {
    color: #4e4e4e;
    }

    .bg-pb-gray-50 {
    background-color: #f0f0f0;
    }

    .fg-pb-gray-50 {
    color: #f0f0f0;
    }

    .bg-pb-gray-100 {
    background-color: #dbdbdb;
    }

    .fg-pb-gray-100 {
    color: #dbdbdb;
    }

    .bg-pb-gray-200 {
    background-color: #c0c0c0;
    }

    .fg-pb-gray-200 {
    color: #c0c0c0;
    }

    .bg-pb-gray-300 {
    background-color: #9b9b9b;
    }

    .fg-pb-gray-300 {
    color: #9b9b9b;
    }

    .bg-pb-gray-400 {
    background-color: #717171;
    }

    .fg-pb-gray-400 {
    color: #717171;
    }

    .bg-pb-gray-500 {
    background-color: #4e4e4e;
    }

    .fg-pb-gray-500 {
    color: #4e4e4e;
    }