gistfile1.less

// No media query is the first breakpoint.

// Updates for small tablets and smartphones in landscape
@smalltablet: ~"(min-width: 500px)";

// Updates for tablets in portrait
@tablet: ~"(min-width: 768px)";

// Updates for tablets in landscape and desktop
@desktop: ~"(min-width: 1024px)";

// Fixed-width layout for large screens
@large: ~"(min-width: 1400px)";

// High resolution screens e.g. Retina
@retina: ~"(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";


// Usage
.class {
    color: red;

    @media @smalltablet {
        color: blue;
    }
}

.another-class {
    background: black;

    @media @smalltablet {
        background: purple;
    }

    @media @desktop {
        background: blue;
    }

    .inside-class {
        display: none;
        @media @desktop {
            display: block;
        }
    }
}