用 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)} 返回string。所以Sass 不能对其进行任何数学运算。

答案是使用string-to-number解析器。我在这里用过一个：sassmeister，由https://github.com/HugoGiraudel制作

我为您提供了解决方案的要点：http://sassmeister.com/gist/b77a6f3b5ef798111c59

最有价值的部分是：

@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;
}