Sencha 中的 SCSS 主题 -$base-color答案

【问题标题】：SCSS Theming in Sencha -$base-colorSencha 中的 SCSS 主题 -$base-color
【发布时间】：2013-07-16 22:55:33
【问题描述】：

编辑：

我真的需要它来工作，如果您要回答或回复，请先阅读问题评论，您的观点可能已经涵盖。

我正在尝试覆盖 sencha 的基本变量以为我的应用创建主题

这是我的 app.scss

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';


$base-color: #8bc531;

这个也失效了，已经在cmets中回复了。无需链接无效的答案并再次投票。另外，很高兴知道，.scss 文件确实可以正确编译而没有错误。

$base-color: #8bc531;
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

实际上文件更长，其他一切正常。我只是对 $base-color 有问题，它根本不会改变颜色，而且它应该会立即影响应用程序的大部分组件......

有人能解释一下为什么它不起作用吗？它应该显示在煎茶网站上吗...？

【问题讨论】：

在这里查看这个答案：stackoverflow.com/questions/16184569/…
还是不行：S
哪个网站显示您正在做的事情应该有效？在第一页搜索您问题的确切标题：uvd.co.uk/blog/theming-sencha-touch-with-sass（首先注意变量，然后导入，与链接到的答案 kevhender 完全相同）或sencha.com/blog/an-introduction-to-theming-sencha-touch
我读过那些，看到我也证实了kev的回答......仍然没有任何工作......你的第一个链接不起作用。另外，导入前或导入后似乎因作者而异，似乎没有标准
当您尝试通过 compass compile 编译您的 SASS 时，您是否遇到任何错误？在指定 @import 语句之前，您是否尝试过将代码 $base-color 放在顶部？需要更多信息来帮助您进一步，请..

标签： css extjs sencha-touch sencha-touch-2 sass

【解决方案1】：

小心使用 ST 试用版创建项目。索引文件和你购买时的不一样，在试用版中，它用颜色覆盖了主题，（不可编辑）而在付费版中，这一行被删除-_-'

<!DOCTYPE HTML>

<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>CarboZero</title>
<style type="text/css">
    html, body {
        height: 100%;
        background-color: #1985D0
    }

    #appLoadingIndicator {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        text-align: center;
        width: 100%;
        height: 30px;
        -webkit-animation-name: appLoadingIndicator;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: linear;
    }

    #appLoadingIndicator > * {
        background-color: #FFFFFF;
        display: inline-block;
        height: 30px;
        -webkit-border-radius: 15px;
        margin: 0 5px;
        width: 30px;
        opacity: 0.8;
    }

    @-webkit-keyframes appLoadingIndicator{
        0% {
            opacity: 0.8
        }
        50% {
            opacity: 0
        }
        100% {
            opacity: 0.8
        }
    }
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<script src="resources/AppLibrary.js"></script>
<script src="resources/ENG.js"></script>
<script src="resources/FR.js"></script>
<script src="resources/ESP.js"></script>
<script src="resources/GlobalVariables.js"></script>
<script src="resources/ProjectStorage.js"></script>
<script src="resources/Elements.js"></script>
<script src="resources/UnitConversion.js"></script>
<script src="resources/Types.js"></script>
<script src="resources/LanguageConversion.js"></script>
<script src="resources/ESPElement.js"></script>
<script src="resources/ENGElement.js"></script>
<script src="resources/FRElement.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

【讨论】：