Использование sass из ExtJS4 в конвейере ресурсов Rails 3.1 - PullRequest
Новая
       21

Использование sass из ExtJS4 в конвейере ресурсов Rails 3.1

0 голосов
/ 27 июня 2011

Я недавно начал использовать ExtJS 4 внутри Rails 3.1.Я использовал предустановленную тему, с которой поставляется ExtJS 4 (ext-all.css), но я спорил, пытаясь привлечь внимание к sass. Я довольно новичок в sass в целом, хотя мне очень нравитсяИдея, стоящая за этим, и было бы замечательно иметь возможность просто отредактировать пару переменных, чтобы переназначить весь сайт.

Мне было интересно, кто-нибудь еще это делал, и насколько сложно было включить его в конвейер ресурсов таблицы стилей?В частности, поскольку кажется, что это потребует некоторой переделки из-за использования компаса в качестве базы.

1 Ответ

1 голос
/ 27 июня 2011

У меня есть приложение Rails 3 (не 3.1), работающее с внешним интерфейсом Ext JS 4, которое генерирует таблицы стилей непосредственно из тем SASS по умолчанию. Я использую Jammit для конвейера активов, но это не должно быть практически никакой разницей при работе с Sprockets , поскольку работа выполняется в обоих случаях Compass .

Сначала убедитесь, что у вас установлен Compass, поместив его в Gemfile: 

gem 'compass'

Compass объявил гем sass как зависимость, поэтому нет необходимости объявлять его. Теперь вам нужно собрать Gem и инициализировать Compass: 

$ bundle
$ compass init rails

Затем я создал папку public/resources/scss, куда я помещаю все файлы SCSS. В этой папке у меня есть файл SCSS основного приложения application.scss, который включает в себя все необходимые модули Compass и дополнительные части: 

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

Затем я скопировал все файлы темы Ext 4 SASS в public/resources/scss/ext4/default и создал другую папку public/resources/scss/partials, в которую я поместил все свои пользовательские партиции SCSS и файл инициализации Ext 4 _ext4.scss: 

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

Тогда это правильное место для установки некоторых переменных Compass, которые используются Ext 4. Вот несколько примеров для стилизации темы, скопированных непосредственно из файлов Ext 4 SASS: 

/**
 * @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
 */

Теперь у вас есть практически все:

  • Файл SASS глобального приложения
  • Ext JS 4 theme
  • Пользовательские партиалы

Но не хватает последней части: в Ext 4 есть несколько пользовательских функций Compass, которые должны быть на месте. Этот файл находится в платформе Ext JS 4 под resources/themes/lib/utils.rb. Поскольку исходный файл не работал "из коробки" с моим способом организации файлов, я просто изменил его для своих нужд и поместил прямо в файл инициализации Compass 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

Теперь вы можете устанавливать переменные Ext 4 в вашем партиале, и весь CSS для ваших пользовательских настроек генерируется на лету, и только все приятные функции Compass, такие как Sprites .

...