How to set value to SCSS variables from HTML? - html

Question

I have gone through this link and it doesn't answer my questions.
Passing values from HTML to SCSS
I am building a web application wherein an admin can go and set custom properties such as
1) changing global font size
2) changing the panel background colors
3) changing button color
4) changing button dimensions etc.
I have looked at PrimeNg designer API and I see that they have a list of about 500 variables in their scss file.
What I would like to do is create a form so that user can set the values on the UI.
Scenario 1-->
Example -->
<p-fieldset legend="Global Font Size">
<input type="text" pInputText placeholder="Enter the global font size">
</p-fieldset>
once the user enters a value here, I want the value of the following variable that's contained inside of scss file to be updated with what the user entered above.
$fontSize:14px;
Scenario 2 -->
Example -->
<p-fieldset legend="Global Font Size">
<input type="text" pInputText placeholder="Enter the global font size">
<button (onClick)="saveGlobalFontSize(fontSize)"> OK </button>
</p-fieldset>
1) How can I accept a value on the UI and update the value of scss variable as asked in scenario 1?
2) How can I accept a value on the UI, pass it to a typescript function and then update the value of scss variable as asked in scenario 2?
Here is the documentation that I am referring -->
https://www.primefaces.org/designer-ng/#/documentation

Answer 1

I really appreciate the folks who took time to answer my question but unfortunately that wasn't what I was looking for.
The simplest answer is -->
1. Create css variables in your styles.css file.
Example :
:root {
--body-color: yellow;
--text-color: red;
--font-size: 50px;
}
Then assign those variables to the properties such as -->
input {
color: var(--text-color);
}
Then in your HTML -->
<div class="ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<div class="ui-g-3">
<p-fieldset legend="Global Font Size">
<input type="text" placeholder="Enter the global font size">
<button pButton label="Save"></button>
</p-fieldset>
</div>
</div>
</div>
</div>
In your TS file -->
import { Component, Input, OnInit } from '#angular/core';
import { TableBody } from 'primeng/table';
#Component({
templateUrl: './miscdemo.component.html'
})
export class MiscDemoComponent implements OnInit {
input = document.querySelector('input');
body = document.querySelector('body');
fontSize = document.querySelector('input');
button = document.querySelector('button');
constructor() {
}
ngOnInit() {
if (this.input) {
this.input.addEventListener('change', () => {
this.body.style.setProperty('--body-color', this.input.value);
this.fontSize.style.setProperty('--body-color', this.input.value);
} );
}
this.input = document.querySelector('input');
this.button = document.querySelector('button');
if (this.input) {
this.button.addEventListener('click', () => {
this.body.style.setProperty('--body-color', this.input.value);
this.body.style.setProperty('--font-size', this.input.value + 'px');
} );
}
}
}
A great working example is here -->
https://jsfiddle.net/btg5679/9e22zasm/5/

Answer 2

For changing font size, you can use relative font sizes and just set the main font size when you want to change the font size scale. You can see how to do it here.
For changing colors and other values, you can use CSS values as described here.

Answer 3

SCSS is compiled down to CSS so by the time the browser is running it you cannot change the values assigned to SCSS variables.
However using CSS custom properties, also called CSS variables you can. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties