Setting XY Grid gutter to 0 breaks margin offset

[hexagoncircle]

What should happen?

• Set the gutter value to 0
• Include xy-cell-offset with offset value
• The result should be something like:

    width: 66.66667%;
    margin-left: 16.66667%

What happens instead?

Outputs invalid declaration:

    width: 66.66667%;
    margin-left: calc(16.66667% + 0); // doesn't work with unitless number

Possible Solution

If value is 0, output property value without calc()

Test Case and/or Steps to Reproduce

Note - This test will not work in Codepen without having the mixins available so I've added the actual CSS rendered as well as my expected result.

Test Case: https://codepen.io/hexagoncircle/pen/3301fc285292192524930c01f3eab938/

Context

I need a grid without gutters. It would be preferred to set this up with the provided Sass mixins instead of using Foundation classes in HTML.

Your Environment

• Foundation version(s) used: 6.5.0-rc.2
• Browser(s) name and version(s): Chrome 68.0.3440.106

Checklist (all required):

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title is descriptive.
• The template is correctly filled.

[ncoden]

Hi @hexagoncircle 👋 ,

Thank you for the bug report. It has been resolved in #11472. We were using the fix you suggested (not using calc) in the others mixins of the XY Grid, but not this one.

Feel free to review the pull request to ensure it is what you expected.

[hexagoncircle]

Thanks, @ncoden - that was fast! I have reviewed this locally and it works as expected.