Easy SCSS color-function #sass #scss #css

color-function.scss

// Creating a map with our colors:
$colors: (
  primary:#f37021,
  secondary:#b4341d,  
);

// Declaring colors as global variables of page
:root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};
  }
}

/* Creating a function that returns our color, 
in accordance with the syntax of css-variables */
@function color($color-name) {
  @return var(--color-#{$color-name});
}

// Usage
body{
  color: color(primary);
  background-color: color(secondary);
}