scss 从SASS颜色图获取颜色

Posted 2021-05-18

.color {
  color: #0000FF;
  background-color: #5555FF;
}

// ----
// libsass (v3.2.5)
// ----

// Color Map
$colors: (
  blue: #0000FF,
  red: (
    base: #FF0000,
    light: #EEEEFF,
    dark: #5555FF
  )
);

// Color Function
@function get-color( $color, $shade: 'base', $map : $colors ){
  // check color exists
  @if (map-has-key($map, $color)) {
    $value: map-get($map, unquote($color));
    // check if color or map
    @if type-of($value) == color {
      // return color
      @return $value;
    }
    // check shade of color exists
    @if (map-has-key($value, $shade)) {
      // return shade of color
      @return map-get($value, $shade);
    }
  } 
  // else do nothing
  @return null;
}

.color {
  color: get-color(blue);
  background-color: get-color(red, dark);
  border-top-color: get-color(pink); // no color so null
  border-bottom-color: get-color(red, darker); // no shade in map so null
  border-right-color: get-color(green, dark); // not a map so returns color
}