Как передать в свойство SASS переменную, название которой в переменной JS?
const props = defineProps({ backgroundColor: { type: String, default: '$light-paragraph-color' } }); |
const props = defineProps({ backgroundColor: { type: String, default: '$light-paragraph-color' } });
Представлен код на TS, где получаем props из родительского компонента (Vue.js). По умолчанию в переменную backgroundColor записывается значение $light-paragraph-color'.
.wrapper height: 100% width: 100% background-color: var(--backgroundColor) |
.wrapper height: 100% width: 100% background-color: var(--backgroundColor)
В этом участке кода пытаюсь преобразовать значение переменной backgroundColor из строки в sass переменную, однако цвет фона не изменяется.
Подскажите, как решить?
Дополнительно:
Ответы:
Js работает в браузере, там нет никакого sass. Он компилируется и идет в браузер в виде css.
Вам нужно определить css переменную в атрибуте style (через v-bind). Записать туда значение из js. Дальше в стилях использовать css переменную.
https://xhtml.ru/2021/javascript/sharing-data-betw...
Строго говоря ответ уже дали - из коробки так не получится. Но если очень хочется, то технически возможностей реализаций уйма, sass-to-js например
Я наоборот из sass переменную подтягивал
_sass-theme.scss
$tab: 56rem; $desk: 84.5rem; // Переменные для экспорта :export { tab: $tab; desk: $desk; } |
$tab: 56rem; $desk: 84.5rem; // Переменные для экспорта :export { tab: $tab; desk: $desk; }
breakpoints.js
import variables from '@ui/_sass-theme.scss' export const mediaQueryBreakpoints = { tab: parseFloat(variables.tab), desk: parseFloat(variables.desk), } |
import variables from '@ui/_sass-theme.scss' export const mediaQueryBreakpoints = { tab: parseFloat(variables.tab), desk: parseFloat(variables.desk), }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для передачи переменной из JavaScript в SASS можно воспользоваться функцией `setProperty()` из JavaScript, которая позволяет установить свойство CSS элемента. Для этого сначала нужно создать элемент `` с id, к которому мы будем обращаться из JavaScript. Затем в JavaScript можно получить этот элемент по id и установить значение переменной SASS через `setProperty()`.
Пример:
```html
```
```javascript
function changeColor(color) {
const styleElement = document.getElementById('dynamicStyles');
styleElement.innerHTML = `
:root {
--main-color: ${color};
}
`;
}
```
```css
/* styles.scss */
:root {
--main-color: black;
}
body {
background-color: var(--main-color);
}
```
В данном примере при нажатии на кнопку "Change Color to Blue" или "Change Color to Red" будет меняться цвет фона страницы на соответствующий цвет, переданный через переменную из JavaScript в SASS. Таким образом, можно динамически изменять стили страницы, основываясь на значениях переменных, передаваемых из JavaScript.