使用SASS生成自定义属性（CSS变量）-DEV365 开发者社区

我们都处于这种情况下，我们需要创建不同单位的变量，以便在不同的地方使用。一些示例：margin，padding border-radius。

在CSS中，您需要对每个单元进行硬编码，但是有一种方法可以节省您的时间。

在scss中，您可以使用@for循环进行相同

:root {
  @for $i from 1 through 8 {
    --unit-#{$i}: #{$i}px;
  }
}

导致CSS

:root {
  --unit-1: 1px;
  --unit-2: 2px;
  --unit-3: 3px;
  --unit-4: 4px;
}

如果要将px单位转换为rem。您可以使用助手功能

@use 'sass:math';

@function rem($value) {
  @return math.div($value, 16) * 1rem;
}

确保始终将@use 'sass:math'作为您的 *.scss文件的第一行

这样使用：

:root {
  @for $i from 1 through 4 {
    --unit-#{$i}: #{rem($i)};
  }
}

导致CSS

:root {
  --unit-1: 0.0625rem;
  --unit-2: 0.125rem;
  --unit-3: 0.1875rem;
  --unit-4: 0.25rem;
}

您也可以进一步（使用变量中的CSS变量）

:root {
  @for $i from 0 through 4 {
    @if $i == 0 {
        --base: 0.0625rem;
    } @else {
        --unit-#{$i * 2}: calc(var(--base) * #{$i * 2});
    }
  }
}

但是您需要hard code --base值。这里的--base是

1px = 1 / 16 = 0.0625rem

您可以使用我们先前创建的helper function。

导致CSS

:root {
  --base: 0.0625rem;
  --unit-2: calc(var(--base) * 2);
  --unit-4: calc(var(--base) * 4);
  --unit-6: calc(var(--base) * 6);
  --unit-8: calc(var(--base) * 8);
}