PDA

View Full Version : Compass SCSS Bugs



kscTW
9 Mar 2011, 6:16 AM
Sencha guys,

I got theming via compass and sass running on ext-4.0-pr3. However, it hurt. A lot.


All of the following after installation of Ruby and Gem on Windows XP:

1. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
--pre-Versions are required! Otherwise many <ext-4.0-pr3>-*.scss-files won't compile!
-> In Ruby console execute the following one by one:
gem install haml --pre
gem install sass --pre
gem install compass --pre

2. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Error in File <ext-4.0-pr3>\resources\themes\stylesheets\ext4\default\widgets, line 9:
End of: ".#{$prefix}-boundlist-item {" -> Closing bracket has "}" instead of "}"
-> Replace "}" by "}"

3. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Create sass-dir in resource-dir

- Create config.rb-file in sass-dir. Config.rb has this content:

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework automatically.
load File.join(dir, '..', 'themes')

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
environment = :development
output_style = :expanded

4. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Create <yourapp>.scss-file in sass-dir. Conents of <yourapp>.scss-file:

// Let's start with the basics
$base-color: #f00;
$base-gradient: 'glossy';

// Lists
$list-active-gradient: 'bevel';
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
$list-header-gradient: 'matte';

@import 'ext4/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.

/*structure*/
@include extjs-boundlist;
@include extjs-button;
@include extjs-menu;
@include extjs-form;
@include extjs-form-field;
@include extjs-form-triggerfield;
@include extjs-panel;
@include extjs-qtip;
@include extjs-toolbar;
@include extjs-window;

@include extjs-resizable;
@include extjs-splitter;

@include extjs-layout;


/*theming*/
@include extjs-boundlist;
@include extjs-button;
@include extjs-menu;
@include extjs-form;
@include extjs-form-field;
@include extjs-form-triggerfield;
// @include extjs-form-date;
@include extjs-panel;
@include extjs-qtip;
@include extjs-toolbar;
@include extjs-window;

@include extjs-splitter;


!! Important here is !!

4.1.
extjs-structure-boundlist; // wrong
extjs-boundlist; // correct
(Applies to all "extjs-structure"-lines)
-> Replace all "-structure" by ""

4.2.
extjs-theme-boundlist; // wrong
extjs-boundlist; // correct
(Applies to all "extjs-theme"-lines)
-> Replace all "-theme" by ""

4.3. Comment @include extjs-form-date; (can not be not found)



5. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
After the above modifications I could compile my theme.
- Start Ruby-Console
- Navigate in Ruby-Console to your <ext-4.0-pr3>/resources/sass-dir
- call "compass compile <yourapp>.scss"

dmackerman
9 Mar 2011, 8:52 AM
Thanks, this works!

navnet
13 Apr 2011, 2:52 PM
Hi, thanks for post.

i got un error on compile

"You must compile individual stylesheets from the project directory."

W:\Ruby192\bin>compass compile "W:\xampp\htdocs\app.loc\lib\ext\resources\sass\app.scss"
You must compile individual stylesheets from the project directory.

W:\Ruby192\bin>compass watch "W:\xampp\htdocs\app.loc\lib\ext\resources\sass\app.scss"
You must compile individual stylesheets from the project directory.

Thanks for help!!


Sencha guys,

I got theming via compass and sass running on ext-4.0-pr3. However, it hurt. A lot.


All of the following after installation of Ruby and Gem on Windows XP:

1. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
--pre-Versions are required! Otherwise many <ext-4.0-pr3>-*.scss-files won't compile!
-> In Ruby console execute the following one by one:
gem install haml --pre
gem install sass --pre
gem install compass --pre

2. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Error in File <ext-4.0-pr3>\resources\themes\stylesheets\ext4\default\widgets, line 9:
End of: ".#{$prefix}-boundlist-item {" -> Closing bracket has "}" instead of "}"
-> Replace "}" by "}"

3. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Create sass-dir in resource-dir

- Create config.rb-file in sass-dir. Config.rb has this content:

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework automatically.
load File.join(dir, '..', 'themes')

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
environment = :development
output_style = :expanded

4. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Create <yourapp>.scss-file in sass-dir. Conents of <yourapp>.scss-file:

// Let's start with the basics
$base-color: #f00;
$base-gradient: 'glossy';

// Lists
$list-active-gradient: 'bevel';
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
$list-header-gradient: 'matte';

@import 'ext4/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.

/*structure*/
@include extjs-boundlist;
@include extjs-button;
@include extjs-menu;
@include extjs-form;
@include extjs-form-field;
@include extjs-form-triggerfield;
@include extjs-panel;
@include extjs-qtip;
@include extjs-toolbar;
@include extjs-window;

@include extjs-resizable;
@include extjs-splitter;

@include extjs-layout;


/*theming*/
@include extjs-boundlist;
@include extjs-button;
@include extjs-menu;
@include extjs-form;
@include extjs-form-field;
@include extjs-form-triggerfield;
// @include extjs-form-date;
@include extjs-panel;
@include extjs-qtip;
@include extjs-toolbar;
@include extjs-window;

@include extjs-splitter;


!! Important here is !!

4.1.
extjs-structure-boundlist; // wrong
extjs-boundlist; // correct
(Applies to all "extjs-structure"-lines)
-> Replace all "-structure" by ""

4.2.
extjs-theme-boundlist; // wrong
extjs-boundlist; // correct
(Applies to all "extjs-theme"-lines)
-> Replace all "-theme" by ""

4.3. Comment @include extjs-form-date; (can not be not found)



5. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
After the above modifications I could compile my theme.
- Start Ruby-Console
- Navigate in Ruby-Console to your <ext-4.0-pr3>/resources/sass-dir
- call "compass compile <yourapp>.scss"

Plkilroy
9 Jun 2011, 5:13 AM
Hi Navnet, did you workout what was going wrong? I to am having that same error, any advise greatly appreciated! Paul

ankgkp
20 Apr 2012, 12:56 PM
You would need to pass the folder that contains the SCSS file you want to compile, instead to pointing to the file directly. So if you store your SCSS file in a folder name 'sass', then:
compass compile sass