Sass CSS4 Variable Manipulation

Sass CSS4 Variable Manipulation.markdown

Sass CSS4 Variable Manipulation

Thinking about how to combine Sass and CSS4 Variables. Read my post CSS4 Variables and Sass for more info on the technique.

A Pen by Jake Albaugh on CodePen.

License.

style.scss

// color variable map in Sass
$colors: (
  text: #FFF,
  background: #333,
  primary: (
    base: #FFBB00,
    light: lighten(#FFBB00, 15%),
    dark: darken(#FFBB00, 15%)
  ),
  secondary: (
    base: #0969A2,
    light: lighten(#0969A2, 15%),
    dark: darken(#0969A2, 15%)
  )
);

// size variable map in Sass
$sizes: (
  gutter: 30px,
  spacer: 15px,
  container: (sm: 750px, md: 970px, lg: 1170px ),
  viewport:  (sm: 768px, md: 992px, lg: 1200px )
);

// variable prefixes for CSS4 output
$color-prefix: --color-;
$size-prefix: --size-;

// retrieve color from map with Sass ie. `color(primary, base)`
@function color($color-name, $color-variant:nil, $true-val:false) {
  
  // we need to return the color value
  @if $true-val == true {
    // color variant is optional
    @if ($color-variant != nil) {
      // map inception, need two deep
      @return map-get(map-get($colors,$color-name),$color-variant);

    } @else {
      // single-level color, one deep
      @return map-get($colors,$color-name);

    }
  // if we're only returning the CSS4 variable
  } @else {
    // color variant is optional
    @if ($color-variant != nil) {
      // map inception, need two names
      @return var(#{$color-prefix}#{$color-name}-#{$color-variant});

    } @else {
      // single-level color, one name
      @return var(#{$color-prefix}#{$color-name});

    }
  }
}

// retrieve size from map with Sass ie. `size(viewport, sm)`
@function size($size-name, $size-variant:nil, $true-val:false) {
  
  // we need to return the size value
  @if $true-val == true {
    // size variant is optional
    @if ($size-variant != nil) {
      // map inception, need two deep
      @return map-get(map-get($sizes,$size-name),$size-variant);

    } @else {
      // single-level size, one deep
      @return map-get($sizes,$size-name);

    }
  // if we're only returning the CSS4 variable
  } @else {
    // size variant is optional
    @if ($size-variant != nil) {
      // map inception, need two names
      @return var(#{$size-prefix}#{$size-name}-#{$size-variant});

    } @else {
      // single-level size, one name
      @return var(#{$size-prefix}#{$size-name});

    }
  }
}

// define local variable
@mixin var($name,$value) {
  #{--$name}: $value;
}
// access any variable
@function v($name) {
  @return var(--#{$name});
}

/* ripped CSS4 vars out of color map */
:root {
  
  // each item in color map
  @each $name, $color in $colors {
    
    // maps require a second loop
    @if type-of($color) == "map" {
      
      // each item in sub map
      @each $subname, $subcolor in $color {  
        // --color-primary-base
        #{$color-prefix}#{$name}-#{$subname}: $subcolor;
      }
    
    // normal colors
    } @elseif type-of($color) == "color" {
      
      // --color-background
      #{$color-prefix}#{$name}: $color;
      
    }
  }

  // each item in size map
  @each $name, $size in $sizes {
    
    // maps require a second loop
    @if type-of($size) == "map" {
      
      // each item in sub map
      @each $subname, $subsize in $size {  
        // --size-viewport-md
        #{$size-prefix}#{$name}-#{$subname}: $subsize;
      }
    
    // normal sizes
    } @elseif type-of($size) == "number" {
      
      // --size-background
      #{$size-prefix}#{$name}: $size;
      
    }
  }
}

/* 
 * referencing our color variables with CSS 
 */
body {
  // right here it's Sass tho
  color: color(primary, base);
  background-color: color(background);
  @include var(
    new-primary, 
    darken(
      color(primary,base,true), 
      5%
    )
  );
  color: v(new-primary);
}


/* 
 * referencing a top-level size variable with CSS via Sass @function 
 */
.container { margin: size(spacer) auto; }


/* 
 * referencing our nested size variables with CSS via Sass @each loop 
 */
@each $name, $size in map-get($sizes,viewport) {
  @media (min-width: size(viewport, $name)) {
    /* viewport min-width: #{size(viewport, $name, true)} */
    .container { 
      /* container width: #{size(container, $name, true)} */
      width: size(container, $name); 
    }
  }
}