[英]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.