calculating variables-arrays with SCSS

Question

I'm using gulp to create sprites. Here is what i'm receiving at the one of the image

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

It is array with data of the sprite image. I need to get a half of the height of the one sprite element. My mixin is:

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

And finally my code is:

.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 is not compiling. What am I doing wrong?

Answer 1

There's a casting error in your code. #{nth($sprite, 6)} returns string. So Sass can not do any math operations on it.

The answer is to use string-to-number parser. I have used the one here: sassmeister, made by https://github.com/HugoGiraudel

I have made a gist for you with the solution: http://sassmeister.com/gist/b77a6f3b5ef798111c59

The most valuable part is:

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

And the correct output:

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