離子2 - 創建主漸變色

如何設置我的原色在variables.scss我不能做這樣的：離子2 - 創建主漸變色

variables.scss:

$colors: (
    // primary: #4caefe, 

    primary2: linear-gradient(to right, #0fe2f3, #4caefe), 
    secondary: #32db64, 
    danger:  #f53d3d, 
    light:  #fff, 
    dark:  #222, 
    background: #f7f7f7 
);

這是錯誤消息：

[12:53:30] sass: ...top/GitHub/plenumo-ionic2/node_modules/ionic-angular/themes/ionic.functions.scss, line: 109 
      The map color `primary` is not defined. Please make sure the color exists in your `$colors` map. For 
      example: $colors: (primary: #327eff); 

    L109: @error $error-msg;

如何將基色設置爲我想要設置的漸變？

這裏是代碼，我使用變量：

.play-btn { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 60px; 
    height: 60px; 
    border: 1px solid map-get($colors, primary); 
    border-radius: 50%; 
    background-color: transparent; 
    background: map-get($colors, primary2); 

    .ion-md-icon-play_1 { 
     margin-left: 3px; 
    } 
}

這是不可能的所以它是使用的主要變量的每個元素上用來簡單地改變主要變量？因爲漸變只適用於backround property

來源

2017-05-29 Sreinieren

你使用的是什麼sass版本？ – llobet

看起來問題在於，如何將元素的顏色設置爲主要顏色，而不是初始化元素的顏色。 –

@suraj我嘗試創建其他變量'primary2'並將其作爲background-圖像，但仍然是相同的錯誤 – Sreinieren

它設置得很好。也許你有一些麻煩得到顏色...

$colors: (
    primary: linear-gradient(#0fe2f3, #4caefe), 
    secondary: #32db64, 
    danger:  #f53d3d, 
    light:  #fff, 
    dark:  #222, 
    background: #f7f7f7 
); 

.color{ 
    background-image: map-get($colors, primary); 
}

來源

2017-05-29 11:41:35 llobet

仍然是一樣的錯誤.. – Sreinieren

首先，嘗試刪除或重命名您的地圖中的「背景」鍵，它可能會導致錯誤，我猜。在其他方面你的代碼工作完美，你可以檢查輸出here。如果它對你沒有幫助，給我錯誤按摩與主動「主」鍵。

來源

2017-05-30 15:53:32

離子2 - 創建主漸變色

回答

相關問題