Skip to content

Instantly share code, notes, and snippets.

@alexisg

alexisg/SassMeister-input.scss

Created March 7, 2016 17:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alexisg/dd1d6b45ceb8ba8926e9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alexisg/dd1d6b45ceb8ba8926e9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @KittyGiraudel KittyGiraudel revised this gist Jun 6, 2015. 2 changed files with 6 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -32,5 +32,8 @@ $colors: (
    }

    .foo {
    color: color('base');
    color: color('light');
    color: color('dark');
    color: color('trans');
    }
    3 changes: 3 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,6 @@
    .foo {
    color: #FFBB00;
    color: #ffcf4d;
    color: #b38300;
    color: rgba(255, 187, 0, 0.5);
    }
  2. @KittyGiraudel KittyGiraudel revised this gist Jun 6, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -12,9 +12,9 @@ $colors: (
    );

    // retrieve color from $colors map ie. `color(primary, base)`
    @function color($color) {
    @function color($color-name) {
    // Get value mapped to `$color` in map
    $color: map-get($colors, $color);
    $color: map-get($colors, $color-name);
    // Get the first item from value (color or ref)
    $base: nth($color, 1);
    // Get the map of adjustments to perform (or an empty map)
  3. @KittyGiraudel KittyGiraudel created this gist Jun 6, 2015.
    36 changes: 36 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    // ----
    // Sass (v3.4.13)
    // Compass (v1.0.3)
    // ----

    // color variable map
    $colors: (
    base: #FFBB00,
    light: base (lighten: 15%),
    dark: base (darken: 15%),
    trans: base (transparentize: 0.5)
    );

    // retrieve color from $colors map ie. `color(primary, base)`
    @function color($color) {
    // Get value mapped to `$color` in map
    $color: map-get($colors, $color);
    // Get the first item from value (color or ref)
    $base: nth($color, 1);
    // Get the map of adjustments to perform (or an empty map)
    $adjust: if(length($color) > 1, nth($color, 2), ());
    // If `$base` is a key from the map, then get it
    $color: map-get($colors, $base) or $base;

    // Apply the adjustments dynamically
    @each $key, $value in $adjust {
    $color: call($key, $color, $value...);
    }

    // Return the new color
    @return $color;
    }

    .foo {
    color: color('light');
    }
    3 changes: 3 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    .foo {
    color: #ffcf4d;
    }