Shorter declaration for inputs in Sass [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Inputs and buttons have a lot of predefined styles, that had been reseted in the first place, for example borders and backrounds. If borders and backgrounds are styled later differenty, is there a way to make the declaration shorter?
.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

Use common style in to input styles and differentiate with your class, check below codes.
[role="button"],
input[type="submit"],
input[type="rest"],
input[type="button"],
button {
font-size: 8px;
}
.mybutton1 {
font-size: 10px;
}
.mybutton2 {
font-size: 14px;
}
Fiddle: https://jsfiddle.net/nikhilvkd/s12643k1/
[Updated]
OR
You can do with sass like below codes
#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);
Fiddle demo: https://jsfiddle.net/nikhilvkd/s12643k1/1/
Note: First method is more good for less css codes

Answer 2

You can use mixins for that I guess:
#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);