I am trying to reuse a set of classes set inside a media query as mixins to use throughout a website instead of embedding un-semantic class names in html.
Here is an example of my problem.
@media (min-width: 1000px) {
.foo{width:120px;}
.foo-2{width:150px;}
}
@media (max-width: 999px) {
.foo{width:110px;}
.foo-2{width:120px;}
}
.bar{.foo;}
.bar-2{.foo;}
.bar-3{.foo-2;}
the .bar-X will never get any styles applied. I can guess that this is happening because LESS doesn't create .bar-X inside media queries, so nothing will ever be applied.
Is this a bug in LESS, or something I can never achieve? A workaround to this would be ideal.
See Question&Answers more detail:os