Как установить значение для переменных SCSS из HTML? - PullRequest
Новая
       22

Как установить значение для переменных SCSS из HTML?

1 голос
/ 14 июня 2019

Я прошел по этой ссылке, и она не отвечает на мои вопросы. Передача значений из HTML в SCSS

Я создаю веб-приложение, в котором администратор может пойти и установить пользовательские свойства, такие как 1) изменение глобального размера шрифта 2) изменение цвета фона панели 3) изменение цвета кнопки 4) изменение размеров кнопок и т. Д. Я посмотрел на PrimeNg Designer API и вижу, что в их файле scss есть список из 500 переменных. Что я хотел бы сделать, это создать форму, чтобы пользователь мог установить значения в пользовательском интерфейсе. Сценарий 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) Как я могу принять значение в пользовательском интерфейсе и обновить значение переменной scss, как указано в сценарии 1?

2) Как я могу принять значение в пользовательском интерфейсе, передать его в функцию машинописного текста, а затем обновить значение переменной scss, как указано в сценарии 2?

Вот документация, на которую я ссылаюсь -> https://www.primefaces.org/designer-ng/#/documentation

Ответы [ 3 ]

0 голосов
/ 14 июня 2019

SCSS компилируется в CSS, поэтому к моменту запуска браузера вы не сможете изменить значения, назначенные переменным SCSS.

Однако, используя пользовательские свойства CSS, также называемые переменными CSS, вы можете это сделать.https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

0 голосов
/ 17 июня 2019

Я действительно ценю людей, которые нашли время, чтобы ответить на мой вопрос, но, к сожалению, это было не то, что я искал.Самый простой ответ -> 1. Создайте переменные CSS в вашем файле styles.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/

0 голосов
/ 14 июня 2019

Для изменения размера шрифта вы можете использовать относительные размеры шрифта и просто установить основной размер шрифта, когда вы хотите изменить шкалу размера шрифта. Вы можете увидеть, как это сделать здесь .

Для изменения цветов и других значений вы можете использовать значения CSS, как описано здесь .

...