Developing a theme with LESS

[neilcarpenter]

Hi,

I'm in the process of creating a theme with magento\blank as the parent.

I'm trying to get my head around the whole LESS, breakpoints, styles-l, styles-m workflow etc...

So far, most of my edits are in my _extend.less file located in my themes /web/css/source directory and has kind of been working fine.

The problem I currently face is that styles I add in particular .media-width() mixins are being either overwritten or completely ignored when I view the front end.

The docs say that the Blank and Luma themes implement the following breakpoints: 320px, 480px, 640px, 768px, 1024px, 1440px.

With 768px being the breakpoint that switches between mobile and desktop views

As explained here...

Take this _extend.less file as an example, the comments show what happens on the frontend.

// common & mobile styles (0px) up
& when (@media-common = true) {
    // used right up to 767px
    .home-categories {
        background: purple;
    }
}

// xxsmall (320px) up!
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xxs) {
    // completely ignored
    .home-categories {
        background: green;
    }
}

// extra small (480px) up!
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xs) {
    // completely ignored
    .home-categories {
        background: blue;
    }
}

// small (640px) up!
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    // loaded after 640px, but overwritten by purple defined in (@media-common = true) block
    .home-categories {
        background: red;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    // used from 768px to 1023
    .home-categories {
        background: orange;
    }
}

// desktop (1024px) up!
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    // used from 1024px to 1439px
    .home-categories {
        background: brown;
    }
}

// xlarge (1440px) up!
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
    // used from 1440px upwards
    .home-categories {
        background: pink;
    }
}

How am I meant to target elements on screen sizes between 480px and 767px?

[KarlaSa]

look file at lib/web/css/source/lib/_responsive.less

there are defined media groups. Not all breakpoints have 'min' defined. Some have only 'max'.
Use only media groups that are defined and maybe you don't need to define media-common if you define ... - 767px and 768px -... values  
 

[neilcarpenter]

I will have a look thanks @KarlaSa - Can you explain what the media-common should be used for then?

[KarlaSa]

In less files you have to define media. So compiler knows where to put css (style-m.css or style-l.css)  Example: if you do not define media and add just regular style rules in less file. You will end up with same code in style-l and style-m file. I will use media-common for default design that is in mobile and desktop or only in most of breakpoints and will override media-common value in  min screen__l breakpoint or something like that.
Sorry for my english. Hope it helps