less.js/test/less/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; }
}

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

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 {
  width: 480px;
}