如何以編程方式在Ionic的variables.scss中設置變量？

Ionic自帶一個variables.scss文件，在那裏可以設置不同的樣式變量，如原色等。如何以編程方式在Ionic的variables.scss中設置變量？

有沒有一種方法可以通過編程方式更改這裏面的變量？

$colors: (
    primary: #ffbb00, 
    secondary: #32db64, 
    danger: #f53d3d 
);

例如：改變原色顏色選擇器

來源

2017-07-14 Kevin Shi

你想改變它像永遠，或者當用戶關閉應用程序，回來你設置回原來的？ –

@GabrielBarreto永遠是可取的，但或者是好的。 –

，所以我就好奇，環顧四周，看看我能找到一個解決方案的結果，所以這裏就是我的了：

你不能改變SASS變量，因爲它被編譯並轉換爲css，所以你使用屬性color="your Color Name"的任何標記都將在構建過程中被預處理，並變成大量的background-color和其他東西。

，所以我開始尋找使用css variables與SASS變量，像

:root { 
    --modified-color: #333; 
} 
/*Declaring it here \/ or inside :root */ 
$colors: (
    primary: --modified-color, 
    secondary: #32db64, 
    danger: #f53d3d 
);

但無法達到我想要的，或者我不知道如何正確地做到這一點。有了一個變量，也許你可以做我的下一個想法，但以一種更簡單的方式。

所以我想「也許有一個變通方法」和事來到我的腦海：

你可以創建一個類，姑且稱之爲.dynamic-bg-color。
最初將其設置爲您想要的顏色，比方說.dynamic-bg-color: { bakcground-color: #333}。
將該類授予任何要更改的組件，例如<ion-item>或<ion-toolbar>或<button>。
將此顏色作爲字符串保存在某處，例如localStorage，NativeStorage等（this.storage.set('dynamic', '#333')）;
當用戶選擇新的顏色，你會覆蓋舊的顏色在存儲和改變顏色類：

public updateColor = (pickedColor) => { const color: string = pickedColor; // I'M ASSUMING THE PICKER RETURNS IT AS A STRING LIKE '#333333' let myTags = document.getElementsByClassName('dynamic-bg-color'); for(i=0; i < myTags.length; i++) { myTags [i].style.backgroundColor = color; // UPDATE ANYTHING ELSE YOU WANT } }

可能是你需要更新你每次輸入一個新頁面，因爲它會生成具有該類的新標籤，因此請在ionViewWillEnter上放置一個代碼，以便每次進入或返回該頁面時都會更新顏色。

還沒有嘗試過，但它值得一試。如果你嘗試這個，讓我知道它是否工作。

希望這有助於：d

來源

2017-07-15 01:04:35

嗨，我擺弄你的方法相當數量，它的作品！我遇到了一個奇怪的錯誤（或功能），我最初嘗試使用.css文件以及組件的styleUrls數組，Ionic無法加載資源。這正是這篇文章中描述的[鏈接]（https://github.com/angular/angular-cli/issues/1501），但是修復無效。然後我把它改成了.scss，它工作正常。感謝您的幫助！ –

另一個說明：我無法使用'myTags [i] .style'（打字稿錯誤出於某種原因）訪問樣式，而不得不使用'myTags [i] .setAttribute（「style」，「... 「）' –

如何以編程方式在Ionic的variables.scss中設置變量？

回答

相關問題