CSS Inheritance Generator

Question

Can CSS have inheritance like OOP?

For example I have this style

.myButton {
background-color:#ffec64;
border:1px solid #ffaa22;
}

Can I define parent for color attributes? Something like

myYellow: #ffec64

So that in every styles I will just use

.myButton {
background-color:myYellow;
border:1px solid #ffaa22;
}

So that changing yellow color will only be on myYellow attribute not for every background-color attributes.

Thanks in advance

Hmm so by default CSS doesn't have this kind of feature is it? — stuckedunderflow
– stuckedunderflow, Commented May 21, 2014 at 3:35

Tims · Accepted Answer · 2014-05-21 03:35:20Z

3

This is not possible when using CSS alone.

You can do this by using a css preprocessor like LESS or SASS. These allow for variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Once you have written your LESS or SASS you then need to compile it to standard css (in the case of LESS this can be done client-side).

answered May 21, 2014 at 3:35

Tims

2,00715 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nalaka526 · Accepted Answer · 2014-05-21 03:45:09Z

2

You may need to use CSS Pre Processors like LESS or SASS.

Example Using LESS variables

@myYellow: #ffec64;

.myButton {
    background-color: @myYellow;
    border: 1px solid #ffaa22;
}

or even you can use LESS mixin to inherit css class.

.myCommonButton {
    background-color: @myYellow;
    border: 1px solid #ffaa22;
}

.myButton {
    .myCommonButton;
    color: black;
}

edited May 21, 2014 at 3:45

answered May 21, 2014 at 3:39

Nalaka526

11.5k21 gold badges86 silver badges119 bronze badges

Collectives™ on Stack Overflow

CSS Inheritance Generator

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related