New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace Sass variables in markup with actual values #45

Closed
kioueste opened this Issue Nov 15, 2013 · 10 comments

Comments

Projects
None yet
4 participants
@kioueste

kioueste commented Nov 15, 2013

Hello,

I want to use SASS variables to generate kss doc.

For example, i want implant $base-font-size and $base-line-height

Ii's possible?

@broseborough

This comment has been minimized.

broseborough commented Mar 6, 2014

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.

@JohnAlbin

This comment has been minimized.

Contributor

JohnAlbin commented Apr 18, 2014

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.

@JohnAlbin

This comment has been minimized.

Contributor

JohnAlbin commented Jul 21, 2014

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

@JohnAlbin JohnAlbin closed this Jul 21, 2014

@broseborough

This comment has been minimized.

broseborough commented Aug 20, 2014

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

@JohnAlbin

This comment has been minimized.

Contributor

JohnAlbin commented Sep 20, 2014

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

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

@JohnAlbin JohnAlbin reopened this Sep 20, 2014

@JohnAlbin JohnAlbin changed the title from Use Sass variables to Replace Sass variables in markup with actual values Sep 20, 2014

@icmwebservices

This comment has been minimized.

icmwebservices commented Sep 25, 2014

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

This comment has been minimized.

Contributor

JohnAlbin commented Oct 12, 2014

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.

@JohnAlbin

This comment has been minimized.

Contributor

JohnAlbin commented Oct 12, 2014

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.

@JohnAlbin

This comment has been minimized.

Contributor

JohnAlbin commented Oct 12, 2014

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

@JohnAlbin JohnAlbin added this to the 2.x milestone Oct 12, 2014

@JohnAlbin

This comment has been minimized.

Contributor

JohnAlbin commented Dec 23, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment