2

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 ?

2 Answers 2

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:

  1. Sass

  2. Less

This will help you get started with your specific problem:

  1. including another class in Sass
7
  • 5
    To give a more fair and rounded answer, other tools like LESS should also be mentioned.
    – ajp15243
    Mar 16, 2014 at 14:20
  • what's the overhead in using a CSS preprocesor such as SASS or any other tool?
    – dewd
    Mar 16, 2014 at 14:22
  • or simply say CSS preprocessor such as sass,less,stylus
    – melc
    Mar 16, 2014 at 14:22
  • 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, 2014 at 14:23
  • 1
    @dewd Nah, it's just text files. Unless you have HUGE style files, but that is indicative of other problems :).
    – ajp15243
    Mar 16, 2014 at 14:27
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.

Your Answer

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