角度变化scss对象变量

loading...


1

嘿,我有以下问题:

在我的离子/角度应用程序中,我有一个主(主题)scss,我已经定义了应用程序的主要颜色这样的事情:

$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%;
    }

在我的用例中,我的用户可以在我的网络服务器上定义他们的app颜色设计 . 如果他们登录,则应加载他们的自定义设计 . 它们应该只能编辑颜色,并且应该在应用程序中以某种方式覆盖这些颜色,因此从主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标签 . 如果我可以拦截这种反射并给出我自己的 Value 会很好 . 否则我需要创建一个新规则(就像我现在做的那样):

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

这有效,但它不是一个非常好的方式 - 我也有问题,我必须为我使用的每个离子元素创建这些规则,因为有许多不同的类:

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

一个想法是我添加一个可以工作的自定义颜色类 . 但我认为拦截是最好和最干净的方式 .

loading...

0回答

No Data

评论

暂时没有评论!