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

时间:2016-03-16 08:17:01

标签: html css dynamically-generated knyle-style-sheet

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

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

  {{#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}}

如何获取部分页面以使用此功能:

  {{#eachModifier}}
    <!-- MY ICON IMAGES -->
  {{/eachModifier}}

而不是:

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

我尝试了以下代码之类的东西,带有条件'if'辅助手柄,但没有运气:

  {{#iff header '==' "Icons"}}
    {{#eachModifier}}
      <!-- MY ICON IMAGES -->
    {{/eachModifier}}
  {{/iff}}

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

我的KSS看起来像这样:(显然,一个图标不同)

/*
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
*/

1 个答案:

答案 0 :(得分:1)

阿。结果我需要在我的CSS文件中简单地编辑“Markup:”下的行。我的水平太低,试图编辑实际的框架!