CODEWITHSUNDEEP
css
Nick
Nick

Reputation: 11

Inheritance CSS properties

We are using a framework that allow us to modify the color scheme use throughout the application. I cannot play a lot with the color and would like to reuse them in some classes. So let say that the framework define this class

.StyleFromFramework {
     color:#515151;
     background-color: #FFFFFF;
}

is located in a css file that I can't modify cause this file is handled by the framework (if I modified this file, all my modification will be lost when the new version of the framework is installed)

I would like to reuse the color of this classes in another class in a file containing all my updates. 

.NewStyle {
     color: **.StyleFromFramework:color**
     Font: Verdan 11 px;
}

Is there a way to do that ?

Upvotes: 1

Views: 77

Answers (4)

Dirk
Dirk

Reputation: 392

Using a CSS preprocessor like Sass, Less or Stylus allows the use of variables which then can be reused in your project.

Foundation for instance can be completely restyled with Sass.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

I would try the following.

.StyleFromFramework, .NewStyle {
    color:#515151;
}

.StyleFromFramework {
    background-color: #FFFFFF;
}

.NewStyle {
    background-color: none; /* or some other value... */    
}

The first rule shares the color, and the the other two rules specify properties that are specific to the two other classes.

Upvotes: 1

Ziv Levy
Ziv Levy

Reputation: 2044

perhaps I didn't understand you correctly, but CSS is not dynamic language in which you can reuse rules and components.

I would recommend to use SASS/SCSS framework or something similar (LESS, Stylus... etc.) In those frameworks, This is one of the most useful features, lets you share a set of CSS properties from one selector to another read more here: http://sass-lang.com

Upvotes: 0

msp
msp

Reputation: 3364

You should take a look at less.css which does exactly what you're looking for.

Upvotes: 0

Related Questions