Results 1 to 3 of 3

Thread: Errors while compiling SASS

  1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    284
    Vote Rating
    3
      0  

    Default Errors while compiling SASS

    Greetings all:

    I copied the code for a new UI from a theming article to test it out. Added the line to import the UI into my main SASS file and attempted to compile. I get SEVERAL errors regarding theme images not being found. Now I am a bit confused....

    UI SASS
    Code:
    @include extjs-button-ui(
        /* UI + Scale */
        'green-small',
        $border-radius: $button-small-border-radius,
        $border-width: $button-small-border-width,  
        $border-color: green,
        $border-color-over: green,
        $border-color-focus: green,
        $border-color-pressed: green,
        $border-color-disabled: green,
        $padding: $button-small-padding,
        $text-padding: $button-small-text-padding,
        $background-color: green,
        $background-color-over: green,
        $background-color-focus: green,
        $background-color-pressed: green,
        $background-color-disabled: green,
        $background-gradient: $button-default-background-gradient,
        $background-gradient-over: $button-default-background-gradient-over,
        $background-gradient-focus: $button-default-background-gradient-focus,
        $background-gradient-pressed: $button-default-background-gradient-pressed,
        $background-gradient-disabled: $button-default-background-gradient-disabled,
        $color: $button-default-color,
        $color-over: $button-default-color-over,
        $color-focus: $button-default-color-focus,
        $color-pressed: $button-default-color-pressed,
        $color-disabled: $button-default-color-disabled,
        $font-size: $button-small-font-size,
        $font-size-over: $button-small-font-size-over,
        $font-size-focus: $button-small-font-size-focus,
        $font-size-pressed: $button-small-font-size-pressed,
        $font-size-disabled: $button-small-font-size-disabled,
        $font-weight: $button-small-font-weight,
        $font-weight-over: $button-small-font-weight-over,
        $font-weight-focus: $button-small-font-weight-focus,
        $font-weight-pressed: $button-small-font-weight-pressed,
        $font-weight-disabled: $button-small-font-weight-disabled,
        $font-family: $button-small-font-family,
        $font-family-over: $button-small-font-family-over,
        $font-family-focus: $button-small-font-family-focus,
        $font-family-pressed: $button-small-font-family-pressed,
        $font-family-disabled: $button-small-font-family-disabled,
        $icon-size: $button-small-icon-size
    );
    Code:
    // Unless you want to include all components, you must set $include-default to false
    // IF you set this to true, you can also remove lines 10 to 38 of this file
    $include-default: false;
    
    /**
     * Toolbar Configuration
     **/
    $toolbar-background-color: #0B5FA5 !default;
    $toolbar-background-gradient: #0B5FA5 !default;
    $toolbar-inner-border-width: 1px 0px 0px !default;
    $toolbar-inner-border-color: #0B5FA5 !default;
    $toolbar-footer-vertical-spacing: 2px !default;
    $toolbar-border-color: 0B5FA5 !default;
    $toolbar-spacer-width: 2px !default;
    $toolbar-separator-color: #808080 !default;
    $toolbar-separator-highlight-color: #fff !default;
    $toolbar-text-font-family: tahoma,arial,verdana,sans-serif !default;
    $toolbar-text-font-size: 11px !default; //11px
    $toolbar-text-font-weight: normal !default;
    $toolbar-text-color: #F9F9F9 !default;
    $toolbar-text-padding: 3px 4px 0 4px !default;
    $toolbar-text-line-height: 16px !default;
    /**
     * Toolbar Button Configuration
     **/
    $button-toolbar-color: #F9F9F9 !default;
    $button-toolbar-color-over: $button-toolbar-color !default;
    $button-toolbar-color-focus: $button-toolbar-color-over !default;
    $button-toolbar-color-pressed: $button-toolbar-color !default;
    $button-toolbar-color-disabled: lighten($button-toolbar-color, 35) !default;
     
     
     
    @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.
    @include extjs-boundlist;
    @include extjs-button;
    @include extjs-btn-group;
    @include extjs-datepicker;
    @include extjs-colorpicker;
    @include extjs-menu;
    @include extjs-grid;
    @include extjs-form;
        @include extjs-form-field;
        @include extjs-form-fieldset;
        @include extjs-form-file;
        @include extjs-form-checkboxfield;
        @include extjs-form-checkboxgroup;
        @include extjs-form-triggerfield;
        @include extjs-form-htmleditor;
    @include extjs-panel;
    @include extjs-qtip;
    @include extjs-slider;
    @include extjs-progress;
    @include extjs-toolbar;
    @include extjs-window;
    @include extjs-messagebox;
    @include extjs-tabbar;
    @include extjs-tab;
    @include extjs-tree;
    @include extjs-drawcomponent;
    @include extjs-viewport;
    @import 'tb-buttons'; 
    // This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
    // You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
    // This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
    // The value can either be true, in which case the image path will be "../images/"
    // or a string, of where the path is
    $relative-image-path-for-uis: true; // defaults to "../images/" when true
    Attached a screenshot of the errors I am getting. Any ideas??? Thanks.compass errors.png

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Is the path valid?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    India
    Posts
    307
    Vote Rating
    2
      0  

    Default

    I am also getting the same error while generating the custom "ui".

    any solution ??

Posting Permissions

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