Can you create custom breakpoints with LESS mixins?

Question

Most of the time, I use LESS variables with preset breakpoints for media queries like this:

@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 refer to an arbitrary breakpoint in my .less stylesheet without having to set a new preset value in my separate mixin file.

You can do this in SASS. The mixin 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'm imagining 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 grabs the rest of the styling inputted by the developer. I love SASS, but I can't use it at work.

Does anyone know of a LESS-based solution to this problem?

Answer 1

It is now similar to SASS

As of 1.7.0 (2014-02-27) you can now use @rules in place of the sassy @content.

For example:

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

ul {
  width: 100%;
  .breakpoint-small({
    width: 50%;
  });
}

outputs, as expected:

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

The differences being:

• function takes @rules as an argument
• additional parenthesis when invoking the function
• '.' syntax as opposed to '@include'

This can be combined with an additional argument to provide syntax equivalent to a nice bit of sass:

.breakpoint(@size, @rules) {
  @media screen and (min-width: @size) { @rules(); }
}

@large: 60em;
ul {
  .breakpoint(@large, {
    width: 50%;
  });
}

edit: To be honest I prefer a way more simple approach in less:

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

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

Answer 2

Using Pattern Matching

I believe this achieves 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);

Output CSS

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

By defining a set pattern mixin for the various sizes, and then using that pattern within the generic .bp-min(@min) mixin, I believe we have the same abstraction in LESS that you have in SCSS, with slightly more code because I believe SCSS defines and calls in one @include statement, whereas here we need two.

Answer 3

(In addition to the prev. 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 stuff.

Answer 4

In my case I needed my variables to reference other variables, so some of these solutions did not work. Here is what I went with.

@bp-xs: ~"screen and (max-width:"@screen-xs-max~")";
@bp-sm: ~"screen and (max-width:"@screen-sm-max~")";
@bp-md: ~"screen and (max-width:"@screen-md-max~")";
@bp-lg: ~"screen and (max-width:"@screen-lg-max~")";

and then use them like so

@media @bp-sm {
  ...
}