Sencha touch 使用示例代码（Sencha Touch 2.3）中的scss文件时生成saas错误应用程序

这似乎是一个与saas/scss相关的问题。我试图在Windows7上的Touch2.3中包含一些示例文件中的scss代码，以获得“首次屏幕”。这来自示例TouchTomatos应用程序touch-2.3.0\examples\TouchTomatos\resources\sass

有关的scss文件如下：

_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-querys.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

现在，当我构建我的应用程序sencha应用程序构建测试时，我得到以下错误：

    [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

现在，如果我在_welcomeOverlay.scss中对以下几行进行注释，那么构建将顺利完成：

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

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

我是sass新手，有人能帮我吗

---

Ravi

这段代码似乎可以用Sass/Compass编译，给出的错误在它所抱怨的代码上下文中甚至没有任何意义。你有Sass 3.2+的最新版本吗？谢谢，我想这可能就是问题所在。我安装了Ruby 1.9.3、compass 0.12.2和Sass 3.2.12，正如本堆栈溢出文章中建议的那样。使用此命令的compass compile命令成功编译app.scss。然而，在现在的挖掘中，我发现Sencha Cmd软件4.0.0.203自带了自己的指南针和sass 3.1.7-正如我在C:\Sencha\Cmd\4.0.0.203\extensions\Sencha compass\gems\bin中看到的，这很可能是正在使用的，也可能是导致问题的原因。我们如何让Sencha Touch使用更新的sass？进一步挖掘我发现了这篇文章：这篇文章引用了-请忽略之前的评论：进一步挖掘我发现了这篇文章：这篇文章引用了-提供了一个基于Sencha论坛线程上最新评论创建引用ruby目录的链接的方法其中提到sencha CMD 4.0.0.203仍然与sass-3.1.7捆绑在一起，我想sencha还没有解决这个问题，允许为sass配置不同版本的ruby gems。如果你知道一个干净的解决方法，请分享。谢谢。西曼侬，非常感谢你指出这个问题：-。上述解决方法似乎是目前的解决方法，而且确实有效。