Magento – Create new M2 breakpoint with .media-width mixin

lessmagento2

I want to change the breakpoint of some some styles inside a native M2 module (specifically Magento_Catalog/web/css/source/_module.less).

Here is a link to the bp in question.

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

I need to change this from @screen__m to a custom breakpoint (800px).

Now, you can't just change that and pass in a new value willy nilly.

According to the devdocs, you have to create a new mixin rule for a custom mixin.

As best I can see, this mixin .media-width acts as a giant switch statement. And if you haven't defined a case for a breakpoint value that is passed, it simply ignores that call.

  1. So I create a new variable in my variable.less for my new value:

@bp-xm: 800px;

  1. I add a new mixin rule into _responsive.less (I have already ported this file into my theme already). I add it to the "mobile" section, as I want this to apply on all device types, and styles-m.css is always loaded.

& when (@media-target = 'mobile'), (@media-target = 'all') {
...
@media all and (max-width: @bp-xm) {
.media-width('max', @bp-xm);
}
@media all and (min-width: (@bp-xm + 1)) {
.media-width('min', (@bp-xm + 1));
}
}

  1. I call my new rule by changing the line in the _module.less to this:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @bp-xm) {

According to the devdocs, this is all that needs doing to create a new value that is passable into the .media-width. But when I run this, the section of code I wrap this .media-width code in doesn't output at all. In the final, rendered, CSS file, this chunk of code simply doesn't exist.

I must have missed something.

How do you properly create a new breakpoint for use inside the .media-width mixin?

Best Answer

Figured it out.

So, I was correct in assuming that the .media-width mixin behaves like a switch statement.

The mixin appears to do a truthy check for the parameters that are passed (@extremum and @break), and checks to see if you have a rule that matches those values.

Ex:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @bp-xm) {

It looks at the above statement and sees if it has a case to handle where @extremum = 'min' and @break = @bp-xm.

My issue ended up being that I had successfully created 2 new mixin rules, but there were to handle the following cases:

@extremum = 'max'; @break = @bp-xm;
@extremum = 'min'; @break = (@bp-xm + 1);

But I never called it with those paramaters. I called it with these: 

@extremum = 'min'; @break = @bp-xm; // I never made a rule to handle this case

To fix my issue, I simply needed to change my call from being (@break = @bp-xm) to (@break = (@bp-xm + 1))

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = (@bp-xm + 1)) {
Related Topic