媒体查询中的评论

Question

我们的团队将在某个时候迁移到 CSS 预处理。在那之前，我提倡一个半步，它依赖于一致使用标准 cmets 来充当伪变量。因此，在样式表的顶部，我们可能会定义如下内容：

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

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

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

h1 和 input 元素目前都使用相同的十六进制颜色，但如果您想通过“#333333”上的查找/替换来全局替换主要站点颜色，您将影响该颜色的每个实例。但是进行包含注释的查找/替换时，您可以只针对该特定“伪变量”的实例。

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

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

在有限的测试中，它似乎工作正常，但无法在媒体查询中找到关于 cmets 的任何确定性内容。

提前致谢。

Answer 1

媒体查询在语法方面没有什么特别之处。 CSS @ 声明很久了--@import, @font-face 等。评论是cmets，任何被适当的转义字符串包围的东西都会被浏览器忽略。

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