JSFiddle - React, Tailwind, and code Playground

by Premchand R

HTML

<h1>Easy Media Queries Shortcodes (w/ LESS) + tester tag</h1>

<section>
    <h2>Media Queries Shortcodes <small>using LESS</small></h2>
    <p>I've been using this method for writing media queries on a couple of projects now and I'm growing very fond of it. It's pretty simple:</p>

    <p>Just set your breakpoints via LESS...</p>
    <pre>
// Breakpoints
// ------------------------- Source: http://blog.scur.pl/2012/06/variable-media-queries-less-css/
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";
    </pre>

    <p>Then use the variables you defined in your LESS files...</p>
    <pre>
section, div, span {
    @media @mobile {
      background: orange;
    }
    @media @tablet {
      background: purple;
    }
    @media @desktop {
      background: green;
    }
    @media @desktop-xl {
      background: blue;
    }
    @media @desktop, @desktop-xl {
      color: black;
    }
}
    </pre>
    <p>In the case of this demo, I adjusted the widths of the &lt;section&gt; tags.</p>

</section>

<section>
    <h2>Tester Tag <small>for Media Queries</small></h2>
    <p>Since I was testing out media queries, I wanted an easy way to tell what breakpoint I was currently viewing. Applying the following code to the body tag allowed me to visualize the breakpoints without getting in the way of my site design:</p>
    <pre>
  &:after { /*This adds a label in the top-left corner that displays the current media query state.*/
    background: red;
    color: @white;
    content: "undefined";
    left: 0;
 ...

SCSS

// Breakpoints
// ------------------------- Source: http://blog.scur.pl/2012/06/variable-media-queries-less-css/
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";


body {
    &:after { /*This adds a label in the top-left corner that displays the current media query state.*/
    background: red;
    color: @white;
    content: "undefined";
    left: 0;
    .opacity(80);
    padding: .5em 1em;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 99;
    @media @mobile {
      background: orange;
      content: "mobile";
    }
    @media @tablet {
      background: purple;
      content: "tablet";
    }
    @media @desktop {
      background: green;
      content: "desktop";
    }
    @media @desktop-xl {
      background: blue;
      content: "desktop-xl";
    }
  }
}

section {
    margin: 3%;
    @media @mobile {
      display: block;
      margin-top: 4em;
      width: 85%;
    }

    @media @tablet {
      width: 37%;
    }

    @media @desktop, @desktop-xl {
      width: 40%;
    }

}

/* STOP HERE. The rest of this CSS is for style purposes only and is not needed for the demo to function.
              (but be sure to substitue out the LESS variables/mixins I used above)
   ---------------------------------------------------------------------------------------------------- */

/* =VARIABLES (LESS @variables do not get compiled into the final CSS file)
   ----------------------------------------------------------------------------------------------------...