media.less

// For now, variables can't be declared inside @media blocks.

@var: 42;

@media print {
    .class {
        color: blue;
        .sub {
            width: @var;
        }
    }
    .top, header > h1 {
        color: (#222 * 2);
    }
}

@media screen {
    @base: 8;
    body { max-width: (@base * 60); }
}

@ratio_large: 16;
@ratio_small: 9;

@media all and (device-aspect-ratio: ~"@{ratio_large} / @{ratio_small}") {
   body { max-width: 800px; }
}

@media all and (orientation:portrait) {
    aside { float: none; }
}

@media handheld and (min-width: @var), screen and (min-width: 20em) {
    body {
        max-width: 480px;
    }
}

body {
    @media print {
        padding: 20px;

        header {
            background-color: red;
        }

        @media (orientation:landscape) {
            margin-left: 20px;
        }
    }
}

@media screen {
  .sidebar {
    width: 300px;
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

@media a {
  .first {
    @media b {
      .second {
        .third {
          width: 300px;
          @media c {
            width: 500px;
          }
        }
        .fourth {
          width: 3;
        }
      }
    }
  }
}

body {
    @media a, b and c {
        width: 95%;

        @media x, y {
            width: 100%;
        }
    }
}

.mediaMixin(@fallback: 200px) {
    background: black;

    @media handheld {
        background: white;

        @media (max-width: @fallback) {
            background: red;
        }
    }
}

.a {
  .mediaMixin(100px);
}

.b {
  .mediaMixin();
}
@smartphone: ~"only screen and (max-width: 200px)";
@media @smartphone {
  body {
    width: 480px;
  }
}

@media print {
  @page :left {
    margin: 0.5cm;
  }
  @page :right {
    margin: 0.5cm;
  }
  @page Test:first {
    margin: 1cm;
  }
  @page :first {
    size: 8.5in 11in;
    @top-left {
      margin: 1cm;
    }
    @top-left-corner {
      margin: 1cm;
    }
    @top-center {
      margin: 1cm;
    }
    @top-right {
      margin: 1cm;
    }
    @top-right-corner {
      margin: 1cm;
    }
    @bottom-left {
      margin: 1cm;
    }
    @bottom-left-corner {
      margin: 1cm;
    }
    @bottom-center {
      margin: 1cm;
    }
    @bottom-right {
      margin: 1cm;
    }
    @bottom-right-corner {
      margin: 1cm;
    }
    @left-top {
      margin: 1cm;
    }
    @left-middle {
      margin: 1cm;
    }
    @left-bottom {
      margin: 1cm;
    }
    @right-top {
      margin: 1cm;
    }
    @right-middle {
      content: "Page " counter(page);
    }
    @right-bottom {
      margin: 1cm;
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: ~"2/1"), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
  .b {
    background: red;
  }
}

.bg() {
    background: red;

    @media (max-width: 500px) {
        background: green;
    }
}

body {
    .bg();
}

@bpMedium: 1000px;
@media (max-width: @bpMedium) {
    body {
        .bg();
        background: blue;
    }
}

@media (max-width: 1200px) {
  /* a comment */

  @media (max-width: 900px) {
    body { font-size: 11px; }
  }
}

.nav-justified {
  @media (min-width: 480px) {
    > li {
      display: table-cell;
    }
  }
}

.menu
{
  @media (min-width: 768px) {
    .nav-justified();
  }
}
@all: ~"all";
@tv: ~"tv";
@media @all and @tv {
  .all-and-tv-variables {
    var: all-and-tv;
  }
}