使用SASS/SCSS生成CSS变量。

Question

使用SASS/SCSS生成CSS变量。

4

我目前正在使用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`先出现，但我不确定如何微调格式。

- Andrew Corrigan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Youssouf Oumar · Accepted Answer

为了给大家一个概览，语法#{...}被称为插值，这是将动态值注入到CSS变量（自定义属性）中的唯一方法。以下是文档中的引用：

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

正因为如此，Sass以不同于其他属性声明的方式解析自定义属性声明。所有标记，包括那些看起来像SassScript的标记，都原封不动地传递给CSS。唯一的例外是插值，这是将动态值注入到自定义属性中的唯一方法。

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

你的错误在于把--放在插值大括号({})内部。这样会成功：

@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();