Unitless breakpoints

[johanlef]

If I want to customise the breakpoints using em, I get compatibility errors.

$grid-breakpoints: (
    default: 0em,
    watch: 20em,
    phone: 30em
    // etc.
}

It is good practice to set breakpoints in em instead of px when users change font size in their browser. See https://zellwk.com/blog/media-query-units/#concluding-the-experiments for more information why someone would like to do this. Only Safari users could get annoyed: https://adamwathan.me/dont-use-em-for-media-queries/

In any case, using a unitless number at line 42 would be very convenient.

[browner12]

While it seems like this may be a bad option according to Adam's article, it makes sense to me to make this change, and allow the user to choose whether or not the Safari bug is an issue for them.

I was not familiar with SCSS math, so I did a little digging into whether this is valid, and it turns out, it works! If you use a unitless value with a value with a unit, the unit is preserved. However, mixing units will result in an error.

.style {
    height: 500em - 100;
    width: 500px - 100;
}

compiles to

.style {
    height: 400em;
    width: 400px;
}

[andresgalante]

Hi @johanlef thanks a lot for your contribution.

There has been a lot of discussion around this issue, among them #22006, #25632, #19619, #25166, and others related to why we are using pxs instead of rems or ems

Personally, I think we should look into moving to relative units, but at this point, it'd be a breaking change for v4.

Having said that I think this is a good discussion point for v5.

[johanlef]

Okay, I understand moving to other units will be a breaking change.

@andresgalante Going from px to unitless on this particular line is not a breaking change: as @browner12 pointed out, the units are preserved.

[browner12]

Correct me if I'm wrong, but I don't believe this would be a breaking change in v4.

As I showed in my first comment, when doing math in SCSS, if one of the values is unitless, the other units will be preserved.

By merging this PR, all existing code would work as is, and it would allow people who choose to use em breakpoints to not run into a compile error.

[johanlef]

@andresgalante My proposal is about removing the unit, not changing to another one. When the unit is removed, the original unit is preserved, so this change would not cause any issues.

[mdo]

I think this is fine? Not sold on em-based media queries yet as we've gone back and forth on that a lot, but this seems fine.

[XhmikosR]

Just so that we are safe, is this backwards compatible?

[mdo]

@XhmikosR I believe so—this is Sass math, and previously we required folks to use pixels only for media queries. This opens it up so others can use ems, and doesn't prevent folks from using pixels.