Question

我已将body类设置为目标页面的句柄，并通过样式表应用正确的颜色。正文类是例如<body class="theme-red">，我目前在我的scss文件中设置了以下类：

.theme-border-colors {
    .theme-tourquoise & {
        border-color:$turquoise;
    }
    .theme-red & {
        border-color:$red;
    }
    .theme-yellow & {
        border-color:$yellow;
    }
    .theme-green & {
        border-color:$green;
    }
    .theme-blue & {
        border-color:$blue;
    }
    .theme-brown & {
        border-color:$brown;
    }
    .theme-pink & {
        border-color:$pink;
    }
}
.theme-background-colors {
    .theme-tourquoise & {
        background-color:$turquoise;
    }
    .theme-red & {
        background-color:$red;
    }
    .theme-yellow & {
        background-color:$yellow;
    }
    .theme-green & {
        background-color:$green;
    }
    .theme-blue & {
        background-color:$blue;
    }
    .theme-brown & {
        background-color:$brown;
    }
    .theme-pink & {
        background-color:$pink;
    }
}
.theme-font-colors {
    .theme-tourquoise & {
        color:$turquoise;
    }
    .theme-red & {
        color:$red;
    }
    .theme-yellow & {
        color:$yellow;
    }
    .theme-green & {
        color:$green;
    }
    .theme-blue & {
        color:$blue;
    }
    .theme-brown & {
        color:$brown;
    }
    .theme-pink & {
        color:$pink;
    }
}

可以在我的scss文件中使用mixin以便在需要时包含所有这3个。我目前@extend .theme-font-colors等。

Answer 1

您可以创建名称和颜色列表。查看此代码：

$border-colors: black #333333, red #ff0000, white #ffffff; 
$background-colors: black #333333, red #ff0000, white #ffffff; 

@mixin list-parser($var){
  @each $item in $var {
    .theme-#{nth($item, 1)} & {
        border-color: nth($item, 2);
    }
  }
}

.theme-border-colors {
  @include list-parser($border-colors);
}

.theme-background-colors {
  @include list-parser($background-colors);
}

为主题颜色创建mixin

1 个答案: