使用 SCSS 生成 CSS 变量

Question

我目前正在使用 SCSS 尝试重新创建一个 CSS 块。 CSS块如下：

:root {
    --Franklin-Blue: #1d1c4d;
    --Light-Blue: #4e5d94;
    --Pale-Blue: #7289da;
    --Pure-White: #ffffff;
    --VLight-Grey: #99aab5;
    --Middle-Grey: #2c2f33;
    --Dark-Grey: #23272a;
    --body-color: #ffffff; 
    --text-color: #000000; 
    --bold-text: #000000; 
    --White-Blue: #ffffff; 
}

[data-theme="dark"] {
    --Franklin-Blue: #000000;
    --Light-Blue: #0d0d0d;
    --Pale-Blue: #2c2f33;
    --Pure-White: #ffffff;
    --VLight-Grey: #99aab5;
    --Middle-Grey: #2c2f33;
    --Dark-Grey: #23272a;
    --body-color: #000000;
    --text-color: #ffffff;
    --bold-text: #7289da;
    --White-Blue: #7289da;
}

所以，我开始创建这张 SCSS 地图：

$themes: (
    dark: (
        'Franklin-Blue': #000000, 
        'Light-Blue': #0d0d0d,
        'Pale-Blue': #2c2f33,
        'Pure-White': #ffffff,
        'VLight-Grey': #99aab5,
        'Middle-Grey': #2c2f33,
        'Dark-Grey': #23272a, 
        'body-color': #000000,
        'text-color': #ffffff,
        'bold-text': #7289da,
        'White-Blue': #7289da
    ), 
    default:( 
        'Franklin-Blue': #1d1c4d, 
        'Light-Blue': #4e5d94,
        'Pale-Blue': #7289da, 
        'Pure-White': #ffffff,
        'VLight-Grey': #99aab5,
        'Middle-Grey': #2c2f33,
        'Dark-Grey': #23272a,
        'body-color': #ffffff,
        'text-color': #000000,
        'bold-text': #000000,
        'White-Blue': #ffffff 
    )
);

然后我创建了这个 mixin 以循环遍历该映射并从中创建 CSS 变量：

@mixin theme() {
    @each $theme, $map in $themes {
        @if $theme == "default" {
            :root {
                @each $key, $value in $map {
                    #{--$key}: $value;
                }
            }
        }
        @else {
            [data-theme="#{$theme}" ] {
                @each $key, $value in $map {
                    #{--$key}: $value;
                }
            }
        }
    }
}

@include theme();

我可以告诉我我的路线是正确的，但是它创建的 CSS 有点偏离 - 我最终得到这个：

[data-theme=dark] {
  -- Franklin-Blue: #000000;
  -- Light-Blue: #0d0d0d;
  -- Pale-Blue: #2c2f33;
  -- Pure-White: #ffffff;
  -- VLight-Grey: #99aab5;
  -- Middle-Grey: #2c2f33;
  -- Dark-Grey: #23272a;
  -- body-color: #000000;
  -- text-color: #ffffff;
  -- bold-text: #7289da;
  -- White-Blue: #7289da;
}

:root {
  -- Franklin-Blue: #1d1c4d;
  -- Light-Blue: #4e5d94;
  -- Pale-Blue: #7289da;
  -- Pure-White: #ffffff;
  -- VLight-Grey: #99aab5;
  -- Middle-Grey: #2c2f33;
  -- Dark-Grey: #23272a;
  -- body-color: #ffffff;
  -- text-color: #000000;
  -- bold-text: #000000;
  -- White-Blue: #ffffff;
}

如何确保引号出现在该属性选择器中，以及如何从 CSS 变量中删除空格？

我知道我需要将默认设置移到其他主题之上，以使 :root 先出现，但我不确定如何微调格式。

Answer 1

使用下面的代码段，-- 在外面：

@mixin theme() {
  @each $theme, $map in $themes {
    @if $theme == "default" {
      :root {
        @each $key, $value in $map {
          --#{$key}: #{$value};
        }
      }
    } @else {
      [data-theme="#{$theme}"] {
        @each $key, $value in $map {
          --#{$key}: #{$value};
        }
      }
    }
  }
}

@include theme();

这是我得到的输出：

[data-theme="dark"] {
  --Franklin-Blue: #000000;
  --Light-Blue: #0d0d0d;
  --Pale-Blue: #2c2f33;
  --Pure-White: #ffffff;
  --VLight-Grey: #99aab5;
  --Middle-Grey: #2c2f33;
  --Dark-Grey: #23272a;
  --body-color: #000000;
  --text-color: #ffffff;
  --bold-text: #7289da;
  --White-Blue: #7289da;
}

:root {
  --Franklin-Blue: #1d1c4d;
  --Light-Blue: #4e5d94;
  --Pale-Blue: #7289da;
  --Pure-White: #ffffff;
  --VLight-Grey: #99aab5;
  --Middle-Grey: #2c2f33;
  --Dark-Grey: #23272a;
  --body-color: #ffffff;
  --text-color: #000000;
  --bold-text: #000000;
  --White-Blue: #ffffff;
}
/*# sourceMappingURL=main.css.map */

使用 SCSS 生成 CSS 变量

Using SCSS to generate CSS variables

css

sass

css-variables

scss-mixins