Wow! I just found out that you can do this awesomeness with LESS:
Inline Media Queries
header {
background-color: red;
@media screen only and (min-width: 20em) {
background-color: blue;
}
}
Which when compiled into CSS returns us with this.
header {
background-color: red;
}
@media screen only and (min-width: 20em) {
header {
background-color: blue;
}
}
Using &
to put a class before instead of after
You can use the &
after (normally before to combine selector strings) which takes the preceding element and then puts the .ie8 class in front of it. So for example writing this LESS.
header {
background-color: red;
.ie8 & {
background-color: blue;
}
}
Which gives us this CSS.
header {
background-color: red;
}
.ie8 header {
background-color: blue;
}
Why this is cool
This really helps prevent fragmentation of styles. Before learning these techniques, I'd often put IE styles in their own ie.less
sheet and media queries in media-queries.less
, but with these new techniques, I can keep styles bundled with their other relevant rules.