Insert a comment above a selector in a nested media query in Sass

Question

I'm using UnCSS with Sass. UnCSS removes unused CSS automatically; however, sometimes it removes things you don't want removed. You can include a comment above a rule like so:

/* uncss:ignore */
.example { color: red; }

...to tell UnCSS to ignore that rule and include it in the final output.

I'm wondering how to include that comment in a nested media query in Sass:

SCSS:

/* uncss:ignore */
.example {
  color: red;
  @media (min-width: 500px) {
    color: blue;
  }
}

Output:

/* uncss:ignore */
.example {
  color: red;
}

@media (min-width: 500px) {
  .example {
    color: blue;
  }
}

Desired output:

/* uncss:ignore */
.example {
  color: red;
}

@media (min-width: 500px) {
  /* uncss:ignore */
  .example {
    color: blue;
  }
}

Note the extra /* uncss:ignore */ comment in the Desired Output example. Is it possible to do this in Sass?

Answer 1

I don't think it's possible. If it doesn't cause you difficulty you could re-write your SCSS to look like this:

/* uncss:ignore */
.example {
  color: red;
}


@media (min-width: 500) {
  /* uncss:ignore */
  .example {
    color: blue;
  }
}