ruby - Read SCSS variable in rails helper -


to target art direction problem (see here https://developer.mozilla.org/en-us/docs/learn/html/multimedia_and_embedding/responsive_images) need make use of <picture> element in markup. have images resized paperclip 4 different styles: lg, md, sm, xs.

i'm using bootstrap (scss) , have defined breakpoints through variables:

$screen-xs: 425px; $screen-sm: 768px; $screen-md: 1000px; $screen-lg: 1200px; 

to use <picture> element, have refer breakpoints in erb markup:

<picture>   <source media="(max-width: 425px)" srcset="<%= image.attachment(:xs) %>">   <source media="(max-width: 768px)" srcset="<%= image.attachment(:sm) %>">   <source media="(max-width: 1000px)" srcset="<%= image.attachment(:md) %>">   <source media="(max-width: 1200px)" srcset="<%= image.attachment(:lg) %>">   <img src="<%= image.attachment(:md) %>" alt="<%= image.alt %>"> </picture> 

of course, don't want maintain breakpoints in 2 different places (and i'm going extract helper), wondering if it's possible to read scss variable in ruby method in rails?

i don't know if there way read scss variable in ruby method, hovewer i'd propose solution doesn't require that.

you define values in helper , use them in stylesheets , html.

to embed ruby code scss file, rename *.scss *.scss.erb:

# hepler.rb def screen_xs   '425px' end  def screen_sm    '768px' end ...  # style.scss.erb: $screen-xs: #{screen_xs}; $screen-sm: #{screen_sm}; ... 

Comments

Popular posts from this blog

javascript - Thinglink image not visible until browser resize -

firebird - Error "invalid transaction handle (expecting explicit transaction start)" executing script from Delphi -

mongodb - How to keep track of users making Stripe Payments -