@media all and (min-width: 960px) {
b {
font-weight: normal;
}
}
@media (min-width: 980px) {
a {
color: red;
}
}
@media all {
/* hey */
p {
color: blue;
a {
color: green;
&:after {
content: ">>";
}
}
}
span {
display: inline-block;
}
}
a b c {
/* a */
blee: blee;
/* b */
d e f {
blah: blah;
bloo: bloo;
}
/* c */
g h, i j {
@media print and (foo: 1 2 3), (bar: 3px hux(muz)), not screen {
/* aa */
hey: ho;
/* bb */
k l m {
hee: fee;
}
/* cc */
haa: hoo;
/* dd */
}
}
/* d */
blah: blah;
}
@mixin simple-media-query($max-width, $min-width) {
@media only screen and (max-width : $max-width) and (min-width : $min-width) {
@content;
}
}
@mixin test($value) {
border-color: $value;
}
body {
@include test("#ccc");
@include simple-media-query(900px, 400px) {
border-color: black;
}
}
$foo: 23;
$bar: 45;
@media only screen and (max-width: $foo) and (min-width: $bar) {
hey {
ho: hoo;
}
}
@media (max-width: 200) and (min-width: 100) {
div {
color: red;
}
}
@media not bl#{ah} and (width: 200px) {
div {
color: brown, blue, black;
}
}
@mixin media($var1, $var2) {
@media screen and ($var1: $var2) {
@content;
}
}
@include media(max-device-width, 500px) {
foo {
bar: "works";
}
}
div {
color: red;
span {
color: blue;
@media screen {
p {
color: green;
}
}
}
}