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
Post a Comment