PDA

View Full Version : [FIXED] [4.0.7] Syntax errors when compiling SASS themes



burnnat
30 Nov 2011, 9:45 AM
REQUIRED INFORMATION
Ext version tested:

Ext 4.0.7
Ext 4.1pr1

Description:

Compilation of the ExtJS themes using an up-to-date version of SASS (currently 3.1.11) fails with errors. Mentioned in threads here (http://www.sencha.com/forum/showthread.php?149266-Theming-issue-Line-15-Functions-may-only-be-defined...), here (http://www.sencha.com/forum/showthread.php?158336-Theming-compile-error-Functions-may-only-be-installed-at-the-root...), here (http://www.sencha.com/forum/showthread.php?155114-Where-to-get-themes-for-ExtJS-4&p=674784&viewfull=1#post674784), and here (http://www.sencha.com/forum/showthread.php?155492-SASS-in-4.1) - current workaround is to downgrade to SASS 3.1.1. In addition, the theming guide mentions that "Due to a bug in Ext JS 4.0.2a you will also need to edit line 62 of appname/extjs/resources/themes/lib/utils.rb" - this also needs to be changed in the ExtJS source.

Steps to reproduce the problem:

Follow the ExtJS theming guide (http://docs.sencha.com/ext-js/4-0/#%21/guide/theming) by:

Copying the template resources folder from appname/extjs/resources/themes/templates/resource to your root application folder
Copying the images from appname/extjs/resources/themes/images/default to appname/resources/images
Making the required fix to line 62 of appname/extjs/resources/themes/lib/utils.rb


Attempt to use compass to compile the theme

The result that was expected:

Compilation should complete successfully.

The result that occurs instead:

Compass/SASS returns an error: "mixins/_frame.scss:115: Defining a function within a mixin is not allowed."
Fixing the syntax error in _frame.scss and recompiling yields another error: "widgets/_tabbar.scss:31: Nested mixins are not allowed."

Test Case:

appname/resources/sass>compass compile
HELPFUL INFORMATION
Possible fix:

In mixins/_frame.scss, the "@function pad" should be moved to the top of the document, outside the x-frame mixin.
In widgets/_tabbar.scss, the "@mixin tab-bar-top" and "@mixin tab-bar-bottom" should be moved to the top of the document, outside the extjs-tabbar mixin.
In lib/utils.rb, line 62 should be changed to:



images_path = relative_path

Additional CSS used:

not applicable

Operating System:


Win7
Ruby 1.9.2p0
Compass 0.11.5
Sass 3.1.11

mitchellsimoens
30 Nov 2011, 12:37 PM
Thank you for the report

mystix
3 Jan 2012, 11:07 AM
For the lazy (like me), i've created a diff patch (https://gist.github.com/raw/1554597/d11a99c6be6a23ecc97a1f8213df0a43ee15bcb0/ext-4.1.0-beta-1.sass-errors.patch) of @burnnat's suggested fixes which can be applied to both the 4.0.7 and 4.1.0-beta-1 downloads (code inlined for convenience):


diff --git a/resources/themes/lib/utils.rb b/resources/themes/lib/utils.rb
index d105d6c..5a1a1ba 100644
--- a/resources/themes/lib/utils.rb
+++ b/resources/themes/lib/utils.rb
@@ -59,7 +59,8 @@ module ExtJS4
if relative
image_path = File.join(relative_path, theme, path)
else
- images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
+ # images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
+ images_path = relative_path
image_path = File.join(images_path, path)
end

diff --git a/resources/themes/stylesheets/ext4/default/mixins/_frame.scss b/resources/themes/stylesheets/ext4/default/mixins/_frame.scss
index e681e1c..e6158dd 100644
--- a/resources/themes/stylesheets/ext4/default/mixins/_frame.scss
+++ b/resources/themes/stylesheets/ext4/default/mixins/_frame.scss
@@ -1,3 +1,14 @@
+@function pad($radius) {
+ $radius: boxmax($radius);
+ $radius: parseint($radius);
+ @if $radius > 10 {
+ @return $radius;
+ }
+ @else {
+ @return "0" + $radius;
+ }
+}
+
@mixin x-frame(
$cls,
$ui: null,
@@ -112,17 +123,6 @@
background: #fff;
}

- @function pad($radius) {
- $radius: boxmax($radius);
- $radius: parseint($radius);
- @if $radius > 10 {
- @return $radius;
- }
- @else {
- @return "0" + $radius;
- }
- }
-
$type: '100';
@if $table == true {
$type: '110';
diff --git a/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss b/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss
index 211e357..00b1277 100644
--- a/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss
+++ b/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss
@@ -1,6 +1,73 @@
/**
* @class Ext.tab.Bar
*/
+@mixin tab-bar-top($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
+ .#{$prefix}#{$toolbarCls} {
+ .#{$prefix}#{$bodyCls} {
+ height: $tab-height;
+ border-width: $body-border-width;
+ padding: $body-padding;
+ }
+
+ .#{$prefix}#{$stripCls} {
+ /*position strip from top rather than bottom to avoid off-by-one error in IE6*/
+ top: $tab-height + top($body-border-width) + top($body-padding);
+ border-width: $strip-border-width;
+ height: $strip-height - vertical($strip-border-width);
+ }
+ }
+ .#{$prefix}border-box {
+ .#{$prefix}#{$toolbarCls} {
+ .#{$prefix}#{$bodyCls} {
+ height: $tab-height + vertical($body-border-width) + vertical($body-padding);
+ }
+
+ .#{$prefix}#{$stripCls} {
+ height: $strip-height;
+ }
+ }
+ }
+}
+
+@mixin tab-bar-bottom($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
+ .#{$prefix}#{$toolbarCls} {
+ .#{$prefix}#{$bodyCls} {
+ height: $tab-height;
+ border-width: $body-border-width;
+ padding: $body-padding;
+
+ .#{$prefix}box-inner {
+ position: relative;
+ top: 0 - bottom($strip-border-width);
+ }
+
+ .#{$prefix}box-scroller,
+ .#{$prefix}box-scroller-left,
+ .#{$prefix}box-scroller-right {
+ height: $tab-height + bottom($body-padding) + bottom($strip-border-width);
+ }
+ }
+
+ .#{$prefix}#{$stripCls} {
+ top: top($body-border-width);
+ border-width: $strip-border-width;
+ height: $strip-height - vertical($strip-border-width);
+ }
+ }
+ .#{$prefix}border-box {
+ .#{$prefix}#{$toolbarCls} {
+ .#{$prefix}#{$bodyCls} {
+ height: $tab-height + vertical($body-border-width) + vertical($body-padding);
+ }
+
+ .#{$prefix}#{$stripCls} {
+ height: $strip-height;
+ }
+ }
+ }
+}
+
+
@mixin extjs-tabbar {
.#{$prefix}tab-bar {
position: relative;
@@ -28,72 +95,6 @@
zoom: 1;
}

