离子自定义颜色 - SASS

Question

我是 Ionic 和 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>

Answer 1

当您添加自定义颜色变量时，仅此而已，它会创建一个变量。另一方面，Ionic 颜色在 Ionic CSS 文件中都有几个 CSS 类，例如允许您在视图中使用 .positive。

这是 Ionic 源文件中 $positive 颜色的 CSS：

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

这些类不是为您自己的颜色创建的，通过将它们添加到您自己的 CSS，您可以实现相同的行为。

离子自定义颜色 - SASS

Ionic Custom colors - SASS

ionic-framework

ionic2

gulp-sass