javascript - CSS 类的命名空间/前缀，在 Javascript 和 (S)CSS 之间共享

Question

我正在编写一个涉及 DOM CSS 样式的可重用 Javascript 片段(jQuery 插件)。因为它应该可供任何人使用，所以我想避免它的 CSS 类名称与文档中其他现有类之间的冲突。这就是为什么我使用命名空间字符串作为其所有类名的前缀(例如，如果我的前缀是 prfx-<，则 class grid 变为 prfx-grid/)。为了尊重 DRY 并使其易于更改，我只想声明一次前缀，并从 CSS 电子表格(可能使用 Sass)和 Javascript 代码访问它。如果可能的话，我还想继续使用 2 个文件(我的 .js 和我的 .css)。

有没有办法声明这样的前缀/命名空间常量，以便可以从 (S)CSS 和 Javascript 访问它？

Answer 1

我不知道有什么简单方法可以只在一个地方定义它。不过，它很简单，只在两个地方定义:一次在 javascript 中，一次在 SASS 中。在 javascript 中，您可以使用全局变量(或者以其他方式存储常量值)，而在 SASS 中，您可以这样定义前缀:

$prefix: 'prfx-';

.#{$prefix}grid {
    /* compiles to .prfx-grid */
}

.#{$prefix}other {
    /* and so on */
}

它可能不如跨 javascript 和 CSS 的单一定义那么好，但在两个地方进行更改肯定比全局查找替换要好。从理论上讲，您可能会向 SASS 添加一个 Ruby 扩展，它会从 Javascript 代码可以通过 AJAX 访问的文件中读取前缀值，但在我看来，这样的系统不值得付出额外的努力来获得它设置并正常工作。