Присвойте значение цвета переменным CSS

Question

В моем 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;, но как я могу сделать его назначенным на основе моих данных, я немного растерялся.

Answer 1

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

К сожалению, переменные Scss не существуют во время выполнения, они существуют только во время компиляции, и затем компилятор, написанный на python, заменяет их значением в таблице стилей css. Если вы не поддерживаете Internet Explorer, вы можете использовать css variables для решения этой проблемы, которую можно динамически изменить во время выполнения.

Если я неправильно понял вопрос, дайте мне знать, и я добавлю правку.

EDIT: https://jsfiddle.net/njsrLywt/ Вот демонстрация, показывающая изменение переменных CSS во время выполнения.

РЕДАКТИРОВАТЬ2: Вы также больше не сможете использовать светлее / темнее, однако вы можете использовать реализацию javascript светлее / темнее, которая существует во время выполнения. Кроме того, отметим, что вам следует избегать использования светлых / темных в пользу шкалы цветов, которая позволяет лучше масштабировать цвета, поскольку она масштабирует оставшиеся% от 100

.

РЕДАКТИРОВАТЬ3: Здесь приведена краткая реализация масштабного цвета, реализованная с использованием полностью неизменяемого стиля FP в javascript, использующего его следующим образом

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

https://typescript -play.js.org / # код / ​​MYGwhgzhAEDCD2J4CcCqAXAliGBvAUAJATphbDQTBggCmCSy0AvNABTCIoAStAHgC5K6ZJgB2AcwA00AA61kwWmPRCxAVwC2AIwUBKFgD5oBQoQD0AKmiZ0AchgALMMgAm0dPGgSvAM2TwmtCO-NAAtMaOECDQYMDA6shktCAAnpRemN5 + AUEhfOHGyBLahdBitADu0NwAygAyZfnQluZEhJxiJNAASgDiAEIswfwAKvA9JRxcyLx8egDc7Zi + 7P1DzJvl6iAgBsi06Ili0JyMc0tmnd0A2o4yEDIgALrDxdoATFEgbDfrAHTIGQA6S9Qb-bTPRbLVZseSKZToaDGAAMBlMV3gXSRFUq9UwEkc6AqUGGMQA1OwAIwolHhaB7FrseFKFTQczQGloy5mA5HZAnb7jOZse6UGS4-GE4m0KDQswAXxhzIUrKRAB5oGiTO0OljupKCUSSTBWBSGUy4arEezObT5bzDsdgtFhfxRQ8JVUpcbZRAHUrHfyTmcePxLgqlkr8OYOc0ItB3k1ok1 + Phrkj8uNJqVWKL + EISKJJAZmMZTBnKI4UOhnGJXD1aBJQqxzAA9ADEAH5fmAwr4ADquKG9-tDkc3PuD4d6AAk5kwSyIldxc2G + UBtFk4CUbAg1eQtbA9cbzb4MjYmkLInEoOQ1 + LoIkD9vMm0L5LRh1QedTEpf + 8aBKQkIDoFKSltAjaFl31JEDggHYkVbTse0nMdh1wD4FT0Udp2eTDsNw8cCLnBd-n4WhgDYVd + HlPlf1lRD2i7b9eSEWQXAgWgAEkVDYeDEJuKlnhkKkADY9CkXVnzkTieL4gSQHQG4PhEzkJKksxCHfWTkC43j0H4xilJuABmNTxL0dpA0INQdhAKMl0rd4vhTPN3gAQWQe9oBuDQdAUCUtF0IFtgC5AoS-CtYMTKk3hKLzkBuFFXg5D4AFZ0suSsJDi1hPO8oTU ugDKspg7EwLyxMEsK1TbVKpc9QqzQwD4BgUGGABZMhHH + Fq + H4qkZFyt8qXlStNHEdqmFYbraz68RBuGobKugprukaPN + um0DJrEaaDDSxrK2oEAEnAdBaG4YY2FLctlUvVqds2Vg9oOxMnQFLUeRWdhkDyrZtpmfZPpONhcvpbQxttR62pmek3uBn7YQhl7oCBxgQeDEr-jpSk2Ch + L-sO9gMY6sJ0ampH2nor6ABZcdAwb6VyknYZ2inEcxiNjpi07zuSWobru1jfvZ + G0a5lAsedFFkfYRpNRRf50vRXVabBsmmE5qnMZhrXdt16WeRsjXSae + Gdf24GYY + RnOYtxgEaN5B5UjfByu6XxxBoa7WH5nZkm4W6mTEuXPaRb2xBoIX-ZoAXLtqEPrC5bKYqjmhNugRoU9pRqxYzkBrqVtWfy + m5C + uylTLDmRC9qOufZAepngjIgzYrpvuEb6OQAb6BC5bxyPcrIV4DXPNHDs8KHmnkKnjn-Qoojmp11tGvw-WpFY8oW1U5XrOYg5feiDF00tm1DEzYAAw7WdcE8EV6j0BV78f91n9fh-x4-л-r7ble3B1C0A + EmPMshF6hQAI6QJkKoMKIURYYkrEpAAWgoLwrANRamgCxJElI4pCHQDyHK6AADyFQyToHQQEZEnJcEMmoRg + khDGE0PgPLcG5DKGajihyCSH1sayCZlA + ksgDDWDEkyCQ3DaCcJkRQ2g0BeH1Rll9KB8jZHKJKuvNRJxhH41ERTcRloPjrxZrIiR0AxI8jNrIHmHst7lCqAARWGIrLUKsGE52pKBWoBghCNEpELCmPjahpwqriAACsMMx1hGgU1xC4iJ3QZo1GAaAqY0SvSVBcTIKu9COSmXGjFECrAgEgPeNRKoUScl5JqCUiquZ0mVKyTUup + SWG6MuDfO + 38RSuy-у-AaEgX5vx- gNbQf9h7phisMm6ggEFLzLN + UeLZoBzV6gEdQ9Y2AFGsKVPQ-xPC1Bv JINglkemgxGHwf4dBJC1hYFsOKLEABEKJXmgWaEIfIw8rDQAAKIADkAAi0BuKdSifUAFnVgWjA8qMbiZCgUtDaB7IAA