如何为 HTML 中的 SCSS 变量设置值？

Question

我已经完成了这个 link 但它没有回答我的问题。

我正在构建一个 Web 应用程序，管理员可以在其中设置自定义属性，例如 1）改变全局字体大小 2）改变面板背景颜色 3）改变按钮颜色 4）改变按钮尺寸等。我看过 PrimeNg designer API，我看到他们的 scss 文件中有大约 500 个变量的列表。我想做的是创建一个表单，以便用户可以在 UI 上设置值。场景 1--> 示例 -->

 <p-fieldset legend="Global Font Size">
                <input type="text" pInputText placeholder="Enter the global font size">
            </p-fieldset>

一旦用户在此处输入值，我希望 scss 文件中包含的以下变量的值根据用户在上面输入的值进行更新。

$fontSize:14px;

场景 2 --> 示例 -->

 <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) 如何接受 UI 上的值并按照场景 1 中的要求更新 scss 变量的值？

2) 如何接受 UI 上的值，将其传递给打字稿函数，然后按照方案 2 中的要求更新 scss 变量的值？

这是我所指的文档 --> https://www.primefaces.org/designer-ng/#/documentation

Answer 1

对于更改字体大小，您可以使用相对字体大小，当您要更改字体大小比例时，只需设置主字体大小即可。你可以看看怎么做here.

要更改颜色和其他值，您可以使用 CSS 中描述的值。

Answer 2

SCSS 被编译为 CSS 所以当浏览器是运行时你不能改变分配给 SCSS 变量的值。

但是，您可以使用 CSS 自定义属性，也称为 CSS 变量。 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Answer 3

我非常感谢那些花时间回答我问题的人，但不幸的是，这不是我想要的。最简单的答案是 --> 1. 在 styles.css 文件中创建 css 变量。示例：

:root {
    --body-color: yellow;
    --text-color: red;
    --font-size: 50px;
}

然后将这些变量分配给属性，例如-->

input {
    color: var(--text-color);

}

然后在你的 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>

在你的 TS 文件中 -->

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');
            } );
        }
    }
}

这里有一个很好的工作示例 --> https://jsfiddle.net/btg5679/9e22zasm/5/

如何为 HTML 中的 SCSS 变量设置值？

How to set value to SCSS variables from HTML?

html

primeng

scss-mixins

angular7