0

I have a Markup annotation on some of my sass source, like so:

// Headings
//
// Markup:
// <h1 class="{$modifiers}">H1 Heading</h1>
// <h2 class="{$modifiers}">H2 Heading</h2>
// <h3 class="{$modifiers}">H3 Heading</h3>
// <h4 class="{$modifiers}">H4 Heading</h4>
// <h5 class="{$modifiers}">H5 Heading</h5>
// <h6 class="{$modifiers}">H6 Heading</h6>
//
// .subheader - Subheader class
// .secondary-header - Secondary header class
//
// Styleguide 4.1

In the generated output, I get output for the default stle and both of my modifier classes. However, they look identical. Upon inspecting the elements, it becomes clear that the template is not dereferencing the {$modifiers}

<div class="kss-modifier__name kss-style"> .subheader </div>
<div class="kss-modifier__description kss-style"> Subheader class </div>
<div class="kss-modifier__example">
<h1 class="{$modifiers}">H1 Heading</h1>
<h2 class="{$modifiers}">H2 Heading</h2>
<h3 class="{$modifiers}">H3 Heading</h3>
<h4 class="{$modifiers}">H4 Heading</h4>
<h5 class="{$modifiers}">H5 Heading</h5>
<h6 class="{$modifiers}">H6 Heading</h6>
</div>

This is using kss-node 2.0.2

Any thoughts on what I might be doing wrong here? I've compared my template to a template on another project that works and I don't see any differences in the relevant section.

rhuffstedtler
  • 488
  • 1
  • 5
  • 17

1 Answers1

0

Since then I think kss has changed a bit or you've used a wrong modifier class ?

According to the specs:

If you include {{modifier_class}} in the markup, the generated style guide will be able to use the correct CSS class when it displays the sample for each of the modifiers.

https://github.com/kss-node/kss/blob/spec/SPEC.md

Fer To
  • 1,487
  • 13
  • 24