// 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;
}

}