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