5

我使用 variable.less 配置文件来存储有关设计的所有相关信息。其中一个信息是移动布局和PC布局之间的断点。我还需要 javascript 中的这些信息，但我不知道如何获取它（不将其存储在数据属性中，因为我希望将所有设计变量保存在同一个文件中）。

所以我终于发现：我将断点存储在 variables.less 中：

@bk-point: "500px";

我使用 css 属性“内容”，但不是在伪元素上，而是在任何标签（更少文件）上：

#any-div {
   content: "@{bk-point}";
}

像这样，这不会影响设计（“内容”属性不会显示在元素上，只显示在伪元素上），我可以使用 jQuery 轻松获得它：

var bkPoint = $('#any-div').css('content');

我所有的变量都在较少的文件中。

这非常适合我想要的，但是有没有我看不到的副作用？由于我无法想象的原因，这是一种不好的做法吗？

感谢您的建议！

塞巴斯蒂安。

PS：
1. 可以在 firefox 21.0 和 chromium 27.0 中使用
2. 当然，如果你有更好的解决方案……</p>

4

1 回答 1

1

css 'content' 属性仅对伪元素有效： https ://developer.mozilla.org/en-US/docs/Web/CSS/content

尽管这似乎是一个很酷的想法，但我不会在生产中使用它。我认为您应该接受您的 js 变量和 css 变量将位于 2 个不同的文件中，然后通过数据属性应用这些值。

但是，如果您真的想要一种创造性的方式来仅从可以打印到 html 并因此与 javascript 交互的 css 文件中执行此操作，那么使用不会影响设计的有效属性怎么样？

您真正要做的就是在 html 中存储一个字符串，因此您可以使用一个相当晦涩的元素，例如 counter-reset，然后通过 jquery.css() 获取值

variables.less: @bkpoint = 500;
css:
#any-div {
   counter-reset: break-point @bkpoint;
}
jquery:
$('#any-div').css('counter-reset'); // returns: 'break-point 500'

简单的正则表达式函数让你摆脱返回字符串的“断点”部分，你就得到了你要找的东西。顺便说一句，可以对任何其他未使用的 CSS 属性执行此操作，例如：

 border-width: @bkpoint;
 border: none;

如果您有兴趣，请提供有关计数器重置的规格：http: //www.w3.org/TR/CSS2/generate.html#propdef-counter-reset

于 2013-09-01T15:51:26.097 回答