Can a CSS class contain two other classes

Question

I just had the idea of organizing my work as follows:

Create very basic CSS classes, for example this :

.backgroundRed {
    background-color:red;
}


.backgroundGreen {
    background-color:green;
}


.fixed300 {
    width:300px;
}

.percent100 {
    width: 100%;
}

.centered {
    margin: auto;
}

.centeredTextHorizontally {
    text-align:center;
}

.colorWhite {
    color:white;
}

and then use 2-3-4 of them simultaneously, to create what I want, for example:

<div class = "backgroundGreen fixed300 centered">
<div class="centeredTextHorizontally">300px wide green stripe with centered text</div>
<div class="centeredTextHorizontally colorWhite">Centered white text</div>
</div>
</div>

Im sure you get the idea.

Now this has the problem that if in the future we want to change the web site, we need to edit the HTML of all those DIVs, which breaks the very pupropse of using CSS in the first place.

So I would like to be able to define CSS classes as follows

.navbar {
.colorRed;
.backgroundColorGreen;
}

etc etc. So that if the website colors need to be changed, for example, I only change the .navbar and not the DIVs in the HTML.

Is it possible to perform something like the above and how ?

score 4 · Accepted Answer · edited May 23 '17 at 12:05

4

Its not possible with pure css. you will need to look into a CSS pre-processor. Two popular ones are called Sass and Less. These links should give you more information on them:

Sass
Less

This will help you get started with your specific problem:

including another class in Sass

edited May 23 '17 at 12:05

Community

1
1

answered Mar 16 '14 at 14:18

anurupr

2,294
2
20
28

5

To give a more fair and rounded answer, other tools like [LESS](http://lesscss.org/) should also be mentioned. – ajp15243 Mar 16 '14 at 14:20
what's the overhead in using a CSS preprocesor such as SASS or any other tool? – dewd Mar 16 '14 at 14:22
or simply say `CSS preprocessor` such as `sass`,`less`,`stylus` – melc Mar 16 '14 at 14:22
absolutely. just edited my answer based on @ajp15243's comment. – anurupr Mar 16 '14 at 14:23
1

@dewd Most build processes will compile the Less/Sass/etc. code to CSS before deployment, and that is then used in production/live environments so that it doesn't have to be done on-the-fly with page load. – ajp15243 Mar 16 '14 at 14:23
@ajp15243 thx. so the overhead is only on diskspace used by SASS? is that much? – dewd Mar 16 '14 at 14:25
1

@dewd Nah, it's just text files. Unless you have HUGE style files, but that is indicative of other problems :). – ajp15243 Mar 16 '14 at 14:27

score 0 · Answer 2 · edited Mar 16 '14 at 15:48

0

.navbar {
    .colorRed;
    .backgroundColorGreen;
}

This is not css rule. You have to use class like below -

.navbar.colorRed.backgroundColorGreen {
    /* Your css styles */
}

Notice, there is no space between class name and dot . next to it.

edited Mar 16 '14 at 15:48

Hashem Qolami

97,268
26
150
164

answered Mar 16 '14 at 15:00

Iqbal Kabir

1,518
10
16

Can a CSS class contain two other classes

2 Answers2