0

I use gulp and gulp-less to preprocess my .less files, and over time I've come up with some pretty complex structures that, while allowing me some real flexibility, also sometimes make debugging difficult.

Currently, I have the following output at the beginning of my main.css file:

@media screen and (max-width: 767px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (max-width: 767px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (max-width: 767px) {
}
@media (max-width: 767px) {
}

Since all of my media queries are defined with variables and called with a mixin, it seems like it should be pretty is easy to debug....but, there is nothing in any of my files that should produce this - at least as far as I can tell - in fact there aren't even that many candidates to parse through that could potentially produce this - so I'm a little stuck.

But really, the larger question - regardless of what's causing this - is, how to debug potentially complicated less output. Aside from sticking comments everywhere, there are no obvious tricks that I know of.

Any help?

P.S.
  • 15,970
  • 14
  • 62
  • 86
dgo
  • 3,877
  • 5
  • 34
  • 47
  • Could you show how variables are defined within media blocks? (most likely this is a result of variables *alone* (i.e. w/o any CSS code) defined in a media block - which indeed would be a bug (even though such code does not make sense)). – seven-phases-max Nov 17 '16 at 02:53
  • Have you done anything to try to isolate the source? I would start by removing half of your LESS, see if that still has the same result, if so remove half of that otherwise remove half of the other half, etc – henry Nov 21 '16 at 03:54

0 Answers0