CODEWITHSUNDEEP
cssinheritance
SISYN
SISYN

Reputation: 2269

Is it possible to use previous class declaration in new definition in CSS?

I've tried to find the answer, and can't seem to do so, which is leading me to believe that it isn't possible. With my minimal knowledge of how CSS works, I also don't think it would be possible, but I just want to ask before I start working around a problem that may or may not exist.

Basically what I'm trying to do is use a previously defined attribute in a new class in my CSS stylesheet. For instance, say I had a couple of classes that just held background or font colors, like this:

.black { background-color: #000000; color: #000000; }
.white { background-color: #FFFFFF; color: #FFFFFF; }

Now if I was defining a new class (or using any selector for that matter), would it be possible to use the value of an attribute from an already existing class? Here is what my idea would look like:

.newClass {
    width: 100%;
    height: 100%;
    background-color: .black; /* this would just get the background-color attribute from the .black class definition */
}

background-color: .black; is basically just a placeholder for "get the background-color attribute from the .black class definition". Is that possible using purely CSS? I'm aware of a ton of alternatives with PHP/JS, but I'd like to know if CSS can tackle this by itself. Thanks guys.

Upvotes: 2

Views: 577

Answers (3)

Prashobh
Prashobh

Reputation: 9544

Yea possible using SASS or LESS css

@bgcolor : black;


.newClass {
    width: 100%;
    height: 100%;
    background-color:@bgcolor;
}

Upvotes: 1

Pankaj Phartiyal
Pankaj Phartiyal

Reputation: 1691

SASS is a thing to go. Your code will be like

@mixin black-theme {
.black { background-color: #000000; color: #000000; }
}

.newClass {
    width: 100%;
    height: 100%;
    @include black-theme;
}

SASS

PHP compiler for SASS PHPSASS

There are javascript based solutions too like LESS but I generally don't recommend them as if Javascript load slow then presentation becomes jerky.

Upvotes: 3

jfriend00
jfriend00

Reputation: 708126

No, this is not currently possible in CSS. CSS does not have variables or the ability to reference values from previous rules. You would have to look for a CSS preprocessing language that gets processed into plain CSS before going onto the web site.

If you're willing to go the preprocessed way, you can look at SASS or LESS.

Upvotes: 2

Related Questions