Question

嘿，我有以下问题：

在我的离子/角度应用程序中，我有一个主（主题）scs，其中我已定义了该应用程序的主要颜色，如下所示：

$colors: (
  primary:    #92c7ff,
  secondary:  #32db64,
  danger:     #6c1d23,
  light:      #f4f4f4,
  dark:       #222,
  btnColor:   #32db64,

);

和我以两种方式使用的那些

1）直接在元素上

<button ion-button block type="submit" [disabled]="!loginForm.form.valid" color="btnColor">

或2）作为另一个scss定义的参考：

.background {       
        background: color($colors, light);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

在我的用例中，用户可以在Web服务器上定义其应用程序颜色设计。如果他们登录，则应加载其自定义设计。他们应该只能编辑颜色，并且应该在应用程序中以某种方式覆盖这些颜色，以便从主scss引用的所有颜色都不再使用，而是由我自己定义。我发现了这篇文章：https://nddt-webdevelopment.de/angularjs/angular-5-dynamic-css-component 可能添加自定义CSS的位置。我以这种方式启动它，但是在这里我需要创建很多CSS规则，并且没有完全的控制权。例如，与以前相同的按钮将在应用程序中呈现，如下所示：

<button block="" color="btnColor" ion-button="" type="submit" class="disable-hover button button-md button-default button-default-md button-block button-block-md button-md-btnColor" ng-reflect-color="btnColor" ng-reflect-block="">

在这里我可以找到一个ng-reflect-color标签。如果我可以拦截这种思考并给出自己的价值，那就太好了。否则，我需要创建一个新规则（就像我现在所做的那样）：

.button-md-btnColor { background-color: orange; }

这行得通，但这不是一个很好的方法-我还遇到了一个问题，我必须为我使用的每种离子元素创建这些规则，因为存在许多不同的类：

.item-md-btnColor { background-color: orange; }

一个主意是我添加一个可以工作的自定义颜色类。但是我认为拦截是最好，最干净的方法。

角度变化scss对象变量

0 个答案: