我有兴趣做一些条件格式，并认为最好的方法是：
内部 CSS 文档
{{#if something }}
/* some css */
{{else}}
/* some other css */
{{/if}}
但我搜索了一下，只找到了 Django 相关的东西。这在车把或任何其他 js 库中是否可行？
注意：我使用Meteor。
【问题讨论】：
标签： javascript css django meteor handlebars.js
不是原生的 CSS，不是。但是看看 SASS：http://sass-lang.com/ 或 LESS：http://lesscss.org，这两个 CSS 预处理器可以满足您的要求
【讨论】：
以下是在流星中执行此操作的几种方法：
<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');
};
模板根据会话变量的值选择要呈现的元素版本。
【讨论】：
有可能实现你想要的，因为毕竟模板引擎生成文本，上下文决定它是否应该被解释为 HTML、SVG 或 CSS。
我使用的技术有点违反直觉，因为它使用样式标签，而且我们被教导不要将 CSS 嵌入 HTML 页面，但此建议的目的是分离 HTML 和 CSS ，在我即将解释的示例中仍然是这种情况。
假设您有一个包含 4 个属性的项目集合，这些属性与您希望如何在屏幕上呈现它们有关。
让我们使用这个模式来填充一个集合。
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 类的样式，它会按预期工作！
【讨论】：
阅读后我自己的答案是创建 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>
这样，您可以根据特定元素诱导样式。例如，根据社交页面中的帖子类型等更改背景颜色。
【讨论】：
您可以直接以 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 }};
}
【讨论】：