Theming: change where theme-image() function points?

[jmefford]

I have been working with the Ext theming stuff with compass and I basically have what I need done, but i just have one more piece of the puzzle before it is up and working. I have moved a bunch of things around to fit my current directory structure, which looks something like this now:

public/
--CSS/
----Ext/
------css/
------sass/
------themes/
--Javascript/
----Ext/
--images/
----Ext/
------themes/
--------images/

my config.rb looks like this:

$ext_path = "../"

sass_path = File.dirname(__FILE__)

css_path = File.join(sass_path, "..", "css")

images_dir = File.join(sass_path,'..','..','..','images','Ext','themes','images','default')

output_style = :expanded

load File.join(File.dirname(__FILE__), $ext_path, 'themes')

And my theme.scss looks like:

$include-default: true;
$base-color: #621476;
$color : #546137;
@import 'ext4/default/all';
$relative-image-path-for-uis: "../../../images/Ext/themes/images";

but the generated .css file is looking for my images in:

/css/Ext/resources/themes/images/

instead of:

/images/Ext/themes/images/

I see in the ext scss files a function called theme-image(), ex:

theme-image($theme-name, 'grid/grid3-hd-btn.gif')

How do I change what URL this theme-image function is pumping out?

[jmefford]

I finally found where this is at. In the themes/lib/utils.rb is where the theme-image function is found. I made some minor modifications to it that allow me much more flexibility. Now my new setup is as follows:

config.rb

$ext_path = "../"

sass_path = File.dirname(__FILE__)

css_path = File.join(sass_path, "..", "css")

$images_dir = '../../../images/Ext/themes/images'

output_style = :expanded

load File.join(File.dirname(__FILE__), $ext_path, 'themes')

utils.rb

...
def theme_image(theme, path, without_url = false, relative = false)
          path = path.value
          theme = theme.value
          without_url = (without_url.class == FalseClass) ? without_url : without_url.value
          
          relative_path = "../images/"
          
          if relative
            if relative.class == Sass::Script::String
              relative_path = relative.value
              relative = true
            elsif relative.class == FalseClass || relative.class == TrueClass
              relative = relative
            else
              relative = relative.value
            end
          else
            relative = false
          end
          
          if relative
            image_path = File.join(relative_path, theme, path)
          else
            images_path = File.join($images_dir, theme)
            image_path = File.join(images_path, path)
          end
          
          if !without_url
            url = "url('#{image_path}')"
          else
            url = "#{image_path}"
          end
          
          Sass::Script::String.new(url)
...

[oklymenko]

I just started playing in this area myself and can't figure out why the function theme_image has an underscore in utils.rb, but is called from _theme-background-image.scss with a dash, as theme-image. The theme_image_exists function is used in both cases with an underscore. Where is the magic?

I would appreciate your answer,
Alex.

[oklymenko]

Figured it out: http://www.themer.me/blog/tutorials/...s-in-sass-scss

...In SASS it doesn’t matter whether your variable has an underscore or a dash – they work both ways.

[varunach]

Thanks for the soultion. I was stuck in a similar problem. One doubt. The path in the $image_dir is relative to what? The config.rb file or the util.rb file?