3

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

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

4

2 回答 2

1

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

$prefix: 'prfx-';

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

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

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

于 2012-05-31T13:30:40.360 回答
0

您可以定义一个伪元素并使用contentCSS 的属性将您的 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'

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

于 2018-01-18T10:34:37.217 回答