KSS Modifiers Section

[cmalven]

We're attempting to get nkss up-and-running on a project and we're running into some issues where standard KSS syntax doesn't seem to work and it's unclear from your documentation whether it should work or not.

One example is for KSS Modifiers, typically used as such:

// :hover             - Subtle hover highlight.
// .stars-given       - A highlight indicating you've already given a star.
// .stars-given:hover - Subtle hover highlight on top of stars-given styling.
// .disabled          - Dims the button to indicate it cannot be used.

An attempt to do this with nkss results in this:

Obviously not what we're looking for. Should this work? We're using the following documentation to create this:

/*
## Headings
Should typically be used via `@extend .heading-a`

.heading-a          - Another Heading
.heading-b          - Another Heading
.heading-c          - Another Heading

Styleguide 1.1
*/
.heading-a {
  ...
}

...

[rstacruz]

How does your HTML/HAML look like?

[rstacruz]

Try this. (Notice the absence of dots before heading-a et al):

/*
... (snip) ...
heading-a          - Another Heading
heading-b          - Another Heading
heading-c          - Another Heading

Styleguide 1.1
*/
.heading-a { ... }
.heading-b { ... }
.heading-c { ... }

...then try this for your markup. The param passed onto the KSS block (mod) is the names of the variants, which in your case is heading-a, heading-b and heading-c.

= kss_block '1.1' do |mod|
  %div{class: mod}
    This is a heading

[blahutka]

I had to modify _block.html.haml line:32, this is originaly from kss gem

%div{style: inner_style}= html.sub('$modifier_class', " #{modifier.class_name}").html_safe

[vgdub]

@rstacruz that worked perfect, thanks! Maybe something worth adding to the documentation?

[rstacruz]

Ah, perhaps so. The KSS docs mentions a $modifier_class convention, but I've found the one nkss implements to be easier and more compatible with HAML.

[kpingel]

I'm able to get the modifier classes working, but the pseudo states are not working for me. I was looking at the following issue for reference: kss-node/kss-node#51

It looks like kss.js handles the pseudo classes? But aside from adding it to the layout file, I'm not sure what else needs done. Suggestions?

[rstacruz]

nkss-rails is unmaintained at the moment, sorry. Any help would be appreciated.