基于变量-SCSS动态生成CSS类

发布于 2025-01-29 15:49:48 字数 569 浏览 4 评论 0原文

我有颜色变量（示例）：


// _colors.scss
:root, * {
  --color-primary-50: 1,1,1;
  --color-primary-100: 2,2,2;
  --color-primary-200: 3,3,3;
}

我想基于变量生成类，例如：


// _background.scss
.bg-primary-50 {
  background: rgb(var(--color-primary-50));
}

.bg-primary-100 {
  background: rgb(var(--color-primary-100));
}

.bg-primary-200 {
  background: rgb(var(--color-primary-200));
}

如果需要更改或添加新颜色并动态填充我的_background，我想简化我的未来修改。基于_Colors变量的类别的文件。

似乎有很多单调的工作。有什么方法可以得到这个结果吗？也许我应该更改文件结构？

原文

I have color variables (example):


// _colors.scss
:root, * {
  --color-primary-50: 1,1,1;
  --color-primary-100: 2,2,2;
  --color-primary-200: 3,3,3;
}

And I want to generate classes based on the variables, for example:


// _background.scss
.bg-primary-50 {
  background: rgb(var(--color-primary-50));
}

.bg-primary-100 {
  background: rgb(var(--color-primary-100));
}

.bg-primary-200 {
  background: rgb(var(--color-primary-200));
}

I want to simplify my future modifications if I need to change or add new colors and dynamically populate my _background file with classes based on _colors variables.

It seems like a lot of monotonic work. Is there any way to get this result? Perhaps I should change my file structure?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬花如无物 2025-02-05 15:49:48

使用@each循环。而不是在中创建vars：root在单个var中添加这些代替（请参见下面的示例）

$colors : (
  "primary-50":  "1,1,1",
  "primary-100": "2,2,2",
  "primary-200": "3,3,3",
);

@each $color, $value in $colors {
    .bg-#{$color} {
        background-color: rgb($value);
    }
}

上述代码编译

.bg-primary-50 {
  background-color: #010101;
}
.bg-primary-100 {
  background-color: #020202;
}
.bg-primary-200 {
  background-color: #030303;
}

为CSS- 变量

:root {
    @each $color, $value in $colors {
        --color-#{$color}: rgb($value);
    }
}

CSS变量

:root {
  --color-primary-50: #010101;
  --color-primary-100: #020202;
  --color-primary-200: #030303;
}

和

use @each loop. Instead of creating the vars in :root add those in a single var (see below example)

$colors : (
  "primary-50":  "1,1,1",
  "primary-100": "2,2,2",
  "primary-200": "3,3,3",
);

@each $color, $value in $colors {
    .bg-#{$color} {
        background-color: rgb($value);
    }
}

the above code compiled into

.bg-primary-50 {
  background-color: #010101;
}
.bg-primary-100 {
  background-color: #020202;
}
.bg-primary-200 {
  background-color: #030303;
}

And for CSS --variables

:root {
    @each $color, $value in $colors {
        --color-#{$color}: rgb($value);
    }
}

and ???? you have CSS Variables

:root {
  --color-primary-50: #010101;
  --color-primary-100: #020202;
  --color-primary-200: #030303;
}

Like you mentioned in your comment "will this solution work for the light and dark modes?" for that you can do something like this

html[data-color-mode="dark"] {
  $dark-mode-colors: (
    "primary-color-50": "0, 0, 0",
    "primary-color-100": "1, 1, 1",
    "primary-color-200": "2, 2, 2",
  )

  @each $color, $value in $colors {
    .bg-#{$color} {
        background-color: $value;
    }
  }
}

// change your color scheme as you prefer method will remain the same
html[data-color-mode="light"] {
  $light-mode-colors: (
    "primary-color-50": "0, 0, 0",
    "primary-color-100": "1, 1, 1",
    "primary-color-200": "2, 2, 2",
  )

  @each $color, $value in $colors {
    .bg-#{$color} {
        background-color: $value;
    }
  }
}

回复收藏 0 原文

~没有更多了~