用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

我已经为您解决了问题：In JSP iframe src, Page (html / Jsp) are not loading

最有价值的部分是：

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