How do I add custom functions to Sass (via Sass::S

Question

I am using vanilla Sass (no Compass/SUZY/Bourbon/etc.) and I'm having trouble figuring out where to put my *.rb file. I am not a Ruby programmer, but I did find a function someone else wrote that does what I need. I've tried searching, but the results I've come up with are dead ends.

The official docs themselves offer no clues, only how to create a custom function: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#adding_custom_functions

sass styles.scss styles.css -r custom.rb

LoadError: no such file to load -- static/sass/modules/lib/custom.rb while trying this solution (despite being able to VI the file): http://www.seancolombo.com/2010/07/28/how-to-make-and-use-a-custom-sass-function/

This is the closest SO question I could find, but I'm not using Compass or Rails so the solutions don't make any sense to me: How do I load extensions to the Sass::Script::Functions module?

I would like to keep my custom functions within my modules directory (which contains my own custom Bootstrap library). But if it has to go elsewhere, I can live with that.

Answer 1

Try following the instructions from your second link, but specify an absolute path to your ruby file. On my machine, it looks like SASS has issues finding the file if it's given a relative path.

Answer 2

In Rails 4, it's very simple. Create a sass.rb file in your config/initializer/ folder and put your module in there.

For example, take this random function: https://gist.github.com/chriseppstein/1561650

module Sass::Script::Functions
  def random(*args)
    #...buncha code
  end
end

Just stick that in config/initializers/sass.rb and you'll have access to it in any of your .scss/sass stylesheets like:

.greet{
  position: absolute;
  top: random(200px);
  left: random(200px);
  height: random(200px);
  width: random(200px);
  background-color: blue;

}