Print sass variables

[mmintel]

Hello,

I don't know if thats technically possible, but it would be reeeally cool if I could "print " variables in my comments. I can't do that with Sass alone because comments are not compiled.

What I want to use is the following /* # Test Use #{$buttonClass} for a button. The primary color is #{$colorPrimary} */

Greetings

[winstromming]

@mmintel I've also considered adding this. It involves quite a bit of work (or heavy regex) because, as you say, Sassdown does not actually compile the Sass itself. Marking this as a future feature for now, though.

[m5o]

This is technically possible. Sass can interpolate strings in comments, but they will only print out to a string when compiling to CSS and using the CSS comments /* */

Test this code online with http://sassmeister.com/

$buttonClass: 'btn';
$colorPrimary: #FF0;

/*
# Test
Use #{$buttonClass} for a button. The primary color is #{$colorPrimary}
*/

// not working with single line comments #{$buttonClass}

[winstromming]

Yep, it's possible - just need to investigate and get around to it.

[idflood]

Hi, I wanted to make a new issue with a pull request but I think this may solve partially this issue.

When following BEM syntax we frequently add modifiers to the same html structure. For example a simple button may have many 'color' variants:

<a href="#" class="button button--yellow">yellow</a>
<a href="#" class="button button--purple">purple</a>
<a href="#" class="button button--submarine">submarine</a>
<a href="#" class="button button--rain">rain</a>
<a href="#" class="button button--fog">fog</a>
...

If we compile the result we can simplify this with the addition of a 'split' handlebar helpers.

{{#each (split "yellow, purple, submarine, rain, fog")}}
  <a href="#" class="button button--{{this}}">{{this}}</a>
{{/each}}

Compiling the result eventually become even more interesting with more complicated structures.

{{#each (split "status, success, warning, error")}}
  <div class="message message--{{this}}">
    Message type "{{this}}" example.
    <a href="#" class="message__close"><i class="icon icon--close"></i></a>
  </div>
{{/each}}

Now, I'm not 100% sure this would help with this specific issue. Let me know if I need to adapt my changes or make a different pull request.

[mmintel]

Is there any kind of workaround until this is implemented? I am really missing this feature =( I tried to use the compiled .css file for sassdown but then I am losing the navigation because there is just one file

[winstromming]

@mmintel Sorry, not yet. You could have a look at the pull request by @idflood (https://github.com/idflood/sassdown/commit/536a129c73554adbeba02da1694db2ea2c5f045f). I've not had the time to work on this for a while, but it's still on the list.

[AdrianoCahete]

+1