Question

大家好（第一个帖子要放纵^^），

我在项目中使用了materializecss。我已经像这样覆盖了$ primary-color

@import "~materialize-css/sass/components/color";

$primary-color: color("green", "accent-4") !default;
$secondary-color: $primary-color;

@import "~materialize-css/sass/materialize";

现在，根据主体类别，我需要将$ primary-color覆盖为我先前定义的颜色。

// Patho palette
$patho-pink:        color('pink', 'darken-1'); //#d81b60
$patho-amber:       color('amber', 'accent-4'); //#ffab00
$patho-lime:        color('lime', 'darken-1'); //#c0ca33
$patho-green:       color('green', 'darken-1');// #43a047
$patho-teal:        color('teal', 'accent-4'); //#00897b
$patho-light-blue:  color('light-blue', 'darken-3'); //#0277bd
$patho-deep-purple: color('deep-purple', 'lighten-1'); //#7e57c2
$patho-purple:      color('purple', 'lighten-2'); //#ba68c8
$patho-red:         color('red', 'accent-2'); //#ff5252

知道我有9个可以添加到正文中的类。

<body class="patho-pink">...</body>
<body class="patho-amber">...</body>
<body class="patho-lime">...</body>
<body class="patho-green">...</body>
<body class="patho-teal">...</body>
<body class="patho-light-blue">...</body>
<body class="patho-deep-purple">...</body>
<body class="patho-purple">...</body>
<body class="patho-red">...</body>

我见过一些creating mixin and map key，但是覆盖对我不起作用。我可能做错了，我不知道。雅各布（2nd answer）使用映射：

$theme-map:(
  '.australia': (color: blue, font-family: Roboto),
  '.denmark'  : (color: red,  font-family: Arial)    
);

我需要那种解决方案，但是对于变量，因为在这里我需要映射$ primary-color而不是css属性（此处为color，font-family）。

想法是创建一个预定义的CSS，如：

.patho-red{
   $primary-color: $patho-red;
}
.patho-pink{
   $primary-color: $patho-pink;
}
...

并为我的所有9个类输出正确的css，以便通过将类添加到主体中来进行主要覆盖（并且使用$ primary-color的所有实例化变量都应受到此覆盖的影响）。

感谢您的帮助。

根据主体类别具体化基色替代

0 个答案: