Replace Sass variables in markup with actual values about kss-node HOT 10 CLOSED

I second this request.
It would be very helpful to be able to use a sass variable in the description of the doc.
Sometimes we create custom examples for the style guide, beyond what the modifiers/markup allows us to do. It would be helpful to be able to use the sass variables in these examples so that if they change the example is updated automatically.

from kss-node.

I want to clarify what this issue is about. Are you wanting to

1. Document Sass variables? i.e. Add a KSS documentation block for a Sass variable (or group of variables) and have kss-node generate docs with examples. or:
2. Use a Sass variable inside your Markup section and have kss-node replace it with the actual value of the variable?

I'm interested in option 1, btw.

from kss-node.

Closing this in favor of the approach outlined in #50.

from kss-node.

Hi @JohnAlbin I was actually looking to do option 2. Currently I have examples of color swatches in my documentation, but because the sass variables don't get replaced, I have to hard code the values. In cases where I'm using color functions like darken, lighten, or transparentize, it's kind of a bummer.

I'm not sure actually that #50 solves this issue.
Sorry for the late reply

from kss-node.

I'm not sure actually that #50 solves this issue.

No, I had to assume you meant option #1. Re-opening.

from kss-node.

Any update on this?
Will this feature come? It would be awesome if something like that would be working:

/* Colors

Base colors

Markup:
<div style="background:#{$primary-color}" class="styleguide-color">$primary-color</div>
<div style="background:#{$primary-color-inverted}" class="styleguide-color">$primary-color-inverted</div>

Styleguide 1.1
*/

from kss-node.

Any update on this?

I've got other features on my to-do list before this one. But I'm not preventing anyone from tackling it.

from kss-node.

BTW, with Sass 3.4, you can put this in your .scss file:

$variable: 'hi';

/**
 * #{$variable} there!
 */

And that will compile to:

/**
 * hi there!
 */

Which means you could use CSS-style comments with inline-sasscript variables in your Sass files and point kss-node at the generated CSS.

from kss-node.

This might be useful too: https://www.npmjs.org/package/sassyjson

from kss-node.

The more I think about this feature, the more I realize the problem is trying to get very specific variables out of a CSS preprocessor into the template and displayed in very specific ways in the style guide. I don't think there is a good generic way to do this.

from kss-node.