Question

I recently started using ExtJS 4 inside of Rails 3.1. I’ve been using the pre-build theme that ExtJS 4 comes bundled with (ext-all.css), but I was debating trying to bring the sass angle in. I’m pretty new to sass in general, though I really like the idea behind it, and it would be slick to be able to just edit a couple variables to re-theme an entire site.

I was wondering if anyone out there has done it yet, and how difficult it was to incorporate it in to the stylesheet asset pipeline? Specifically since it seems like it would require some rework, due to the use of compass as a base.

Answer 1

I have a Rails 3 (not 3.1) application running with an Ext JS 4 frontend that generates the stylesheets directly from the default themes SASS. I’m using Jammit for the asset pipeline, but it should be almost no difference in doing it with Sprockets, since the work is done in both cases by Compass.

First make sure you have Compass installed by putting it into your Gemfile:

gem 'compass'

Compass has declared the sass gem as dependency, so there is no need to declare it. Now you need to bundle the Gem and initialize Compass:

$ bundle
$ compass init rails

Then I created a folder public/resources/scss, where I put all SCSS files. Within this folder I have my main application SCSS file application.scss, that includes all necessary Compass modules and further partials:

$theme-name: 'default';
@import 'compass/css3';
@import 'partials/ext4';
@import 'partials/sprites';
@import 'partials/fonts';

Next I copied all the Ext 4 SASS theme files to public/resources/scss/ext4/default and created another folder public/resources/scss/partials where I put all my custom SCSS partials and the Ext 4 initialization file _ext4.scss:

$include-default: true;   
@import 'ext4/default/all';

This is then the right place to set some Compass variables that are used by Ext 4. Here are some examples for styling the theme, copied directly from the Ext 4 SASS files:

/**
 * @var {string} $font-family
 * The default font-family to be used throughout the theme.
 *
 * @var {string} $base-gradient
 * The base gradient to be used throughout the theme.
 *
 * @var {color} $base-color
 * The base color to be used throughout the theme.
 *
 * @var {color} $css-shadow-background-color
 * The base color for CSS shadows
 */

Now you have basically everything in place:

• Global application SASS file
• Ext JS 4 theme
• Custom partials

But there is a last piece missing: Ext 4 has some custom Compass functions that needs to be in place. This file is placed in the Ext JS 4 framework under resources/themes/lib/utils.rb. Because the original file did not work out of the box with my way of organizing the files, I simply modified it for my need and placed it directly in the Compass initialization file config/compass.rb:

project_type = :rails
project_path = Compass::AppIntegration::Rails.root
environment = Compass::AppIntegration::Rails.env
http_path = "/"
http_images_path = "/resources/images"
sass_dir = "public/resources/scss"
css_dir = "public/resources/css"
images_dir = "public/resources/images"

# File copied from ext-4.0.2a/resources/themes/lib/utils.rb
#
module ExtJS4
  module SassExtensions
    module Functions
      module Utils
        def parsebox(list, n)
          assert_type n, :Number
          if !n.int?
            raise ArgumentError.new("List index #{n} must be an integer")
          elsif n.to_i < 1
            raise ArgumentError.new("List index #{n} must be greater than or equal to 1")
          elsif n.to_i > 4
            raise ArgumentError.new("A box string can't contain more then 4")
          end

          new_list = list.clone.to_a
          size = new_list.size

          if n.to_i >= size
            if size == 1
              new_list[1] = new_list[0]
              new_list[2] = new_list[0]
              new_list[3] = new_list[0]
            elsif size == 2
              new_list[2] = new_list[0]
              new_list[3] = new_list[1]
            elsif size == 3
              new_list[3] = new_list[1]
            end
          end

          new_list.to_a[n.to_i - 1]
        end

        def parseint(value)
          Sass::Script::Number.new(value.to_i)
        end

        # Returns a background-image property for a specified images for the theme
        def theme_image(theme, path, without_url = false, relative = false)
          without_url = (without_url.class == FalseClass) ? without_url : without_url.value

          if !without_url
            url = "url('/resources/images/ext4/#{ theme.value }/#{ path.value }')"
          else
            url = "/resources/images/ext4/#{ theme.value }/#{ path.value }"
          end

          Sass::Script::String.new(url)
        end

        def theme_image_exists(path)
          result = false

          where_to_look = File.join(Rails.root, 'public') + path.value.gsub('../../resources', 'resources')

          if where_to_look && FileTest.exists?("#{where_to_look}")
            result = true
          end

          Sass::Script::Bool.new(result)
        end
      end
    end
  end
end

module Sass::Script::Functions
  include ExtJS4::SassExtensions::Functions::Utils
end

Now you can set Ext 4 variables in your partial and all the CSS for your custom settings is generated on the fly and just all nice Compass features like Sprites.