Question

我无法在此找到一个帖子，但如果有，请告诉我！

我想根据特定标记中的HTML内容创建和使用LESS变量。

例如，HTML将类似于：

<div class="bar">
    <span>80%</span>
    Blah blah
</div>

CSS / LESS就像：

@width: '$(".bar > span").text()';
.bar { background: red; width: @width; }

我是否需要将变量从字符串转换为int或float以便将其用作？如果是这样，怎么样？谢谢！

Answer 1

我不确定您上面的评论是否输入错误，

“起初，我试图只使用LESS变量进行大小调整，然后使用CSS内容标记将其设置为HTML内容，但它工作。“

你陈述“但是”之后我预期“它[不]正在工作”（否则，我本来希望你说“和”）。这实际上是我想到的一个解决方案，但如果我是正确的，并且不为你工作，那么我的猜测是你使用的内容不正确（直接在span本身？）。 content和::before伪元素的::after属性为only valid。

所以这就像你原先想要的那样（根本不需要span元素）：

<强> LESS

@width: 80%;

.bar {
  background: red;
  width: @width;
}

.bar:before {
  content: '@{width}';
}

CSS输出

.bar {
  background: red;
  width: 80%;
}
.bar:before {
  content: '80%';
}

See Example Fiddle

这适用于IE8（您注意在另一条评论中支持）。假设80%不是必需的“内容”值（您希望搜索引擎因为它是页面上的关键数据而拾取），那么使用伪元素对于此类可视用户反馈非常好。如果您愿意，可以是aligned just as regular text and some padding added to space it from the surrounding text，就像它是span元素一样。

Answer 2

如评论所述，我怀疑少可以做到这一点。

虽然你可能想要像这样使用米HTML5标签

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

这是一个例子

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_meter

我认为这是您希望从脚本中实现的目标。

从HTML内容创建LESS变量

2 个答案:

See Example Fiddle