首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何对kss-node生成的html使用不同的标记?

如何对kss-node生成的html使用不同的标记?
EN

Stack Overflow用户
提问于 2016-03-16 16:17:01
回答 1查看 245关注 0票数 1

我正在使用kss-node创建一个样式指南,但是我想对不同的部分页面使用不同的标记(即不同的修饰符),我该如何实现呢?

我的index.html模板执行以下操作:

代码语言:javascript
复制
  {{#eachSection rootName}}
    {{#ifDepth 1}}
      <!-- Do the things. -->
    {{else}}
      <!-- Don't. -->
    {{/ifDepth}}
    {{#if markup}}
      {{#if description}}
        <!-- Description. -->
      {{/if}}

      <div class="kss-example">{{{markup}}}</div>
      <!--<pre class="prettyprint lang-html">{{markup}}</pre>-->

    {{#eachModifier}}
      <!-- MY CSS EXAMPLES -->
    {{/eachModifier}}

     <hr />

    {{else}}
      {{#if description}}
        <!-- Whatever. -->
      {{/if}}
    {{/if}}
    </section>
  {{/eachSection}}

我如何让一个区段页面使用它:

代码语言:javascript
复制
  {{#eachModifier}}
    <!-- MY ICON IMAGES -->
  {{/eachModifier}}

而不是这样:

代码语言:javascript
复制
  {{#eachModifier}}
    <!-- MY CSS EXAMPLES -->
  {{/eachModifier}}

我尝试了像下面这样的代码,并为handlebars提供了一个有条件的'if‘帮助器,但没有成功:

代码语言:javascript
复制
  {{#iff header '==' "Icons"}}
    {{#eachModifier}}
      <!-- MY ICON IMAGES -->
    {{/eachModifier}}
  {{/iff}}

  {{else}}
    {{#eachModifier}}
      <!-- MY CSS EXAMPLES -->
    {{/eachModifier}}

我的KSS看起来像这样:(很明显Icons是不同的)

代码语言:javascript
复制
/*
Example CSS

Example css file with KSS for style guide.

Markup:
<h1 class="{{modifier_class}}">Example Text</h1>

.example-grey - Grey
.example-green - Green
.example-brown - Brown
.example-yellow - Yellow

Styleguide 1.1
*/
EN

回答 1

Stack Overflow用户

发布于 2016-03-18 16:05:24

阿。原来我只需要编辑CSS文件中"Markup:“下面的行。我走得太低了,并且试图编辑实际的框架!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36030115

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档