您可以在 css 文档中使用 handlebars.js 变量吗？

Posted 2023-03-08

【中文标题】您可以在 css 文档中使用 handlebars.js 变量吗？

【英文标题】：Can you use handlebars.js variables in a css document?

【发布时间】：2014-05-27 18:29:03

【问题描述】：

我有兴趣做一些条件格式，并认为最好的方法是：

内部 CSS 文档

#if something 
    /* some css */

else
    /* some other css */

/if

但我搜索了一下，只找到了 Django 相关的东西。这在车把或任何其他 js 库中是否可行？

注意：我使用Meteor。

【参考方案1】：

不是原生的 CSS，不是。但是看看 SASS：http://sass-lang.com/ 或 LESS：http://lesscss.org，这两个 CSS 预处理器可以满足您的要求

【参考方案2】：

以下是在流星中执行此操作的几种方法：

使用类助手

<template name="hello">
  <p class=excitedClass>hello world</p>
</template>

Template.hello.excitedClass = function () 
  return Session.equals('excited', true) && 'excited';
;

模板助手根据会话变量的值确定类。您也可以将其用于样式等其他属性。

在模板中使用条件

<template name="hello">
  #if excited
    <p class="excited">hello world</p>
  else
    <p>hello world</p>
  /if
</template>

Template.hello.excited = function () 
  return Session.get('excited');
;

模板根据会话变量的值选择要呈现的元素版本。

【讨论】：

对此的改进是将感兴趣元素的类属性设为变量，并在 CSS 中静态定义这些类。但如果可能的话，我希望所有与样式相关的逻辑都在 CSS 上。

我编辑了示例以使用类而不是样式。想法是一样的。

【参考方案3】：

有可能实现你想要的，因为毕竟模板引擎生成文本，上下文决定它是否应该被解释为 html、SVG 或 CSS。

我使用的技术有点违反直觉，因为它使用样式标签，而且我们被教导不要将 CSS 嵌入 HTML 页面，但此建议的目的是分离 HTML 和 CSS ，在我即将解释的示例中仍然是这种情况。

假设您有一个包含 4 个属性的项目集合，这些属性与您希望如何在屏幕上呈现它们有关。

文本：内容字符串。 color1 和 color2 ：表示 HTML 颜色的字符串。 梯度：布尔值；如果为真，则使用带有 color1 和 color2 的背景渐变，然后在悬停时反转渐变；如果为 false，则使用 color1 作为背景色，然后在悬停时使用 color2。

让我们使用这个模式来填充一个集合。

Items=new Collection("items");
for(var i=0;i<10;i++)
    Items.insert(
        text:"Item "+i,
        color1:"#"+Random.hexString(6),
        color2:"#"+Random.hexString(6),
        gradient:Random.choice([false,true])
    );

现在我们定义一个模板来迭代我们的集合。

<template name="itemsList">
    <ul class="items-list">
        #each items
            > item
        /each
    </ul>
</template>

最有趣的部分来了：我们使用一个样式标签来定义我们的内联 CSS，它是由一个专用的子模板生成的。

itemClass 模板被传递给被迭代的项目的当前上下文。

<template name="item">
    <li class="item item-_id">
        <style scoped>
            > itemClass
        </style>
        text
    </li>
</template>

我们的模板根据当前项目的属性生成 CSS：条件格式终于！ 由于我们使用的是 Meteor，因此您的格式也会是反应式的，这有多酷？

<template name="itemClass">
  height:64px;
  .item-_id
    #if gradient
  background:linear-gradient(to bottom, color1 5%, color2 100%);
    else
  background-color:color1;
    /if
  
  .item-_id:hover,.item-_id:focus
    #if gradient
  background:linear-gradient(to bottom, color2 5%, color1 100%);
    else
  background-color:color2;
    /if
  
</template>

注意：我使用的是 style 标签的 scoped 属性，它告诉浏览器本节中定义的格式对于父元素（本例中的 li.item）是本地的，这完全有意义。

http://www.w3schools.com/tags/att_style_scoped.asp

然而，目前只有 Firefox 支持，所以在其他浏览器中，样式标签会生成普通的旧全局 CSS，我们需要一个备用：这就是为什么我用项目的 _id 装饰类名。

如果所有浏览器都支持 scoped 属性，我们可以删除 item-_id 类并直接设置 item 类的样式，它会按预期工作！

【讨论】：

很好的回应！太糟糕了 Scope 属性的支持很弱。但是你的方法很有趣。让我想到了一些可能性，尽管我仍然希望能够直接在 CSS 中插入一些 或类似的东西。

【参考方案4】：

阅读后我自己的答案是创建 CSS 静态类并使用把手更改 HTML 元素的类。这里有两个例子：

第一个很简单。主要用途是改变整体部分的风格。

<template name="mainPage" class=somePageClass>
    Main page content
</template>

在 Meteor 上你会做类似的事情

Template.mainPage.somePageClass = function()
    //some logic
   return someClass;
;

下一种情况更有趣，要求列表的每个元素都有属性类（例如 some_element.class = "classX" ）。

<template name="subTemplate">
    #each someList
        <div class=class>
            Element content
        </div>
    /each
</template>

这样，您可以根据特定元素诱导样式。例如，根据社交页面中的帖子类型等更改背景颜色。

【参考方案5】：

您可以直接以 css 样式作为参数。我用handelbarjs试过这个，它工作得很好。

<style>
.invoice-box 
    max-width: 800px;
    padding: 30px;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    color: #555;
    max-height: 560px;    
    zoom:  zoom ;