Variables not being interpolated properly.

[nathanjosiah]

I am looking at the demo styleguide and it's use of showing available SASS variables for colors. I am trying to do the same thing but it is only outputting the variable names instead of their value.

Here is my file:

@import 'config';
/*
    Colors

    $brand-orange - #F4702E
    $brand-light-blue - #3475BA
    $brand-secondary-blue - #194F8C
    $brand-light-grey - #57595C
    $brand-blue - #224772
    $brand-dark-blue - #214772
    $brand-light-blue - #4780C2
    $brand-grey-blue - #18222B

    markup:
    <div style="background: {$modifiers};">{$modifiers}</div>

    Styleguide 5.1
*/

This is nearly identical to the demo file. My config file contains the variable definitions:

$brand-orange: #F4702E;
$brand-light-blue: #3475BA;
$brand-secondary-blue: #194F8C;
$brand-light-grey: #57595C;
$brand-blue: #224772;
$brand-dark-blue: #214772;
$brand-light-blue: #4780C2;
$brand-grey-blue: #18222B;

When the styleguide is built, the rendered markup contains the variable names:

<div style="background: $brand-orange;">$brand-orange</div>

I am running SC5 0.3.33. Something is causing this behavior to break as it does work for me if I compile the demo app.

[varya]

Could you provide link to the repo where you are trying to make it work?

[nathanjosiah]

I have created a repo that demonstrates the problem. Here is a link to the repo

[iamtyce]

+1 for this issue.

I'm finding that any variable with more than 1x underscore creates issues with SC-5.

Ie, $variable-test_one is ok but $variable-test_one_two isn't (the difference being rendering an actual color vs the variable name appearing in the color block).

[stevenMouret]

I have the same problem.

My folders and files +-- controller.scss +-- _default |--+-- _content.scss +-- _framework |--+-- _variables.scss

_controller.scss import all scss In my _content.scss

// Main colors
//
// markup: <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
//
// $color-1     - Color 1
// $color-2     - Color 2
// $color-3     - Color 3
// $color-4     - Color 4
// $color-5     - Color 5
//
// Styleguide 1.1

In my _variables.scss

$color-1: #333;
$color-2: #777;
$color-3: #F92672;
$color-4: #A6E22E;
$color-5: #66D9EF;

the render

<div style="background: $color-1;" class="styleguide-color">$color-1</div>

Color does not display, I feel that this is a problem of KSS.

[shanecarmody]

I’m having the same problem. I’ve copied the example that’s in demo-output. Is the problem only occurring for Sass? It doesn’t seem like PostCSS users are having this issue.

[terotil]

Just noticed that variables with single dash ($foo-bar) work as expected, but with two or more dashes ($foo-bar-baz) do not. Might be same or related. I will investigate.

[terotil]

Couldn't reproduce with the repo by @nathanjosiah. Instructions were missing scss build step and with it for some reason definitions in _config.scss seemed not to be available via include in config_docs.scss. When I moved definitions to config_docs.scss they worked just fine.

Is this still an issue? If so, could you update the reproduction repo to use fresh styleguide and ping here.

ps. The dash-underscore stuff seems to be separate issue, see #476