Can a CSS class contain two other classes - html

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 ?

Answer 1

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

Answer 2

.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.