css - Shorter declaration for inputs in Sass -
inputs , buttons have lot of predefined styles, had been reseted in first place, example borders , backrounds. if borders , backgrounds styled later differenty, there way make 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; }
use common style in input styles , differentiate 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 sass 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 more less css codes
Comments
Post a Comment