span function return calc(), but not percentages.

[leotankilevich]

Why span() function return calc() function, but not percentages.

When i'm trying to pull element like this "margin-left: 0 - span(3)".
In browser i saw : "margin-right: 0-calc(3.2rem + ((100% - 17.6rem) / 12 * 3));"

[mirisuzanne]

When you mix non-comparable units (e.g. rem and %), there is no way for Susy to calculate the output — so we build a calc() function, and pass that along to the browser. There are two possible solutions to your issue above:

1. Change your $susy settings, so that all the units are comparable. If you need help with that, you can post your $susy variable here.
2. For negative calc() output, you can use calc(0px - #{span(3)}). You can use any units on the 0, but it must have valid units in order to work. While 0% == 0px == 0em == 0rem, the calc function does not recognize unit-less 0 as a length value.

I think we have an open issue for adding explicit negative-spans to Susy, but that hasn't been built yet. PR's are always welcome.

[its-rj]

For me calc(0px - span(1)) is not compiled at all but stays like that in the CSS and thus it isn't applied.
Furthermore if I mix different units the results are quite off the grid. Unfortunately the grid specification our creative agency gave us contains 12 equal columns with a pixel based gutter.
If I change the gutter setting to a unitless value everything looks fine.
Do we have to consider anything in order to make thinks work with mixed units or do we have to convince our agency to use a flexible gutter? ;-)

[mirisuzanne]

Sorry, Sass doesn't compile inside calc() unless you specifically ask it to. Fixed that to say calc(0px - #{span(3)})

@its-rj Without seeing the actual issue, it's really hard to comment on the rest. You can use Susy's calc() output for mixed-units, but you also don't need Susy if you can move gutters into element padding, and remove them from the grid math entirely. Without any framework, you can do this:

* { box-sizing: border-box; }

$gutter: 12px;
$half-gutter: $gutter / 2;

.grid-item {
  width: percentage(3/12); // span 3 of 12, ignoing gutters
  padding: $half-gutter; // static gutters as padding
}

[mirisuzanne]

If you're still running into problems, please open a new issue with additional details.

[its-rj]

Wow, that was a quick reply! This way it's working. Thanks so much!