如何从 HTML 为 SCSS 变量设置值？答案

【问题标题】：How to set value to SCSS variables from HTML?如何从 HTML 为 SCSS 变量设置值？
【发布时间】：2019-10-29 08:41:49
【问题描述】：

我浏览了这个链接，但它没有回答我的问题。 Passing values from HTML to SCSS

我正在构建一个 Web 应用程序，管理员可以在其中设置自定义属性，例如 1) 改变全局字体大小 2) 更改面板背景颜色 3) 改变按钮颜色 4）改变按钮尺寸等。我查看了 PrimeNg 设计器 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 上接受一个值，将其传递给 typescript 函数，然后按照场景 2 的要求更新 scss 变量的值？

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

【问题讨论】：

我认为这是不可能的，因为您应该以 sass 格式编写您的样式，然后使用 ruby 或 gulp 将其编译为 css .... 您编译的是 sass 文件而不是原始 sass 文件。也许用更少的东西是可能的。我不确定...
Alex 是正确的——您的 sass 已编译，因此您无法动态更改变量值。但是，如果您可以将 sass 变量指向 CSS variable，您可能会取得一些成功。

标签： html angular7 primeng scss-mixins

【解决方案1】：

我非常感谢那些花时间回答我的问题的人，但不幸的是，这不是我想要的。最简单的答案是 --> 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/

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

SCSS 被编译成 CSS，因此在浏览器运行时，您无法更改分配给 SCSS 变量的值。

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

【讨论】：