使用SASS/SCSS生成CSS变量

我目前正在使用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;
}

我从创建SCSSMap开始：

$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来循环遍历该Map，并从中创建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首先出现，但我不确定如何微调格式。

为了给予一个总体的概述，语法#{…}被称为interpolation，它是将动态值注入CSS变量（自定义属性）的唯一方法。
CSS自定义属性（也称为CSS变量）具有一种不同寻常的声明语法：它们允许在声明值中包含几乎任何文本，而且JavaScript可以访问这些值，因此任何值都可能与用户相关，这包括通常解析为SassScript的值。
因此，Sass解析自定义属性声明的方式与解析其他属性声明的方式不同。所有令牌（包括那些看起来像SassScript的令牌）都按原样传递给CSS。唯一的例外是interpolation，这是将动态值注入自定义属性的唯一方法。

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

使用SASS/SCSS生成CSS变量

1条答案

相关问题

热门标签

最新问答