Grow your CSS skills. Land your dream job.

SCSS variable not working

  • # June 26, 2013 at 2:27 pm

    Would there be a reason for the following not to work?

    SCSS (in _mixins.scss)

    $bmre: Benton Modern RE;

    SCSS (in styles.scss)

    time {
    font: normal 11px “$bmre”, Georgia;
    }

    Actual Ouput

    font: normal 11px “$bmre”, Georgia;

    # June 26, 2013 at 2:28 pm

    font: normal 11px #{$bmre}, Georgia;

    Or if you want quotes:

    font: normal 11px “#{$bmre}”, Georgia;

    # June 26, 2013 at 2:30 pm

    That’s so weird. It still isn’t working.

    # June 26, 2013 at 2:38 pm

    What’s your error?

    # June 26, 2013 at 2:43 pm

    This my log:

    2013-06-26 14:13:01 overwrite stylesheets/site.css
    2013-06-26 14:14:02 overwrite stylesheets/site.css
    2013-06-26 14:15:08 overwrite stylesheets/site.css
    2013-06-26 14:17:31 overwrite stylesheets/site.css
    2013-06-26 14:20:08 identical stylesheets/site.css
    2013-06-26 14:21:13 overwrite stylesheets/site.css
    2013-06-26 14:21:39 identical stylesheets/site.css
    2013-06-26 14:22:26 overwrite stylesheets/site.css
    2013-06-26 14:22:46 overwrite stylesheets/site.css
    2013-06-26 14:24:34 overwrite stylesheets/site.css
    2013-06-26 14:25:11 overwrite stylesheets/site.css
    2013-06-26 14:28:43 overwrite stylesheets/site.css
    2013-06-26 14:29:07 overwrite stylesheets/site.css
    2013-06-26 14:29:27 error sass/site.scss (Line 386: Invalid CSS after “… 11px # {$bmre}/”: expected expression (e.g. 1px, bold), was “, Georgia;”)
    2013-06-26 14:29:27 overwrite stylesheets/site.css
    2013-06-26 14:29:32 overwrite stylesheets/site.css
    2013-06-26 14:30:02 overwrite stylesheets/site.css
    2013-06-26 14:31:16 error sass/site.scss (Line 386: Undefined variable: “$bmre”.)
    2013-06-26 14:31:16 overwrite stylesheets/site.css
    2013-06-26 14:31:22 overwrite stylesheets/site.css
    2013-06-26 14:31:37 identical stylesheets/site.css
    2013-06-26 14:31:47 identical stylesheets/site.css
    2013-06-26 14:32:00 identical stylesheets/site.css
    2013-06-26 14:34:49 overwrite stylesheets/site.css

    # June 26, 2013 at 2:58 pm

    Ah ha! @hugogiraudel

    I was using similar variables for other font-families and because I wasn’t using `#{$var}`, they were outputting `$var` in the CSS as well. Changing all of them to `#{$var}` fixed it.

    Thank you!

    # June 26, 2013 at 2:59 pm

    You’re very welcome. :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".