簡體   English   中英

將顏色值分配給 css 變量

[英]Assign color value to css variables

在我的 css 中,我有幾個顏色變量,例如:

$bkg-color: #ffffff

白色是我想要的默認顏色,但 $bkg-color 也可以根據用戶創建和保存的內容自定義為不同的顏色。 所以在我的打字稿中我有:

backgroundColor?: string = '';

我的 get 呼叫響應數據設置為 pageDetails 然后我檢查

if(pageDetails.backgroundColor) { 
this.backgroundColor = pageDetails.backgroundColor; 
}

我無法直接將背景顏色類綁定到 html,因為我的頁面內容是通過v-html='displayedHtml'

如何設置$bkg-color: this.backgroundColor (如果存在 || 設置默認顏色為白色)。

我正在使用 vue 和打字稿

我相信我可以像這樣設置默認值: $bkg-color: #ffffff !default; 但是如何根據我的數據進行分配是我有點迷失的地方。

How can i set $bkg-color: this.backgroundColor (if exists || set default color of white).

不幸的是,Scss 變量在運行時不存在,它們只在編譯時存在,然后 Python 編寫的編譯器將它們替換為它們在 css 樣式表中的值。 如果您不支持 Internet Explorer 您可以使用css variables來解決這個問題,它可以在運行時動態更改。

如果我誤解了這個問題,請告訴我,我會添加編輯。

編輯: https : //jsfiddle.net/njsrLywt/這是一個演示,顯示在運行時更改 css 變量。

EDIT2:您也將無法再使用變亮/變暗,但是您可以使用在運行時存在的變亮/變暗的 javascript 實現。 另外,在旁注中,您應該避免使用變亮/變暗,而使用 scale-color 可以實現更好的顏色縮放,因為它將剩余的 % 縮放為 100

EDIT3:這是使用 javascript 100% 完全不可變 FP 樣式實現的縮放顏色的快速實現,按以下方式使用它

ColorUtils.scaleColor("#294e80", -35);  //darken 35%
ColorUtils.scaleColor("#F6F6F6", 35); // lighten 35%

https://typescript-play.js.org/#code/MYGwhgzhAEDCD2J4CcCqAXAliGBvAUAJATphbDQTBggCmCSy0AvNABTCIoAStAHgC5K6ZJgB2AcwA00AA61kwWmPRCxAVwC2AIwUBKFgD5oBQoQD0AKmiZ0AchgALMMgAm0dPGgSvAM2TwmtCO-NAAtMaOECDQYMDA6shktCAAnpRemN5+AUEhfOHGyBLahdBitADu0NwAygAyZfnQluZEhJxiJNAASgDiAEIswfwAKvA9JRxcyLx8egDc7Zi+7P1DzJvl6iAgBsi06Ili0JyMc0tmnd0A2o4yEDIgALrDxdoATFEgbDfrAHTIGQA6S9Qb-bTPRbLVZseSKZToaDGAAMBlMV3gXSRFUq9UwEkc6AqUGGMQA1OwAIwolHhaB7FrseFKFTQczQGloy5mA5HZAnb7jOZse6UGS4-GE4m0KDQswAXxhzIUrKRAB5oGiTO0OljupKCUSSTBWBSGUy4arEezObT5bzDsdgtFhfxRQ8JVUpcbZRAHUrHfyTmcePxLgqlkr8OYOc0ItB3k1ok1+Phrkj8uNJqVWKL+EISKJJAZmMZTBnKI4UOhnGJXD1aBJQqxzAA9ADEAH5fmAwr4ADquKG9-tDkc3PuD4d6AAk5kwSyIldxc2G+UBtFk4CUbAg1eQtbA9cbzb4MjYmkLInEoOQ1+LoIkD9vMm0L5LRh1QedTEpf+8aBKQkIDoFKSltAjaFl31JEDggHYkVbTse0nMdh1wD4FT0Udp2eTDsNw8cCLnBd-n4WhgDYVd+HlPlf1lRD2i7b9eSEWQXAgWgAEkVDYeDEJuKlnhkKkADY9CkXVnzkTieL4gSQHQG4PhEzkJKksxCHfWTkC43j0H4xilJuABmNTxL0dpA0INQdhAKMl0rd4vhTPN3gAQWQe9oBuDQdAUCUtF0IFtgC5AoS-CtYMTKk3hKLzkBuFFXg5D4AFZ0suSsJDi1hPO8oTU ugDKspg7EwLyxMEsK1TbVKpc9QqzQwD4BgUGGABZMhHH + Fq中+ H4qkZFyt8qXlStNHEdqmFYbraz68RBuGobKugprukaPN + um0DJrEaaDDSxrK2oEAEnAdBaG4YY2FLctlUvVqds2Vg9oOxMnQFLUeRWdhkDyrZtpmfZPpONhcvpbQxttR62pmek3uBn7YQhl7oCBxgQeDEr-jpSk2Ch + 1- + sO9gMY6sJ0ampH2nor6ABZcdAwb6VyknYZ2inEcxiNjpi07zuSWobru1jfvZ + G0a5lAsedFFkfYRpNRRf50vRXVabBsmmE5qnMZhrXdt16WeRsjXSae + Gdf24GYY RnOYtxgEaN5B5UjfByu6XxxBoa7WH5nZkm4W6mTEuXPaRb2xBoIX-ZoAXLtqEPrC5bKYqjmhNugRoU9pRqxYzkBrqVtWfy + M5C + uylTLDmRC9qOufZAepngjIgzYrpvuEb6OQAb6BC5bxyPcrIV4DXPNHDs8KHmnkKnjn-Qoojmp11tGvw-WpFY8oW1U5XrOYg5feiDF00tm1DEzYAAw7WdcE8EV6j0BV78f91n9fh-X4-1- r7ble3B1C0A + EmPMshF6hQAI6QJkKoMKIURYYkrEpAAWgoLwrANRamgCxJElI4pCHQDyHK6AADyFQyToHQQEZEnJcEMmoRg + khDGE0PgPLcG5DKGajihyCSH1sayCZlA + ksgDDWDEkyCQ3DaCcJkRQ2g0BeH1Rll9KB8jZHKJKuvNRJxhH41ERTcRloPjrxZrIiR0AxI8jNrIHmHst7lCqAARWGIrLUKsGE52pKBWoBghCNEpELCmPjahpwqriAACsMMx1hGgU1xC4iJ3QZo1GAaAqY0SvSVBcTIKu9COSmXGjFECrAgEgPeNRKoUScl5JqCUiquZ0mVKyTUup + SWG6MuDfO + 38RSuy-U-AaEgX5vx- gNbQf9h7phisMm6ggEFLzLN+UeLZoBzV6gEdQ9Y2AFGsKVPQ-xPC1Bv JINGlkemgxGHwf4dBJC1hYFsOKLEABEKJXmgWaEIfIw8rDQAAKIADkAAi0BuKdSifUAFnVgWjA8qMbiZCgUtDaB7IAA

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM