Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

span function return calc(), but not percentages. #679

Open
leotankilevich opened this issue Aug 22, 2018 · 5 comments
Open

span function return calc(), but not percentages. #679

leotankilevich opened this issue Aug 22, 2018 · 5 comments

Comments

@leotankilevich
Copy link

leotankilevich commented Aug 22, 2018

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
Copy link
Member

mirisuzanne commented Aug 22, 2018

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
Copy link

its-rj commented Feb 27, 2019

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
Copy link
Member

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
Copy link
Member

mirisuzanne commented Feb 27, 2019

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

@its-rj
Copy link

its-rj commented Mar 1, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants