你可以在css文档中使用handlebars.js变量吗？ [英] Can you use handlebars.js variables in a css document?
问题描述
我有兴趣做一些条件格式化，并认为最好的方法是执行以下操作：
里面
{{if if}}
/ *一些css * /
{{else}}
/ *一些其他css * /
{{/ if}}
但是我搜索了一下，只发现了Django 相关的东西。
注意：我使用 Meteor em>。
可以实现你想要的，因为毕竟，模板引擎生成文本，上下文决定它是否应该解释为HTML，SVG或CSS。
我使用的技术有点反直觉，因为它使用样式标签，我们已经被教导远离嵌入我们的CSS在HTML页面，但这个建议的目的是分离HTML和CSS，在我即将解释的例子中仍然如此。
- text：String of
- color1和color2：表示HTML颜色的字符串。
- gradient：Boolean;如果为true，请使用带有color1和color2的背景渐变，然后在悬停上反转渐变;如果为false，请使用color1作为背景颜色，然后在悬停上使用color2。
让我们使用此模式填充集合。
Items = new Collection（items）;
for（var i = 0; i< 10; i ++）{
Items.insert（{
text：Item+ i，
color1：＃+ Random
color2：＃+ Random.hexString（6）
渐变：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，您的格式也将被反应，这是多么酷？
<模板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 {
{{＃ }}
background：linear-gradient（to bottom，{{color2}} 5％，{{color1}} 100％）;
{{else}}
background-color：{{color2}};
{{/ if}}
}
< / template>
注意：我使用样式标签的范围属性，它告诉浏览器定义的格式化在本节中是本地的父元素（在本例中为li.item），这是完全正确的。
http://www.w3schools.com/tags/att_style_scoped.asp
但是，这仅在Firefox中才支持，因此在其他浏览器中，样式标签可以生成纯旧的全局CSS，我们需要一个回退：这就是为什么我用该项的_id来装饰类名。
如果所有浏览器都支持scoped属性，我们可以直接删除项目 - {{_ id}}类，并直接使用项目类，并按预期工作！
I am interested in doing some conditional formatting and thought that the nicest way would be to do something like:
Inside the CSS document
{{#if something }}
/* some css */
{{else}}
/* some other css */
{{/if}}
But I've searched a bit and only found Django related stuff. Is this possible in handlebars or any other js library?
Note: I use Meteor.
It is possible to achieve what you want because after all, templating engines generate text, the context determines if it should be interpreted as HTML, SVG or CSS.
The technique I'm using is a bit counter-intuitive because it uses the style tag and we've been taught to stay away from embedding our CSS inside HTML pages, but the purpose of this recommendation is to separate HTML and CSS, which is still the case in the example I'm about to explain.
Suppose you have a collection of items with 4 properties relative to how you want to render them on screen.
- text : String of content.
- color1 and color2 : Strings representing HTML colors.
- gradient : Boolean; if true, use a background gradient with color1 and color2 then reverse the gradient on hover; if false, use color1 as background color then color2 on hover.
Let's fill a collection using this schema.
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])
});
}
Now we define a template to iterate over our collection.
<template name="itemsList">
<ul class="items-list">
{{#each items}}
{{> item}}
{{/each}}
</ul>
</template>
Here comes the most interesting part : we use a style tag to define our inline CSS which is produced by a dedicated subtemplate.
The itemClass template gets passed the current context which is the item being iterated over.
<template name="item">
<li class="item item-{{_id}}">
<style scoped>
{{> itemClass}}
</style>
{{text}}
</li>
</template>
Our template generates CSS based on the properties of the current item : conditional formatting at last ! Since we're using Meteor, your formatting will be also reactive, how cool is that ?
<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>
Note : I'm using the scoped attribute of the style tag, which tells the browser that formatting defined in this section is local to the parent element (the li.item in this example), which makes totally sense.
http://www.w3schools.com/tags/att_style_scoped.asp
However this is supported only in Firefox at the moment so in other browsers the style tag produces plain old global CSS and we need a fallback : that's why I decorate the class name with the _id of the item.
If all browsers supported the scoped attribute, we could remove the item-{{_id}} class and style directly the item class instead, and it would work as expected !
这篇关于你可以在css文档中使用handlebars.js变量吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
