Apply styles to grouped multiple child elements

Question

If I have the following

.dark-theme .link {color:black;}
.dark-theme a {color:red;}
.dark-theme button {color:green;}
.dark-theme div {color:orange;}
.dark-theme .whatever {color:blue;}
.dark-theme .element {color:navyblue;}
.dark-theme .element2 {color:black;}

Is there a way to do something like

.dark-theme {
    .link {color:black;}
    a {color:red;}
    button {color:green;}
    div {color:orange;}
    .whatever {color:blue;}
    .element {color:navyblue;}
    .element2 {color:black;}
}

Group styles of child so I don't have to keep rewriting the parent before.

Possible duplicate of [Nesting CSS classes](http://stackoverflow.com/questions/4564916/nesting-css-classes) — Bram Vanroy, Sep 17 '16 at 19:28

score 0 · Answer 1 · edited May 23 '17 at 12:19

@LGSon is correct - Sass or LESS will work very well for this, if you can use it. For example, your code will translate exactly how you wanted on this demonstration website.

See Nesting CSS classes for more details.

EDIT: Added an example of using LESS to accomplish this.

<div>
  <span>Hello</span>
  <div>World</div>
</div>

<style type="text/less">
div {
font-size: 2em;
span {color:green;};
div {color:blue;};
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js" type="text/javascript"></script>

Apply styles to grouped multiple child elements

1 Answers1