CSS class inheritance

Question

Can I create "class inheritance" in CSS? Something like:

.squareButton {width:20px; height:20px; margin:1px solid;} .squareRedButton {.squareButton; background:red;} 

Answer 1

Yes you can, just apply the desired CSS to both the class you need :

.squareButton, .squareRedButton { width : 20px; height : 20px; margin : 1px solid; } .squareRedButton { background : red; } 

Note

You can pass through HTML to use several classes to perform an inheritance like following :

CSS

.squareButton { width : 20px; height : 20px; margin : 1px solid; } .squareRedButton { background:red; } 

HTML

<button class="squareButton squareRedButton">MyButton</button> 

Answer 2

.squareButton{ width : 20px; height : 20px; margin : 1px solid; } .bg-red { background : red; } <div class="squareButton bg-red"> 

This is the short code way of doing.