繁体   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