Question

这似乎是一个与saas / scss相关的问题。我试图在Windows 7的Touch 2.3中包含一些示例文件的scss代码来获取“第一次屏幕”。这是来自示例touchtomatoes应用程序（touch-2.3.0 \ examples \ touchtomatoes \ 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-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: "&#x21dd;";
    //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的新手，有人可以帮忙吗？

拉维

saas在使用示例代码中的scss文件时构建应用程序时出错（Sencha Touch 2.3）

0 个答案: