ExtJs 4.2 компиляция темы с использованием компаса

Question

Согласно документации Sencha, создание и компиляция новых тем должна быть выполнена с использованием Sencha CMD.

Я хотел бы создать новую тему (которая унаследует существующую) и скомпилировать ее с помощью Compass без Sencha CMD.

Любая идея, как это сделать?

Answer 1

Если вы хотите создать новую тему с нуля, это может быть немного подавляющим, и я рекомендую сначала попробовать расширить существующую тему. В основном, тема состоит из двух больших частей: CSS-шаблонов и переопределений JavaScript; CSS в свою очередь разделяется между кодом SASS, mixins и переменными.

Есть Theming guide, которые обсуждают строительство темы для 4.2; для примеров наследования вы можете взглянуть на существующие темы: например, серая тема, которая расширяет классическую тему, которая, в свою очередь, наследуется от нейтральной темы, которая имеет базовую тему как родителя. Нептун может дать вам множество примеров переопределения JavaScript.

Answer 2

У нас была тематика в нашем приложении, так как последний Ext 4 был выпущен без инструмента команды sencha. Имейте в виду, что это код 4.1, и он, возможно, изменился с 4.2. У вас должен быть установлен рубин/компас и создать файл конфигурации для компаса, который скажет ему загружать специальные переменные и вы можете установить переменные конфигурации компаса. http://compass-style.org/help/tutorials/configuration-reference/

Вот пример конфигурационного файла с именем config.rb (я думаю, что он должен быть назван config.rb, но не цитируйте меня.) Это взято из extDir/ресурсы/дерзость

# $ext_path: This should be the path of where the ExtJS SDK is installed 
# Generally this will be in a lib/extjs folder in your applications root 
# <root>/lib/extjs 
$ext_path = "../extjs/4.1" 

# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder 
sass_path = File.dirname(__FILE__) 

# css_path: the directory you want your CSS files to be. 
# Generally this is a folder in the parent directory of your Sass files 
css_path = File.join(sass_path, "css") 

# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins 
load File.join(File.dirname(__FILE__), $ext_path, 'resources', 'themes') 

#Compass config variable 
relative_assets = true 

Вот структура реж

• Sass/config.rb
• Sass/redTheme.sass
• Sass/CSS

redTheme.sass может выглядеть примерно так:

$base-color: red; 

@import 'compass'; 
@import 'ext4/default/all'; 

После компас компилировать в каталоге Сасс это создаст redTheme.css

• дерзость/CSS/redTheme.css