2026-04-08 按钮样式格式化（less）

@prefix: btn;
@border-radius: 16px;
@transition: all .3s;

@colors: {
  default: #f2f2f2;
  primary: #0067ff;
  success: #00b42a;
  warning: #ff7d00;
  danger: #e4393c;
};

.generate-buttons() {
  each(@colors, .(@color, @name) {
    .@{prefix}-@{name} {
      border-radius: @border-radius !important;
      transition: @transition !important;
      cursor: pointer;
      
      & when (@name = default) {
        border: 1px solid @color !important;
        background-color: @color !important;
        color: #333 !important;
        &:hover {
          border-color: #ccc !important;
        }
      }
      
      & when not (@name = default) {
        border: 1px solid fade(@color, 15%) !important;
        background-color: fade(@color, 15%) !important;
        color: @color !important;
        &:hover {
          color: #fff !important;
          background-color: @color !important;
        }
      }
    }
  });
}

.generate-buttons();

这个less文件会生成以下样式：

.btn-default {
  border-radius: 16px !important;
  transition: all 0.3s !important;
  cursor: pointer;
  border: 1px solid #f2f2f2 !important;
  background-color: #f2f2f2 !important;
  color: #333 !important;
}
.btn-default:hover {
  border-color: #ccc !important;
}

.btn-primary {
  border-radius: 16px !important;
  transition: all 0.3s !important;
  cursor: pointer;
  border: 1px solid rgba(0, 103, 255, 0.15) !important;
  background-color: rgba(0, 103, 255, 0.15) !important;
  color: #0067ff !important;
}
.btn-primary:hover {
  color: #fff !important;
  background-color: #0067ff !important;
}

.btn-success {
  border-radius: 16px !important;
  transition: all 0.3s !important;
  cursor: pointer;
  border: 1px solid rgba(0, 180, 42, 0.15) !important;
  background-color: rgba(0, 180, 42, 0.15) !important;
  color: #00b42a !important;
}
.btn-success:hover {
  color: #fff !important;
  background-color: #00b42a !important;
}

.btn-warning {
  border-radius: 16px !important;
  transition: all 0.3s !important;
  cursor: pointer;
  border: 1px solid rgba(255, 125, 0, 0.15) !important;
  background-color: rgba(255, 125, 0, 0.15) !important;
  color: #ff7d00 !important;
}
.btn-warning:hover {
  color: #fff !important;
  background-color: #ff7d00 !important;
}

.btn-danger {
  border-radius: 16px !important;
  transition: all 0.3s !important;
  cursor: pointer;
  border: 1px solid rgba(228, 57, 60, 0.15) !important;
  background-color: rgba(228, 57, 60, 0.15) !important;
  color: #e4393c !important;
}
.btn-danger:hover {
  color: #fff !important;
  background-color: #e4393c !important;
}