Variable in css file?

Question

I am using rails 4

This is a part of my css file:

.parallax-image-2 {
    background: url('/assets/tuscany.jpg');
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;/* IE FIX */
}

How can i use variable in the css file? Is that possibly? Like this

.parallax-image-2 {
    background: url('/assets/#{@region.name}');
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;/* IE FIX */
}

thanks...remco

unless that css file gets 'executed' or parsed by ruby, you can't just start throwing other languages in there and hope to have it "just work". — Marc B
– Marc B, Commented Jul 30, 2014 at 20:01
possible duplicate of Passing instance variable to stylesheet assets — Gergo Erdosi
– Gergo Erdosi, Commented Jul 30, 2014 at 20:03

RAJ · Accepted Answer · 2014-07-30 20:28:06Z

1

Rails 3.1+ asset pipelines makes us able to use asset helpers in css files. Now ruby parser is able to resolve some of the issues e.g. image path. You just need to add .css.erb as instead of .css as stylesheet file extension.

.my_class {
  background-image: url(<%= asset_path 'my_image.png' %>);
}

.my_class1 {
  background: url(<%= asset_data_uri 'logo.png' %>)
}

Read more about asset pipeline.

edited Jul 30, 2014 at 20:28

answered Jul 30, 2014 at 20:22

RAJ

9,7471 gold badge36 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard Peck · Accepted Answer · 2014-07-31 10:03:29Z

1

Assets

Bottom line is that unless you're rendering your assets ad-hoc (not static), then the most extensible & reliable way to achieve this is to create different classes (ids) for each region

I downvoted @Raj's answer because that relies on using ERB code in your CSS. Whilst this will be fine if the file is loaded ad-hoc, it will not work if you precompile your assets (hence loading them statically)

--

SCSS

I'd personally use the SCSS Rails preprocessor:

#app/assets/stylesheets/application.css.scss
.parallax-image {
   $regions: tuscany lombardy campania;
   @each $region in $regions {
        $i: index($regions, $region);
       &.#{$i} { 
           background: asset_url('#{$region}.jpg');
       }
   }
}

This will allow you to call:

<% @regions = %w(tuscany lombardy campania)
<% @regions.each do |region| %>
   <a href="#your_link" class="parallax-image #{region}">
<% end %>

--

This is the best way to achieve what you want, as it will work even with asset precompilation

You must remember that CSS is front-end, which means it will not lend itself to Ruby / Rails code at all. After all, it's just a styling system

answered Jul 31, 2014 at 10:03

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

1 Comment

Gagan Gami Over a year ago

hey Rich..sorry bro to comment here.. Can u please help me in this stackoverflow.com/questions/25037757/…

Collectives™ on Stack Overflow

Variable in css file?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related