Более короткое объявление для входов в Sass

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; 
} 

Fiddle: https://jsfiddle.net/nikhilvkd/s12643k1/

[Обновлено]

ИЛИ

Вы можете сделать с дерзость, как показано ниже кодов

@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

Вы можете использовать Примеси для этого я думаю:

@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);