Sass

README.md

@@ -6,8 +6,35 @@ This gem provides:
 
 ## Rails 3.1
 
-For Rails 3.1 and greater, the files will be added to the asset pipeline and available to use. Add one of this lines to the file `app/assets/javascripts/application.js`:
+For Rails 3.1 and greater, the files will be added to the asset pipeline and available to use. 
+
+Add one of this lines to the file `app/assets/javascripts/application.js`:
 
     //= require sencha-touch-all
     or
-    //= require sencha-touch-all-debug
+    //= require sencha-touch-all-debug
+
+Create `app/assets/stylesheets/sencha-touch.scss` and add the following lines in it:
+
+	@import 'sencha-touch-rails';
+	@include sencha-panel;
+	@include sencha-buttons;
+	@include sencha-sheet;
+	@include sencha-picker;
+	@include sencha-tabs;
+	@include sencha-toolbar;
+	@include sencha-toolbar-forms;
+	@include sencha-indexbar;
+	@include sencha-list;
+	@include sencha-list-paging;
+	@include sencha-list-pullrefresh;
+	@include sencha-layout;
+	@include sencha-carousel;
+	@include sencha-form;
+	@include sencha-msgbox;
+	@include sencha-loading-spinner;
+
+You can include more icon styles by adding:
+
+	@include pictos-iconmask('wifi');
+

lib/sass_load_paths.rb

@@ -0,0 +1,10 @@
+module Sass::Rails
+    class SassTemplate
+      def sass_options_from_rails(scope)
+        options = scope.environment.context_class.sass_config
+        options.load_paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/compass/stylesheets"
+        options.load_paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/blueprint/stylesheets" 
+        return options
+      end
+    end
+end 

lib/sencha-touch-rails.rb

@@ -1,8 +1,6 @@
 require 'sencha-touch/rails'
-require 'sass'
 
-Sass::Engine::DEFAULT_OPTIONS[:load_paths].tap do |load_paths|
-  load_paths ||= []
-  load_paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/compass/stylesheets"
-  load_paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/blueprint/stylesheets" 
-end
+require 'sass_load_paths'
+
+require 'theme_images'
+

lib/theme_images.rb

@@ -0,0 +1,18 @@
+module SenchaTouch
+  module SassExtensions
+    module Functions
+      module ThemeImages
+        def theme_image(theme, path, mime_type = nil)
+          path = path.value
+          images_path = File.join(File.expand_path('../../',__FILE__), "vendor/assets", "images", theme.value)
+          real_path = File.join(images_path, path)
+          inline_image_string(data(real_path), compute_mime_type(path, mime_type))
+        end
+      end
+    end
+  end
+end
+
+module Sass::Script::Functions
+  include SenchaTouch::SassExtensions::Functions::ThemeImages
+end