Ruby on Rails - SLIM - SCSS - inject ruby variable

Question

How do I set a SCSS variable based on ruby variable value?

Following code is working for CSS but not for SCSS:

- primaryColor = app.theme_variables['primary-color'];
= content_for(:after_head_script) do
  css:
   .primaryColor {
     color: #{primaryColor};
   }

If I do same thing with SCSS:

- primaryColor = app.theme_variables['primary-color'];
= content_for(:after_head_script) do
  scss:
    $color = #{primaryColor}

    .primaryColor {
      color: $color;
    }

output is as follows:

.primaryColor{color:primaryColor}

So any idea on how to inject variable into SCSS?

This is a just a hunch, but have you tried wrapping the interpolation in double-quotes? e.g. `$color = "#{primaryColor}"` — pdoherty926, Sep 19 '16 at 03:58
Yeah, this doesn't seem to work in Slim, which is a bummer. At least you have the `css:` variant to fallback on. — pdoherty926, Sep 19 '16 at 05:16
Yes I do have css, but main problem is that I want to use SCSS functions like darken(). — Gapipro, Sep 19 '16 at 07:01
what about if you make of color a dynamic value getting it from the database and output it by passing its id, or in a loop? — Sebastián Palma, Dec 25 '16 at 16:47

score 1 · Answer 1 · answered Mar 17 '19 at 21:00

1

Sadly, it's not supported.

Iterpolated are:

ruby
javascript
css
markdown
textile
rdoc

And these are not:

sass/scss
less
coffee

As described here: https://github.com/slim-template/slim#embedded-engines-markdown-

answered Mar 17 '19 at 21:00

Astery

1,216
13
22

score -1 · Answer 2 · answered Sep 28 '16 at 15:24

-1

Add a .slim extension to your .scss file and your variable expansions should work (i.e., ".scss.slim").

See Asset Pipeline Preprocessing for details.

answered Sep 28 '16 at 15:24

Greg Tarsa

1,622
13
18

This has nothing to do with my question. – Gapipro Sep 29 '16 at 08:47

score -1 · Answer 3 · answered Nov 27 '17 at 11:52

-1

You can use standard ERB interpolation inside scss directives, not sure if there is a slim-er way.

scss:
  $color = <%= primaryColor %>;

answered Nov 27 '17 at 11:52

João Costa

344
3
11

Ruby on Rails - SLIM - SCSS - inject ruby variable

3 Answers3