saas Error building app when using scss file from example code (Sencha Touch 2.3)

Question

This seems to be a saas/scss related issue. I am trying to include some scss code from the example files in Touch 2.3 on Windows 7 to get the 'first time screen'. This is from the sample touchtomatoes app (touch-2.3.0\examples\touchtomatoes\resources\sass).

The scss files in question are as follows:

_welcomeOverlay.scss :

.x-ie .welcomeOverlay.x-panel, .x-android-2 .welcomeOverlay.x-panel {
    background-color: rgba(0,0,0,.5);
}

.welcomeOverlay.x-panel {
    @include background-image(radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7), rgba(0,0,0,0.9)));
    background-color: transparent;

    .x-innerhtml {
        @include st-box;
        @include st-box-orient(vertical);
        @include st-box-align(center);
        @include st-box-pack(center);
        height: 100%;
        color: white;

        .message {
            @include st-box;
            @include st-box-orient(vertical);
            @include st-box-align(center);
            @include st-box-pack(center);
            @include text-shadow(1px 1px 0px rgba(0,0,0,.7));

            @include query-medium {
                font-size: 2em;
            }
            @include query-large {
                font-size: 2.2em;
            }

            @include query-small-landscape {
                font-size: .8em;
            }

            h2 {
                text-align: center;
                font-weight: 300;
                font-size: 1.2em;
                padding-bottom:15px;
                color: #41942e;
                em {
                    display: block;
                    color: #125B8F;
                    font-weight: 800;
                    font-size: 1.6em;
                }
            }

            p{
                text-align: center;
                font-weight: 600;
                max-width: 75%;
            }
        }

        .tap {
            padding-top:30px;
            font-weight: 100px;
            font-size: .8em;
        }


    }
}

_media-queries.scss:

@mixin query-small {
    @media screen and (max-width: 480px){
        @content;
    }
}

@mixin query-small-landscape {
    @media screen and (orientation: landscape) and (max-height: 480px){
        @content;
    }
}

@mixin query-medium {
    @media screen and (min-width:481px) and (max-width: 1024px){
        @content;
    }
}

@mixin query-large {
    @media only screen and (min-width: 1024px) {
        @content;
    }
}

app.scss:

@import "compass/css3";




@import "media-queries";


// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

@import "welcomeOverlay";


@include icon-font('Pictos', inline-font-files('pictos/pictos-web.woff', woff, 'pictos/pictos-web.ttf', truetype,'pictos/pictos-web.svg', svg));

// Custom code goes here..

// Examples of using the icon mixin:
// @include icon('user');
.tr_select_field_config
{
    font-size:5em !important;
    color:red;
    font-color: blue !important;

}
.result_list_cfg 
{
    font-size:0.8em !important;
    color:red;
}
.no_prod_found_parameters
{
    font-size:0.75em !important;
    color:red;
}
.no_prod_found_label_text
{
    font-size:0.9em !important;
    color:red !important;
}

.home_page_list_text 
{
    border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #0000FF;
background-color:red;

}


.dist_list
{
    font-size:0.9em !important;
    //color:red !important;
}

//@include pictos-iconmask('mail'); 
@include icon('mail'); 


//Import Sencha SAAS
@import "media-queries";

@import "welcomeOverlay";


//New buton color
@include sencha-button-ui('trblue', #0067B0, 'glossy');



//Adding class(es) for list options for users (page 1)

//@include icon('search_black'); 
//@include icon('refresh5'); 
//@include icon('globe1'); 
//@include icon('tabbed_book'); 
//@include icon('phone'); 
//@include icon('mail'); 
//@include icon('globe1');



.userCls:after {
    font-family: "Pictos";
    content: "s";
    //content: "⇝";
    //icon: "mail";
    font-size: 1.5 em;
}

//End of class(es) for list options

Now when I build my app (sencha app build testing) I get the following error:

    [INF] executing compass using system installed ruby runtime
Sass::SyntaxError on line ["24"] of C: Invalid CSS after "...de query-medium": expected "}", was "{"
Run with --trace to see the full backtrace
    error app.scss (Line 24 of _welcomeOverlay.scss: Invalid CSS after "...de query-medium": expected "}", was "{")
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExProcess: compass process exited with non-zero code
 : 1
[ERR]
[ERR] Total time: 21 seconds

Now if I comment the following lines (in _welcomeOverlay.scss), the build goes through well :

@include query-medium{
                font-size: 2em;
            }
            @include query-large {
                font-size: 2.2em;
            }

            @include query-small-landscape {
                font-size: .8em;
            }

I am new to sass, can anyone help with this please ?

Ravi