SASS - extend
style.scss . messageDesign { padding : 10 px ; width : 150 px ; text-align : center ; color : #444 ; } . error { border : 1 px solid red ; @extend . messageDesign ; } . warning { border : 1 px solid yellow ; @extend . messageDesign ; } . success { border : 1 px solid green ; @extend . messageDesign ; } or make a placeholder( % ) messageDesign WE USE PLACEHOLDER IF YOU DO NOT NEED TO HAVE ARGUMENT LIKE; messageDesign(param1,param2) % m essageDesign { padding : 10 px ; width : 150 px ; text-align : center ; color : #444 ; } . error { border : 1 px solid red ; @extend % messageDesign ; } . warning { border : 1 px solid yellow ; @extend % messageDesign ; } . success { border : 1 px solid green ; @extend % messageDesign ; }