css 使用LESS使用mixin为文本，背景，边框和链接生成类选择器。

Posted 2021-05-13

@color-primary: #f50;
@color-secondary: #ccf;

@pumpkin: #fa7500;

#theme-color-mixin(@color, @class) {
  .@{class}{color: @color}
  .@{class}i{color: @color !important}
  .@{class}-bg{background-color:@color}
  .@{class}-bgi{background-color:@color !important}
  .@{class}-border{border-color:@color}
  .@{class}-borderi{border-color:@color !important}
  .@{class}-a a{color: @color}
  .@{class}-ai a{color: @color !important}
}

#theme-color-mixin(@pumpkin,theme-pumpkin);
#theme-color-mixin(@color-primary,color-primary);
#theme-color-mixin(@color-secondary,color-secondary);

.theme-pumpkin {
  color: #fa7500;
}
.theme-pumpkini {
  color: #fa7500 !important;
}
.theme-pumpkin-bg {
  background-color: #fa7500;
}
.theme-pumpkin-bgi {
  background-color: #fa7500 !important;
}
.theme-pumpkin-border {
  border-color: #fa7500;
}
.theme-pumpkin-borderi {
  border-color: #fa7500 !important;
}
.theme-pumpkin-a a {
  color: #fa7500;
}
.theme-pumpkin-ai a {
  color: #fa7500 !important;
}
.color-primary {
  color: #ff5500;
}
.color-primaryi {
  color: #ff5500 !important;
}
.color-primary-bg {
  background-color: #ff5500;
}
.color-primary-bgi {
  background-color: #ff5500 !important;
}
.color-primary-border {
  border-color: #ff5500;
}
.color-primary-borderi {
  border-color: #ff5500 !important;
}
.color-primary-a a {
  color: #ff5500;
}
.color-primary-ai a {
  color: #ff5500 !important;
}
.color-secondary {
  color: #ccccff;
}
.color-secondaryi {
  color: #ccccff !important;
}
.color-secondary-bg {
  background-color: #ccccff;
}
.color-secondary-bgi {
  background-color: #ccccff !important;
}
.color-secondary-border {
  border-color: #ccccff;
}
.color-secondary-borderi {
  border-color: #ccccff !important;
}
.color-secondary-a a {
  color: #ccccff;
}
.color-secondary-ai a {
  color: #ccccff !important;
}