Variable outputs ms function, not value

[jackmcconnell]

Pretty sure this isn't a bug with modular scale but wanted to ask here to see if you can help.

I have a variable defined like so: $primary-margin: ms(6);
I use it like this in my Sass files: margin-bottom: $primary-margin;
When the Sass compiles to CSS however, it looks like this: margin-bottom: ms(6);

Naturally, it should be outputting a value (px, rem, em, or %) though. I've tried:
margin-bottom: calc($primary-margin); (calculating first)
margin-bottom: #{$primary-margin}; (interpolation)
...but nothing seems to work.

Do you know why this might be or what I need to do to get this to work?

Thanks,
Jack

[scottkellum]

@voltronik It sounds like the plugin is not installed properly and the ms() function is not found in your stylesheet. When a Sass function is not available it outputs the function as you see it.

What method did you use to install modular scale?

[jackmcconnell]

Hi @scottkellum - thanks for getting back to me.
I used Bower via CodeKit. Just checked and the plugin is up to date (v2.1.3 according to CodeKit).

I'm referencing the file in my style.scss file like so:
@import "../../bower_components/modular-scale/stylesheets/modular-scale";

I then have a variables.scss file that has $primary-margin: ms(6); in it, referenced after the above import.
I then reference this in a base.scss file which is imported last in my style.scss file.

It works everywhere else, just not when being reference within a variable.
If I replace margin-bottom: $primary-margin; with margin-bottom: ms(6); it works perfectly.

[scottkellum]

Hm, that sounds like a Sass bug then, Sass should be parsing that as a function.

edit: I’m chatting with some people to figure out where this issue is.

[jackmcconnell]

Thanks!

[johnstonian]

i have experienced the same issue. was the bug figured out? if so, what is the fix?

thank you!