scss 彩色地图

Posted 2021-05-17

// Retrieve color from $colors map ie. `color(primary, base)`
@function color($color-name, $color-variant: 'base') {
    @if not map-has-key($colors, $color-name) {
        @error "ERROR: `#{$color-name}` does not exist in the $colors map";
    } @else if not map-has-key(map-get($colors, $color-name), $color-variant) {
        @error "ERROR: `#{$color-variant}` does not exist under `#{$color-name}` the $colors map";
    } @else {
        @return map-get(map-get($colors, $color-name), $color-variant);
    }
}

/*
*  BASIC COLOURS
*/
$colors: (
    blue: (
        base: #5aa8cd,
        light: #69b4d6,
        soft: #a6d9ed
    ),
    green: (
        base: #60b478,
        light: #6bc184,
        soft: #aad4b8
    ),
    indigo: (
        base: #380386,
        dark: #21024f,
        light: #582e97,
        shadow: #2b1075,
        soft: #7d72a2
    ),
);