CODEWITHSUNDEEP
css
Hristian Yordanov
Hristian Yordanov

Reputation: 668

How to Inherit properties in css?

How to Inherit properties in css? I have a class:

.drop-shadow-red {
    font-size: 1.5vh;
    padding: 0.4vh 0.7vh;
    background: url(../images/redInvert.png) no-repeat center left;
    background-position: 8px 50%;
    background-size: 2vh;
    background-color: rgba(250, 210, 50, 0.9);
    font-weight: bold;
    -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
    -moz-border-radius: 12px 12px 0 0;
    border-radius: 0.1vh 0;
    height: auto;
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
    z-index: 99;
    animation: blinkBorder .6s step-end infinite alternate;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

And I want now to create another class .drop-shadow-yellow that has all properties like .drop-shadow-red but the only change is that background-color is yellow. How to optimize the code to not duplicate so much code, like:

.drop-shadow-yellow {
    font-size: 1.5vh;
    padding: 0.4vh 0.7vh;
    background: url(../images/redInvert.png) no-repeat center left;
    background-position: 8px 50%;
    background-size: 2vh;
    background-color: yellow; /* <-------------------------------------- */
    font-weight: bold;
    -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
    -moz-border-radius: 12px 12px 0 0;
    border-radius: 0.1vh 0;
    height: auto;
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
    z-index: 99;
    animation: blinkBorder .6s step-end infinite alternate;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

Upvotes: 1

Views: 115

Answers (2)

jdickel
jdickel

Reputation: 1457

Just create a class with all properties but background-color and name it for example drop-shadow.

Now you just create additional classes like red-bg and add background-color: red and pass the drop-shadow class as well as the background class to an object.

Example:

CSS:

.drop-shadow {
    font-size: 1.5vh;
    padding: 0.4vh 0.7vh;
    background: url(../images/redInvert.png) no-repeat center left;
    background-position: 8px 50%;
    background-size: 2vh;
    font-weight: bold;
    -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
    -moz-border-radius: 12px 12px 0 0;
    border-radius: 0.1vh 0;
    height: auto;
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
    z-index: 99;
    animation: blinkBorder .6s step-end infinite alternate;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}
.red-bg{
    background-color: rgba(250, 210, 50, 0.9);
}

HTML: 

<div class="drop-shadow red-bg">Foo Bar!</div>

Upvotes: 3

Gagan Deep
Gagan Deep

Reputation: 1509

If you want to change only one property do it inline style and take everything else from the css.

Upvotes: 0

Related Questions