1

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 ?

Improve this question
1
  • 1
    You can simply call 2 classes for the element. <span class="StyleFromFramework NewStyle">Text Here </span> Commented Apr 3, 2015 at 14:28

4 Answers 4

Reset to default
1

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.

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

7 Comments

I can't do that cause I don't want to do any modification on the css provided by the framework since all my modification will be lost each time a new version of the framewirk will be installed
Can you add an additional style sheet to the template?
Yes, I can. I have put all my css modification into a single file.
What I could do is create a separate style sheet with the CSS rules for the classes that you want to customize. Add the new style sheet to your template so that the style sheet comes in after all the pre-existing style sheets. Your new rules will over ride the previous definitions. At most, when you update your framework, you simply add the link to the new style sheet if you have to.
The ting with that is that the framework has some sort of theme that can be changed. We would like wo use that feature but that's why I would like to use the color define in some classes in my new classes that I have created
|
0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.