View Full Version : Theming issue: Line 15: Functions may only be defined...

1 Oct 2011, 3:04 PM
In following the guide for Theming I compile and get the following error:
Line 115: Functions may only be defined at the root directory of a document.

Has anyone else followed the theming guide and had success? Maybe my folder setup is wrong?

3 Oct 2011, 8:45 AM
Having same issue anyone resolved this?

From my-ext-theme.css:
Syntax error: Functions may only be defined at the root of a document.
on line 115 of C:/www/clientpos/extjs/resources/themes/stylesheets//ext4/default/mixins/_frame.scss
from line 4 of C:/www/clientpos/extjs/resources/themes/stylesheets//ext4/default/_mixins.scss
from line 9 of C:/www/clientpos/extjs/resources/themes/stylesheets//ext4/default/_all.scss
from line 8 of C:/www/clientpos/resources/sass/my-ext-theme.scss

3 Oct 2011, 9:00 AM
Seems like an issue with SASS rolling back to an older version seems to resolve the issue:

gem uninstall sass
gem install sass -v 3.1.1

Found on stack overflow:

6 Oct 2011, 2:27 PM
I have the same issue with sass 3.1.8
Rolled back to sass 3.1.1 resolve the issue.

slemmon and eddiegarza,
Thank you for reporting!

6 Oct 2011, 3:20 PM
Thx for the fix instructions.

Has anyone filled out a bug report on this officially that you all are aware of? Wonder if this could all be remedied in 4.1.

7 Oct 2011, 6:40 AM
same here... Thanks for the info "gem install sass -v 3.1.1" did the trick =D>

12 Oct 2011, 2:09 PM
Waiting for Sencha guys to fix this in their code

18 Oct 2011, 6:10 AM
this is really frustrating, i'd love to know a timetable of when i can use the latest version of compass and not have to use an old version

18 Oct 2011, 6:21 AM
this is really frustrating, i'd love to know a timetable of when i can use the latest version of compass and not have to use an old version

19 Oct 2011, 11:08 AM
Just encountered this today. The only silver lining is this forum thread is the first result in google.

19 Oct 2011, 4:53 PM
I've been working on a online tool to compile ExtJS themes during my time off for about 2 weeks.
Is at baby stage lol, so feel free to go to Github (https://github.com/Certun/ExtJS-Themer) download the code and work on it :-)
If you do, dont forget to share the code :-)


H (http://certun.com/extjs-4-themer/)ope works for you guys


1 Nov 2011, 6:37 PM
@eddiegarza: Thanks for posting the fix. Encountered this bug tonight and now I'm past it.

18 Nov 2011, 10:17 AM
I have Sass 3.1.10 and compass 0.11.1 and I'm still getting the error: Functions may only be defined at the root of a document.

I'm new to using sass/compass and I'm not sure If I have my folders set up right. I only have access to the resource directory and I am trying the following:
sass --watch /resources/sass

That could be my problem but I just don't know.

27 Nov 2011, 7:25 AM
Oh dear, Cuberic,

sass 3.1.10 is not the same as 3.1.1, it's 10 versions to the back, so downgrade it to 3.1.1. Install compass 0.11.5 as well, not 0.11.1

7 Dec 2011, 4:05 PM
Not only do I have to figure out how to install SASS and Compass on Linux - which is thankfully well documented else where, but then once I get the latest versions installed I have to roll them back to older versions?

Well played Sencha, Well Played Indeed. ;)

8 Dec 2011, 6:59 AM
FYI, this problem has been accepted by Sencha as ticket EXTJSIV-4602 (http://www.sencha.com/forum/showthread.php?158358-4.0.7-Syntax-errors-when-compiling-SASS-themes) so there's hope that it will be fixed soon.

8 Dec 2011, 8:02 AM
Thanks... that fix the issue for me too

24 Jan 2012, 4:58 AM
Thanks a lot eddiegarza! version 3.1.1 for sass fixed it.

30 Jan 2012, 8:19 AM
Works for me too thanks=D>

1 Feb 2012, 6:12 AM
I encountered the same issue. I referred to the following thread to fix. You have to uninstall the latest version of SASS and roll back to earlier version, 3.1.1. There looks to be an open ticket with Sencha on the issue.


FYI, this is my project structure. Hope this helps.

- webapp
- extjs
- resources
+ css
+ sass
+ themes

2 Feb 2012, 10:33 PM
I posted diff patches (for 4.0.7/4.1b1/b2) based on the suggested fixes in that bug report:
(4.0.7/4.1b1) http://www.sencha.com/forum/showthread.php?158358-4.0.7-Syntax-errors-when-compiling-SASS-themes&p=706963&viewfull=1#post706963
(4.1b2) http://www.sencha.com/forum/showthread.php?158358-4.0.7-Syntax-errors-when-compiling-SASS-themes&p=723291&viewfull=1#post723291

Fixes the problem without having to rollback to an earlier version of sass (I'm on sass-3.1.12).

10 Feb 2012, 7:53 AM
Only two files are responsible:


In the first file, move the block of code (from line 115 if I remember well)
@function pad() { (content of the function pad) }
from the content of the block
@mixing x-frame(){ (content of the mixing x-frame) }
to the beginning of the file, before the block named above (the mixing x-frame)

Do the same in the second file with the blocks of code from line 31 (if I remember well)
@mixin tab-bar-top(){(content of the mixing tab-bar-top) }
@mixin tab-bar-bottom(){(content of the mixing tab-bar-bottom) }
(move them above the mixing that contains them)

The error occurred because Sass doesn't seem to allow (anymore?) having functions/mixings inside functions/mixings, if I understand well, that's why it works when you move those functions/mixings outside as I suggest

9 Mar 2012, 10:02 AM
Thanks for posting this thread. Uninstall and reinstall of 3.1.1 fixed the issue, and doesn't break Touch theming.

11 May 2012, 2:10 PM
The incorrectly placed mixins mentioned in post #22 are still in the wrong location in _frame.scss and _tabbar.scss. This thread was started 7 months ago. Thought it would have been fixed by now.