Question

我试图在Sass中运行一个循环来生成以下变量：

$size-xs: 1em;
$size-sm: 1.1em;
$size-md: 1.2em;
$size-lg: 1.3em;

这是我到目前为止所做的：

$size-base:1em;
$size-increment:0.1em;

$size-list: "xs","sm","md","lg";

@each $value-size in $size-list {
    $size-#{$value-size}:#{$i};
    $i:$size-base + $size-increment;
}

我遇到的问题是$ size-被解释为变量，但它不是，它是我想要生成的一组变量的根源。关于如何实现这一目标的任何想法？

非常感谢您的帮助！

Answer 1

您得到的错误是因为变量名称不能像这样进行插值。（在定义之前，您还尝试使用$i。）

但您可以直接命名要设置样式的元素。例如：

$size-base: 1em;
$size-increment: 0.1em;
$size-list: "xs", "sm", "md", "lg";

@each $value-size in $size-list {
  $size-base: $size-base + $size-increment;
  .#{$value-size} {
    font-size: $size-base;
  }
}

您甚至可以输出静音占位符而不是元素，然后在需要时扩展它们。

$size-base: 1em;
$size-increment: 0.1em;
$size-list: "%xs", "%sm", "%md", "%lg";

@each $value-size in $size-list {
  $size-base: $size-base + $size-increment;
  #{$value-size} {
    font-size: $size-base;
  }
}

h2 {
  @extend %lg;
}

这只会编译h2样式声明。

请参阅http://sassmeister.com/gist/a400ded59756a814c47e上的示例。

Sass，将变量标记为字符串

1 个答案: