離子自定義顏色 - 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

回答

相關問題