- @mixin tab-bar-top($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
- .#{$prefix}#{$toolbarCls} {
- .#{$prefix}#{$bodyCls} {
- height: $tab-height;
- border-width: $body-border-width;
- padding: $body-padding;
- }
-
- .#{$prefix}#{$stripCls} {
- /*position strip from top rather than bottom to avoid off-by-one error in IE6*/
- top: $tab-height + top($body-border-width) + top($body-padding);
- border-width: $strip-border-width;
- height: $strip-height - vertical($strip-border-width);
- }
- }
- .#{$prefix}border-box {
- .#{$prefix}#{$toolbarCls} {
- .#{$prefix}#{$bodyCls} {
- height: $tab-height + vertical($body-border-width) + vertical($body-padding);
- }
-
- .#{$prefix}#{$stripCls} {
- height: $strip-height;
- }
- }
- }
- }
-
- @mixin tab-bar-bottom($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
- .#{$prefix}#{$toolbarCls} {
- .#{$prefix}#{$bodyCls} {
- height: $tab-height;
- border-width: $body-border-width;
- padding: $body-padding;
-
- .#{$prefix}box-inner {
- position: relative;
- top: 0 - bottom($strip-border-width);
- }
-
- .#{$prefix}box-scroller,
- .#{$prefix}box-scroller-left,
- .#{$prefix}box-scroller-right {
- height: $tab-height + bottom($body-padding) + bottom($strip-border-width);
- }
- }
-
- .#{$prefix}#{$stripCls} {
- top: top($body-border-width);
- border-width: $strip-border-width;
- height: $strip-height - vertical($strip-border-width);
- }
- }
- .#{$prefix}border-box {
- .#{$prefix}#{$toolbarCls} {
- .#{$prefix}#{$bodyCls} {
- height: $tab-height + vertical($body-border-width) + vertical($body-padding);
- }
-
- .#{$prefix}#{$stripCls} {
- height: $strip-height;
- }
- }
- }
- }
-

/* Top Tabs */
@include tab-bar-top(

mystix
30 Jan 2012, 3:17 AM
updated diff patch (https://raw.github.com/gist/1554597/4f31768528e1894b926d422b6b176f02a7d1f0f7/ext-4.1.0-beta-2.sass-errors.patch) for 4.1b2:


diff --git a/resources/themes/lib/utils.rb b/resources/themes/lib/utils.rb
index d105d6c..5a1a1ba 100644
--- a/resources/themes/lib/utils.rb
+++ b/resources/themes/lib/utils.rb
@@ -59,7 +59,8 @@ module ExtJS4
if relative
image_path = File.join(relative_path, theme, path)
else
- images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
+ # images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
+ images_path = relative_path
image_path = File.join(images_path, path)
end

diff --git a/resources/themes/stylesheets/ext4/default/mixins/_frame.scss b/resources/themes/stylesheets/ext4/default/mixins/_frame.scss
index 3a892da..bf70917 100644
--- a/resources/themes/stylesheets/ext4/default/mixins/_frame.scss
+++ b/resources/themes/stylesheets/ext4/default/mixins/_frame.scss
@@ -1,3 +1,14 @@
+@function pad($radius) {
+ $radius: boxmax($radius);
+ $radius: parseint($radius);
+ @if $radius > 10 {
+ @return $radius;
+ }
+ @else {
+ @return "0" + $radius;
+ }
+}
+
@mixin x-frame(
$cls,
$ui: null,
@@ -112,17 +123,6 @@
background: #fff;
}

- @function pad($radius) {
- $radius: boxmax($radius);
- $radius: parseint($radius);
- @if $radius > 10 {
- @return $radius;
- }
- @else {
- @return "0" + $radius;
- }
- }
-
$type: '100';
@if $table == true {
$type: '110';
diff --git a/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss b/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss
index 211e357..00b1277 100644
--- a/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss
+++ b/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss
@@ -1,6 +1,73 @@
/**
* @class Ext.tab.Bar
*/
+@mixin tab-bar-top($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
+ .#{$prefix}#{$toolbarCls} {
+ .#{$prefix}#{$bodyCls} {
+ height: $tab-height;
+ border-width: $body-border-width;
+ padding: $body-padding;
+ }
+
+ .#{$prefix}#{$stripCls} {
+ /*position strip from top rather than bottom to avoid off-by-one error in IE6*/
+ top: $tab-height + top($body-border-width) + top($body-padding);
+ border-width: $strip-border-width;
+ height: $strip-height - vertical($strip-border-width);
+ }
+ }
+ .#{$prefix}border-box {
+ .#{$prefix}#{$toolbarCls} {
+ .#{$prefix}#{$bodyCls} {
+ height: $tab-height + vertical($body-border-width) + vertical($body-padding);
+ }
+
+ .#{$prefix}#{$stripCls} {
+ height: $strip-height;
+ }
+ }
+ }
+}
+
+@mixin tab-bar-bottom($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
+ .#{$prefix}#{$toolbarCls} {
+ .#{$prefix}#{$bodyCls} {
+ height: $tab-height;
+ border-width: $body-border-width;
+ padding: $body-padding;
+
+ .#{$prefix}box-inner {
+ position: relative;
+ top: 0 - bottom($strip-border-width);
+ }
+
+ .#{$prefix}box-scroller,
+ .#{$prefix}box-scroller-left,
+ .#{$prefix}box-scroller-right {
+ height: $tab-height + bottom($body-padding) + bottom($strip-border-width);
+ }
+ }
+
+ .#{$prefix}#{$stripCls} {
+ top: top($body-border-width);
+ border-width: $strip-border-width;
+ height: $strip-height - vertical($strip-border-width);
+ }
+ }
+ .#{$prefix}border-box {
+ .#{$prefix}#{$toolbarCls} {
+ .#{$prefix}#{$bodyCls} {
+ height: $tab-height + vertical($body-border-width) + vertical($body-padding);
+ }
+
+ .#{$prefix}#{$stripCls} {
+ height: $strip-height;
+ }
+ }
+ }
+}
+
+
@mixin extjs-tabbar {
.#{$prefix}tab-bar {
position: relative;
@@ -28,72 +95,6 @@
zoom: 1;
}

- @mixin tab-bar-top($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
- .#{$prefix}#{$toolbarCls} {
- .#{$prefix}#{$bodyCls} {
- height: $tab-height;
- border-width: $body-border-width;
- padding: $body-padding;
- }
-
- .#{$prefix}#{$stripCls} {
- /*position strip from top rather than bottom to avoid off-by-one error in IE6*/
- top: $tab-height + top($body-border-width) + top($body-padding);
- border-width: $strip-border-width;
- height: $strip-height - vertical($strip-border-width);
- }
- }
- .#{$prefix}border-box {
- .#{$prefix}#{$toolbarCls} {
- .#{$prefix}#{$bodyCls} {
- height: $tab-height + vertical($body-border-width) + vertical($body-padding);
- }
-
- .#{$prefix}#{$stripCls} {
- height: $strip-height;
- }
- }
- }
- }
-
- @mixin tab-bar-bottom($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
- .#{$prefix}#{$toolbarCls} {
- .#{$prefix}#{$bodyCls} {
- height: $tab-height;
- border-width: $body-border-width;
- padding: $body-padding;
-
- .#{$prefix}box-inner {
- position: relative;
- top: 0 - bottom($strip-border-width);
- }
-
- .#{$prefix}box-scroller,
- .#{$prefix}box-scroller-left,
- .#{$prefix}box-scroller-right {
- height: $tab-height + bottom($body-padding) + bottom($strip-border-width);
- }
- }
-
- .#{$prefix}#{$stripCls} {
- top: top($body-border-width);
- border-width: $strip-border-width;
- height: $strip-height - vertical($strip-border-width);
- }
- }
- .#{$prefix}border-box {
- .#{$prefix}#{$toolbarCls} {
- .#{$prefix}#{$bodyCls} {
- height: $tab-height + vertical($body-border-width) + vertical($body-padding);
- }
-
- .#{$prefix}#{$stripCls} {
- height: $strip-height;
- }
- }
- }
- }
-

/* Top Tabs */
@include tab-bar-top(

mlmarius
28 Feb 2012, 4:21 AM
Hi, just installed compass and i have the same problem, found your thread with the patch but i'm not quite sure how to apply it to my ext sources. Can you please explain ?

P.S. runing compass watch messed up all my stylesheets.

mlmarius
28 Feb 2012, 5:29 AM
now there is a new problem.

i needed to make a link in the resources folder to themes/images/default because now the stylesheets point to images on the wrong path.