Question

输入和按钮有很多预定义的样式，它们首先被重置，例如边框和背景。如果边框和背景的风格稍后不同，是否有办法缩短声明？

.mybutton1,
[role="button"].mybutton1,
input[type="submit"].mybutton1,
input[type="rest"].mybutton1,
input[type="button"].mybutton1,
button.mybutton1 { {
font-size: 10px;    
background-color: red;
border: solid;

}

.mybutton2,
[role="button"].mybutton2,
input[type="submit"].mybutton2,
input[type="rest"].mybutton2,
input[type="button"].mybutton2,
button.mybutton2 { {
font-size: 10px;
background-color: blue; 
}

Answer 1

使用常用样式输入样式并与您的班级区分开来，请查看以下代码。

[role="button"],
input[type="submit"],
input[type="rest"],
input[type="button"],
button {
  font-size: 8px;
}

.mybutton1 {
  font-size: 10px;
}

.mybutton2 {
  font-size: 14px;
}

小提琴：https://jsfiddle.net/nikhilvkd/s12643k1/

<强> [更新]

OR

你可以像下面的代码一样使用sass

@mixin buttonStyle($class, $fontSize) {
  [role="button"].#{$class},
  input[type="submit"].#{$class},
  input[type="rest"].#{$class},
  input[type="button"].#{$class},
  button.#{$class} {
    font-size: $fontSize;
  }
}
@include buttonStyle(mybutton1, 20px);
@include buttonStyle(mybutton2, 40px);
@include buttonStyle(mybutton3, 60px);

小提琴演示：https://jsfiddle.net/nikhilvkd/s12643k1/1/

注意：第一种方法更适合较少的css代码

Answer 2

我猜你可以使用mixins：

@mixin generate_size($class_num, $size) {
   .mybutton{$class_num},
   [role="button"].mybutton{$class_num},
   input[type="submit"].mybutton{$class_num},
   input[type="rest"].mybutton{$class_num},
   input[type="button"].mybutton{$class_num},
   button.mybutton{$class_num}
      { font-size: $size; }
}
@include generate_size("1", 10px);
@include generate_size("2", 15px);

Sass中输入的声明更短

2 个答案: