Results 1 to 6 of 6

Thread: [4.0.7] Syntax errors when compiling SASS themes

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-4602 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    418

    Default [4.0.7] Syntax errors when compiling SASS themes

    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, here, here, and here - 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 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:
    Code:
    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:

    Code:
    images_path = relative_path
    Additional CSS used:
    • not applicable

    Operating System:

    • Win7
    • Ruby 1.9.2p0
    • Compass 0.11.5
    • Sass 3.1.11

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Thank you for the report
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default diff patch

    For the lazy (like me), i've created a diff 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):
    Code:
    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 @@
    [email protected] 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
       */
    [email protected] 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;
    +            }
    +        }
    +    }
    +}
    +
    [email protected] 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(

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    updated diff patch for 4.1b2:
    Code:
    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 @@
    [email protected] 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
       */
    [email protected] 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;
    +            }
    +        }
    +    }
    +}
    +
    [email protected] 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(

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    5

    Default how do i apply the patch ?

    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.

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    5

    Exclamation Succeded to apply patch but ...

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •