Question

在 Less 中是否有办法将变量的内容扩展为字符串？

我的具体用例：

ion-scroll

然后在HTML中：

<ion-slide id="twitter">
    <h1>TWEETS</h1>
    <ion-scroll class="social-stream-container" direction="y" id="social-tweets">
      <ion-list>
        <ion-item class="social-content-block" ng-repeat="t in tweets | filter: orderBy">
          {{t}}
        </ion-item>
      </ion-list>
    </ion-scroll>
</ion-slide>

用例是创建一个显示一组颜色的静态页面，我想要HTML中的颜色代码，但只能在Less中指定它。

所以最后我希望它成为一个HTML文本节点。这有可能吗？

Answer 1

只需将变量括在双引号内并使用variable interpolation（格式：@{var-name}）。

@thecolor: #3B98D5;

.theclass:before {
  content: "@{thecolor}";
}

变量需要包含在引号内，否则content属性不会将其作为字符串显示。当您使用"@theccolor"时，Less编译器只将其视为普通字符串（而不是作为需要评估的引号中存在的变量）。 "@{theclass}"是使用变量插值的格式，它允许编译器知道引号内的值是需要计算的变量。

＆＃13;

.theclass:before {
  content: "#3B98D5";
}

.theclasswrong:before {
  content: #3B98D5;
}

＆＃13;

<div class='theclass'>- Correct Output</div>
<div class='theclasswrong'> - Will not give output without quotes</div>

＆＃13;

使用Less将变量扩展为字符串

1 个答案: