at-breakpoint

[Dakuan]

This feature allows you to apply different styles to elements based on the screen width.

Usage:

// arbitrary width
.thing {
  .at-breakpoint(100px, {
    background-color: red;
  });
  .at-breakpoint(200px, {
    background-color: green;
  });
}

// bootstrap cols
.thing {
  background-color: blue;
  .at-md({
    background-color: yellow;
  });
}

[cvrebert]

Overlaps with #13014.

[cvrebert]

I don't know if at-XX is the best name, since the styles apply at size XX and larger, as opposed to exclusively at size XX.

[Dakuan]

Fair enough, this was inspired by http://susydocs.oddbird.net/en/latest/susyone/#responsive-mixins which I missed when using LESS generally.

[cvrebert]

Yeah, I wish there was a more first-class notion of breakpoints...

[mdo]

Closing in favor of #13014.