0

Our team is going to be migrating at some point to css preprocessing. Until then, I'm advocating a half-step that relies on consistent use of standard comments to act as pseudo variables. So in the top of a stylesheet, we might define something like:

/*     #333333; /* $primary-site-color */
/*     #333333; /* $button-color */

Then, when using styles, we'd use the above like this:

h1 { color: #333333; /* $primary-site-color */ }
input { background-color: #333333; /* $button-color */ }

Both h1 and input elements currently make use of the same hex color, but if you wanted to globally replace the primary site color via find/replace on "#333333", you'd affect every instance of that color. But doing a find/replace that includes the comment, you can target just the instances of that specific "pseudo variable".

Now my question: Are comments like this valid (and widely supported) in media queries:

@media only screen and (max-width: 767px /* $first-breakpoint */) { ... }

In limited testing it seems to work fine, but wasn't able to find anything definitive on comments in media queries.

Thanks in advance.

CBean
  • 5
  • 1

1 Answers1

0

Media queries are nothing special in terms of syntax. There have been CSS @ statements for a long time--@import, @font-face, etc. Comments are comments, and anything surrounded by the appropriate escape strings will be ignored by the browser.

Your plan seems solid, and assuming that it's a fairly short-term solution I wouldn't worry too much about future code readability. I'd focus on setting it up so that you can do simple find/replace operations to migrate the code to your new preprocessor's needs.

Community
  • 1
  • 1
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • Thanks for confirming. Much appreciated. I was mostly concerned because I stumbled into a YUI Compressor bug where an errant missing space causes browsers to essentially ignore media queries with operators altogether. Until that point, I thought whitespace in CSS was no big deal, but in media queries (at least after the 'and' operator) it seems to matter. – CBean Nov 23 '13 at 05:15