sass 键和值从一个 sass 文件映射到另一个

Question

我有多个 scss 文件。

例子：

main.scss：主文件包含一个颜色列表，这里我只用了2个作为例子。

$ex-color-main: (

    ‘red’: (
        ‘bg’      : #bd1118,
        ‘text’    : #fff,
    ),

    ‘green’: (
        ‘bg’      : #93b923,
        ‘text’    : #fff,
    ),

);

$ex-print-bg: true !default;
$ex-print-color: true !default;
$color: $ex-color-main;

@if ($ex-color-classes == true) {
    @each $key, $value in $color {
        @include ex-create-classes($key, $value, $ex-print-bg, $ex-print-color);
    }
}

@if ($ex-colors-cssvars == true) {

    :root {
        @each $key, $value in $color {
            --ex-color--#{$key}: #{map-get($value, ‘bg’)};
            --ex-fgcolor--#{$key}: #{map-get($value, ‘text’)};
        }
    }
}

我正在使用 npm 节点模块进行编译。主文件编译成css文件如下：

ex-color-classes.css：

.ex-color--red {
    color: #bd1118; }

.ex-color—-green {
    color: #93b923; }

ex-color-css-vars.css：

:root {
    —-ex-bg-—red: #bd1118;
    —-ex-color-—red: #fff;
    —-ex-bg—-green: #93b923;
    —-ex-color—-green: #fff; }

page.scss：页面文件必须包含 main 中的颜色，又是一个很长的列表

$ex-color-page: (

    ‘danger’: include keys and values from red,

    ‘success’: include keys and values from green,

);

我可以使用：

$ex-color-page: (

    ‘danger’: (
        ‘bg’: var(--ex-bg--red),
        ‘text’: var(--ex-color--red),
    ),

    ‘success’: (
        ‘bg’: var(--ex-bg--green),
        ‘text’: var(--ex-color--green),
    ),

);

但我想知道，有没有更简洁更好的方法将 main.scss 中的键和值导入到 page.scss 中？

Answer 1

所以我想出了一个更清洁的方法：

$ex-color-page: (

    ‘danger’: map-get($ex-color-main, 'red'),

    ‘success’: map-get($ex-color-main, 'green'),

);