Question

我已经浏览了此链接，但没有回答我的问题。 Passing values from HTML to SCSS

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

print(i["Driver"]["familyName"])

一旦用户在此处输入一个值，我就希望使用上面用户输入的内容更新包含在scss文件中的以下变量的值。

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

方案2-> 示例->

$fontSize:14px;

1）我如何按照方案1的要求在UI上接受一个值并更新scss变量的值？

2）我如何才能在UI上接受值，将其传递给Typescript函数，然后按照方案2的要求更新scss变量的值？

这是我要参考的文档-> https://www.primefaces.org/designer-ng/#/documentation

Answer 1

要更改字体大小，可以使用相对字体大小，并在要更改字体大小比例时仅设置主字体大小。您可以查看操作方法here。

要更改颜色和其他值，可以使用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变量的值？

3 个答案: