您可以在 SCSS 中动态定义变量名称吗？-解网

问：

我正在尝试创建一个 mixin，它将接受一个 ID 并在变量名称的开头声明一堆带有该 ID 前缀的变量。

像这样的东西——

@mixin declareVars($id) {
  $#{$id}-background-color: null !default;
  $#{$id}-background-image: null !default;
  $#{$id}-background-size: null !default;
  $#{$id}-background-position-x: null !default;
  $#{$id}-background-position-y: null !default;
  $#{$id}-background-repeat: null !default;
  $#{$id}-color: null !default;
  $#{$id}-border-radius: null !default;
  $#{$id}-border-width: null !default;
  $#{$id}-border-color: null !default;
  $#{$id}-padding: null !default;
  $#{$id}-margin: null !default;
}

上面抛出了一个语法错误。

此功能是否可以在 SCSS 中实现？

css sass 指南针-sass scss-mixins

@mixin defineVars($id) {
  --#{$id}-background-color: tomato;
  --#{$id}-background-image: null;
  --#{$id}-background-size: null;
  --#{$id}-background-position-x: null;
  --#{$id}-background-position-y: null;
  --#{$id}-background-repeat: null;
  --#{$id}-color: null;
  --#{$id}-border-radius: null;
  --#{$id}-border-width: null;
  --#{$id}-border-color: null;
  --#{$id}-padding: null;
  --#{$id}-margin: null;
}

:root {
  @include defineVars('some-id');
}

body {
  background-color: var(--some-id-background-color);
}

SCSS 模块的输出：

:root {
    --some-id-background-color: tomato;
    --some-id-background-image: null;
    --some-id-background-size: null;
    --some-id-background-position-x: null;
    --some-id-background-position-y: null;
    --some-id-background-repeat: null;
    --some-id-color: null;
    --some-id-border-radius: null;
    --some-id-border-width: null;
    --some-id-border-color: null;
    --some-id-padding: null;
    --some-id-margin: null;
}

body {
    background-color: var(--some-id-background-color);
}

上一个：如何在 SCSS 中使用带有字符串值的 math.sqrt

下一个：npm run start 不会编译 sass 或运行 live-server。带着奇怪的信息进行无限循环

您可以在 SCSS 中动态定义变量名称吗？

Can you dynamically define variable names in SCSS?

评论