Can you create custom breakpoints with LESS mixins?

Question

In most cases, I use LESS variables with predefined breakpoints for media queries, for example:

@s-max : ~"screen and (max-width: 40em)"; @m-max : ~"screen and (max-width: 50em)"; @l-max : ~"screen and (max-width: 60em)"; USAGE .some-class { color: red; @media @s-max { color: blue; } } 

But sometimes I would like to be able to reference an arbitrary breakpoint in my .less stylesheet without having to set a new setpoint in my separate mixin file.

You can do it in SASS. Smeshin looks like this:

 @mixin bp-min($canvas) { @media only screen and (min-width:$canvas) {@content;} } USAGE @include bp-min(750px) { //responsive styling for min-width of 750px } 

In LESS, I imagine that the equivalent mixin would look something like this:

 .bp-min(@min) { @media only screen and (min-width:@min)... } 

The only problem is the lack of the {@content} argument in LESS, which captures the rest of the style introduced by the developer. I like SASS, but I can’t use it at work.

Does anyone know of a LESS solution to this problem?

Answer 1

Using pattern matching

I believe this is achieved by what you want:

LESS

 /* generic caller */ .bp-min(@min) { @media only screen and (min-width:@min) { .bp-min(@min, set); } } /* define them */ .bp-min(750px, set) { test: (@min - 300px); } .bp-min(400px, set) { test: (@min - 100px); } /* call them */ .bp-min(750px); .bp-min(400px); 

CSS output

 @media only screen and (min-width: 750px) { test: 450px; } @media only screen and (min-width: 400px) { test: 300px; } 

By defining a combination of set patterns for different sizes, and then using this pattern in the general .bp-min(@min) metaphor .bp-min(@min) , I believe that we have the same abstraction in LESS as in SCSS, with a bit more code, because I that SCSS defines and calls one @include , whereas here we need two.

Answer 2

Now it looks like SASS

Starting from 1.7.0 (2014-02-27) you can now use @rules instead of sassy @content.

For example:

 .breakpoint-small(@rules) { @media screen and (min-width: 40em) { @rules(); } } ul { width: 100%; .breakpoint-small({ width: 50%; }); } 

as expected:

 ul { width: 100%; @media screen and (min-width: 40em) { width: 50%; } } 

The differences are as follows:

• function takes @rules as argument
• extra parenthesis when calling a function
• '' syntax as opposed to '@include'

This can be combined with an additional argument to provide syntax equivalent to the good sass bit:

 .breakpoint(@size, @rules) { @media screen and (min-width: @size) { @rules(); } } @large: 60em; ul { .breakpoint(@large, { width: 50%; }); } 

edit . Honestly, I prefer a simpler approach:

 @break-large: ~"screen and (min-width: 60em)"; ul { @media @break-large { width: 50%; } } 

Source: I also use sass at home and less at work

Answer 3

(In addition to the previous answer) Or something like this:

 .bp-min(@canvas) { @media only screen and (min-width: @canvas) {.content} } // usage: & { .bp-min(900px); .content() { color: red; }} & { .bp-min(600px); .content() { color: blue; }} // more usage examples: .class-green { .bp-min(450px); .content() { color: green; }} & { .bp-min(300px); .content() { .class-yellow { color: yellow; } .class-aqua { color: aqua; } }} 

Replace .content with .- if you prefer shorter things.