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

【问题标题】：Namespace/prefix for CSS classes, shared between Javascript and (S)CSSCSS 类的命名空间/前缀，在 Javascript 和 (S)CSS 之间共享
【发布时间】：2012-06-05 01:11:59
【问题描述】：

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

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

【问题讨论】：

标签： javascript css namespaces constants sass

【解决方案1】：

我不知道有一种简单的方法可以只在一个地方定义它。不过，它很简单，只在两个地方定义：一次在 javascript 中，一次在您的 SASS 中。在 javascript 中，您可以使用全局变量（或者存储常量值），在 SASS 中，您可以像这样定义前缀：

$prefix: 'prfx-';

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

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

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

【讨论】：

【解决方案2】：

您可以定义一个伪元素并使用 CSS 的 content 属性将您的 SCSS 前缀传输到 JavaScript。我在这个例子中使用了<body>，但它可以是任何伪元素：

$prefix: 'myPrefix';

body::after {
  // Value must be quoted, so we use
  // string interpolation to print variable
  content: '#{$prefix}';
}

然后 JavaScript 可以在运行时查找此文本并将其用作前缀：

// pseudos can't be selected like normal DOM elements due to
// browser specs, but you can grab computed styles and remove
// the quotes yourself.
var prefix = window.getComputedStyle(document.body, '::after').getPropertyValue('content').replace(/"/g,'');
// result: 'myPrefix'

计算样式的获取会导致重排/布局/绘制，但如果您只是这样做一次，这并不是世界末日。

【讨论】：