使用 SCSS 计算变量数组

Question

我正在使用 gulp 创建精灵。这是我在其中一张图片中收到的内容

$s-ico-webdesign: '442px', '0px', '-442px', '0px', '60px', '60px', '538px', '519px', 'sprite.png';

是精灵图片数据的数组。我需要得到一个精灵元素高度的一半。我的混合是：

@mixin sprite-top-half-margin($sprite) {
  $height: #{nth($sprite, 6)} / 2;
  margin-top : $height;
}

最后我的代码是：

.add-nav .sub-menu .web-design a:before {
  @include sprite($s-ico-webdesign);
  @include sprite-top-half-margin($s-ico-webdesign);
  left:22px;
}

margin-top 没有编译。我做错了什么？

Answer 1

您的代码中存在转换错误。 #{nth($sprite, 6)} returns string。所以 Sass 不能对它做任何数学运算。

答案是使用 string-to-number 解析器。我在这里使用了一个：sassmeister, made by https://github.com/HugoGiraudel

最有价值的部分是：

@mixin sprite-top-half-margin($sprite) {
  $height: to-number(nth($sprite, 6)) / 2;
  margin-top : $height;
}

以及正确的输出：

.add-nav .sub-menu .web-design a:before {
  margin-top: 30px;
  left: 22px;
}

calculating variables-arrays with SCSS