Question

我们的团队将在某些时候迁移到css预处理。在那之前，我主张半步，依赖于一致使用标准注释来充当伪变量。因此，在样式表的顶部，我们可能会定义类似的内容：

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

然后，在使用样式时，我们会像上面这样使用上面的内容：

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

h1和输入元素当前都使用相同的十六进制颜色，但如果您想通过“＃333333”上的find / replace全局替换主站点颜色，则会影响该颜色的每个实例。但是，如果执行包含注释的查找/替换，则可以仅定位特定“伪变量”的实例。

现在我的问题是：这样的评论在媒体查询中是否有效（并得到广泛支持）：

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

在有限的测试中，它似乎工作正常，但无法在媒体查询中的评论中找到任何明确的内容。

提前致谢。

Answer 1

媒体查询在语法方面没什么特别之处。很长一段时间都有CSS @语句 - @import, @font-face等。注释是注释，浏览器将忽略由适当的转义字符串包围的任何内容。

您的计划似乎很可靠，并且假设这是一个相当短期的解决方案，我不会过多担心未来的代码可读性。我专注于设置它，以便您可以执行简单的查找/替换操作，将代码迁移到新的预处理器的需求。