Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update the colors in one location to re-theme your application and eliminate manual find and replace.
$color-primary: indigo; $color-secondary: blue; $color-support: deeppink; $theme-colors: ( primary: $color-primary, secondary: $color-secondary, support: $color-support ); @function theme-color($key) { @return map-get($theme-colors, $key); } h1 { color: theme-color(primary); } a { background-color: theme-color(support); color: #fff; border-radius: 8px; text-decoration: none; padding: 0.25em 0.75em; &:hover { background-color: scale-color(theme-color(support), $lightness: -30%); } }
[SCSS] Access Theme Color Values With Sass
原文：https://www.cnblogs.com/Answer1215/p/12914353.html