代码之家  ›  专栏  ›  技术社区  ›  Melchia

使用多值颜色SCSS

  •  1
  • Melchia  · 技术社区  · 7 年前

    我要导入这个 scss file (colors.scss) 其中包含

    $白色:FFF;

    黑色:000;

    $Mat红色:(50:35; ffbee,100:35; ffcddd2,200: ef9a,300:35; e57373,400:35; ef5350,500: f444336,600:35; e53935,700:35; d322f,800: c2828,900: B711C,A100:\35; ff8a80,A200:\ ff5252,300:3535; ff5252,A452,A4400:\35; 35; ff52,300:,A700:d50000,对比度:(50:$black-87-不透明度,100:$black-87-不透明度,200:$black-87-不透明度,300:$black-87-不透明度,400:$black-87-不透明度,500:白色,600:白色,700:白色,800:$white-87-不透明度,900:$white-87-不透明度,A100:$black-87-不透明度,A200:白色,A400:白色,A700:白色,);

    当我导入时 colors.scss &我使用(amp;I) $white $black 它工作得很好。但是当我尝试使用 $mat-red 就像这个例子中一样

    app-root {
        display: flex;
        justify-content: center;
        align-items: center;
        color: $mat-red;
      }  
    

    我得到这个错误

    模块生成失败: $Mat红色:(50:35; ffbee,100:35; ffcddd2,200: ef9a,300:35; e57373,400:35; ef5350,500: f444336,600:35; e53935,700:35; d322f,800: c2828,900: B711C,A100:\35; ff8a80,A200:\ ff5252,300:3535; ff5252,A452,A4400:\35; 35; ff52,300:,A700:d50000,对比度:(50:$black-87-不透明度,100:$black-87-不透明度,200:$black-87-不透明度,300:$black-87-不透明度,400:$black-87-不透明度,500:白色,600:白色,700:白色,800:$white-87-不透明度,900:$white-87-不透明度,A100:$black-87-不透明度,A200:白色,A400:白色,A700:白色,); ^ (50: #ffebee, 100: #ffcdd2, 200: #ef9a9a, 300: #e57373, 400: #ef5350, 500: #f44336, 600: #e53935, 700: #d32f2f, 800: #c62828, 900: #b71c1c, A100: #ff8a80, A200: #ff5252, A400: #ff1744, A700: #d50000, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0,0,0,0.87),400:rgba(0,0,0,0.87),500:white,600:white,700:white,800:rgba(255,255,255,0.87),900:rgba(255,255,255,0.87),A100:rgba(0,0,0,0.87),A200:white,A400:white,A700:white))不是有效的css值。

    1 回复  |  直到 7 年前
        1
  •  1
  •   llobet    7 年前

    你申报了一张彩色地图。您需要通过以下方式检索所需的颜色:

    .color{
      color: map-get($mat-red, 50); // 50 as an example of key in $mat-red
    }