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