tf8flq
Last Updated: February 25, 2016
·
226
· jdell64
None

Media call Mixins with Less

I was working off of this page here:
http://www.iambacon.co.uk/blog/life-is-now-easier-create-media-query-mixins-with-rulesets-less-css

I wanted to create a responsive functions that worked well with the default bootstrap col-xs-* and other sizes, so I came up with this:

.responsive(@maxWidth; @rules) {
    @media only screen and (max-width: @maxWidth) {
        @rules();
    }
}

.extraSmallScreen(@rules) {
    .responsive(480px, {
    @rules(); })
}

.smallScreen(@rules) {
    .responsive(768px, {
    @rules(); })
}

.mediumScreen(@rules) {
    .responsive(992px, {
    @rules(); })
}

.largeScreen(@rules) {
    .responsive(1200px, {
    @rules(); })
}

Usage:

@import "variables/myMediaCalls";

.extraSmallScreen({
  .myBox {
    width: 250px;
  }
});

Now I can make media calls even faster.

Say Thanks
Respond

1 Response
Add your response

23340
None

Just one thing I noticed... I tried to pass in a comment in that rules block, and my sass compiler complained... no comments in the block.

over 1 year ago ·