Consultas extravagantes de mídia com menos magia
Seria bom envolver css-styles para diferentes resoluções dentro de algumas classes css usando menos.
Eu gostaria de fazer algo como:
footer {
width: 100%;
}
.tablet {
footer {
width: 768px;
}
}
.desktop {
footer {
width: 940px;
}
}
No final, algo assim deveria ser o resultado:
footer {
width: 100%;
}
@media screen and (min-width: 768px) {
footer {
width: 768px;
}
}
@media screen and (min-width: 992px) {
footer {
width: 940px;
}
}
.tablet poderia parecer de alguma forma como isto:
@media screen and (min-width: 768px) {
.tablet {
}
}
Espero que alguém tenha uma boa ideia!