离子自定义颜色 - SASS

我是离子和sass框架的新手。离子自定义颜色 - SASS

我想为我的应用程序添加自定义颜色，所以我正在尝试更新位于scss文件夹内的ionic.app.scss文件。

所以，如果我尝试覆盖现有的变量说：

$assertive : #F35C6 !default;

它工作正常，但如果我创建一个自定义颜色说：

$my-custom-color : #F35C6F !default;

它不工作。我是否正确地做，请帮助！

谢谢。

编辑：

ionic.app.scss文件：

@charset "UTF-8"; 
/* 
To customize the look and feel of Ionic, you can override the variables 
in ionic's _variables.scss file. 

For example, you might change some of the default colors: 

$light:       #fff !default; 
$stable:       #f8f8f8 !default; 
$positive:      #387ef5 !default; 
$calm:       #11c1f3 !default; 
$balanced:      #33cd5f !default; 
$energized:      #ffc900 !default; 
$assertive:      #ef473a !default; 
$royal:       #886aea !default; 
$dark:       #444 !default; 


*/ 

$my-custom-color : #F35C6F !default; 
// The path for our ionicons font files, relative to the built CSS in www/css 
$ionicons-font-path: "../lib/ionic/fonts" !default; 

// Include all of Ionic 
@import "../www/lib/ionic/scss/ionic";

用法：

<label class="item item-input"> 
    <i class="icon ion-at placeholder-icon my-custom-color"></i> 
    <input type="email" placeholder="Email ID"> 
</label>

来源

2016-04-17 Tushar Agarwal

提供您声明它的代码（以及其他变量）以及您在何处使用它。 – theblindprophet

@theblindprophet：我编辑了我的问题。 –

当您添加自定义颜色变量，这就是它的作用，它会创建一个变量。另一方面，Ionic颜色在Ionic CSS文件中都有几个CSS类，它们可以让你在你的视图中使用.positive。

下面是从离子源文件$positive颜色的CSS：

.positive, a.positive { 
    color: $positive; 
} 
.positive-bg { 
    background-color: $positive; 
} 
.positive-border { 
    border-color: $button-positive-border; 
}

没有为自己的颜色创建这些类，通过将这些以自己的CSS，可以实现相同的行为。

来源

2016-04-19 17:38:17 Dexter

谢谢@Dexter，那么我应该怎么做，如果我想创建自定义颜色绑定到自定义变量。 –

只需复制我发布的内容，创建一个像这样的变量：'$ custom-color'并在我的示例中用'custom-color'替换'positive'，应该很好。 – Dexter

我在这里看到的是一个变量'$ positive：＃387ef5！default;' 里面的_variable.scss里面的离子库。这反过来创建一个css（ionic.css） '.positive，a.positive {0}颜色：＃387ef5; } .positive-bg { background-color：＃387ef5; } .positive-border {0} border-color：＃0c60ee; }' 我们不能为'$ custom-color'实现类似这样的事情。 –

离子自定义颜色 - SASS

回答

相关问题