How to reuse css class content in another class without copying?

Question

Is it possible to use existing css class as content in another class ?

I mean something like:

Contained in some library:
.class1 { text-indent: 100 }

 I         


        

Answer 1

Another option is to use LESS to do this. It's a very good tool and do some improvements to your CSS development.

Take a look at theirs documentation, it's very nice. About the compilers, I use Koala and recommend it.

Answer 2

I am assuming you want whatever is in .class1 plus some extra properties in .class2

One way is to simply apply both classes to the element you want..

<span class="class1 class2" />

another is to name both classes when setting the properties

.class1, .class2 {text-indent: 100}

.class2{/*extra properties here*/}

Answer 3

CSS has no means to reference one rule-set from another.

Your options include:

Using multiple selectors for things with common rules

.menu,
.nav {
    font-weight: bold;
}

.nav {
    display: inline-block;
}

---

Using multiple classes on a single element

.menu {
     font-weight: bold;
}

.nav {
     display: inline-block;
}

<li class="menu nav">

---

Generating your CSS programatically

For example, with SASS

@mixin menu {
    font-weight: bold;
}

.nav {
    display: inline-block;
    @include menu;
}

Answer 4

You mentioned in one comment that you cannot use LESS, but I think perhaps you misunderstand how LESS (or another preprocessor) could help you. That is, you have not given any reason that I can see why you cannot use it (even in your update). As I understand your problem, you have the following parameters:

1. Cannot change html
2. Cannot change the css file that defines .class1.
3. You can change the css file that defines .class2.

If the above is correct, then here is how you use LESS (version 1.5+). You make your file defining .class2 a .less file. Then, to keep it clean, I believe you are going to have to do a two step process (it may be you can do step 2 without step 1).

Step One: Make the CSS into LESS

Create a file, let's say CSStoLESS.less and put this in it:

@import (less) /path/to/your/your-css-defining-class1.css;

This will import the css and make the processor consider it as LESS code. It is possible that the next step does that as well, I have not had opportunity to test it out.

Step Two: Use that file as reference in your LESS

By doing this in your .less file defining .class2:

@import (reference) /path/to/your/CSStoLESS.less;

.class2 { .class1; }

You are importing the previous css file that has been converted to less as reference only. This prevents you from getting duplicate selectors for .class1 or anything else contained in your original css file. Now you can use an inclusion of .class1 just like you show in your question to make the properties of .class1 become that of .class2.

It may be that this alone works:

@import (reference) /path/to/your/your-css-defining-class1.css;

.class2 { .class1; }

What I don't know is if the (reference) inclusion also defaults to making .css into LESS code like the (less) inclusion typecasting does in step one. I need to research this out more. If so, then it is a one-step, not a two-step process.

Answer 5

You can define 2 classes in this way

.class1, .class2 { text-indent: 100 }

And it will work for you

Moreover if you want to ad some more in class2 then you can define it

.class2 { /*whatever you want here*/ }

Answer 6

The best way would be to redeclare class1 just below your custom css ends and override it with the values that you are looking for. This way, the inherited values, that you cannot change + the values that you need to incorporate, both shall apply.