使用SASS/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

总体而言，该语法#{\xe2\x80\xa6}称为插值，它是将动态值注入 CSS 变量（自定义属性）的唯一方法。这是文档的引用：

\n

\n

CSS 自定义属性（也称为 CSS 变量）具有不寻常的声明语法：它们的声明值中几乎允许任何文本。更重要的是，这些值可由 JavaScript 访问，因此任何值都可能与用户相关。这包括通常被解析为 SassScript 的值。

\n

\n

\n

因此，Sass 解析自定义属性声明的方式与其他属性声明不同。所有标记，包括那些看起来像 SassScript 的标记，都会按原样传递到 CSS。唯一的例外是interpolation，这是将动态值注入自定义属性的唯一方法。

\n

\n

$primary: red;\n:root {\n  --primary: #{$primary}; // this one works\n  --primary: $primary;    // this does not\n}\n

\n

您犯的错误是将 放在--插值大括号 ( {}) 内。这会起作用：

\n

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

\n