cancel
Showing results for 
Search instead for 
Did you mean: 

Developing a theme with LESS

Developing a theme with LESS

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?

3 REPLIES

Re: Developing a theme with LESS

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 Smiley Happy 
 

Re: Developing a theme with LESS

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

Re: Developing a theme with LESS

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 Smiley Happy