Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>A variant of option 2 will work. If you have something like this:</p> <pre><code>app/assets/stylesheets/pancakes_house.css.less.erb </code></pre> <p>And you <code>require</code> it into your <code>application.css</code> file. Then <code>pancakes_house</code> goes through ERB first and that output goes through the LESS processor and whatever comes out of that goes into your CSS. Putting ERB inside your SCSS might feel a little odd but, hey, it'll work and get the job done without too much weirdness.</p> <p>So you should be able to get at the necessary methods to produce your cache-busting image paths through your ERB.</p> <p>I only tried this with a Less file but it should work with <code>.css.scss.erb</code> as well.</p> <hr> <p>As an aside, you can also add <a href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html" rel="nofollow">your own functions to SASS</a>:</p> <blockquote> <p>Methods in this module are accessible from the SassScript context. For example, you can write </p> <pre><code>$color = hsl(120deg, 100%, 50%) </code></pre> <p>and it will call <code>Sass::Script::Functions#hsl</code>.</p> </blockquote> <p>There are even some <a href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#adding_custom_functions" rel="nofollow">instructions on writing your own functions</a> a little further down in the manual. However, I'm not sure how to get Sprockets to load your <code>Sass::Script::Functions</code> patches so I can't call this a practical solution; someone with stronger Sprocket Fu than me might be able to make this approach work though and I'd call this more elegant than ERBified SCSS.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload