将样式应用于分组的多个子元素

Question

如果我有以下内容

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

有没有办法做像这样的事情

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

分组样式的子代，这样我就不必一直重写父代。

Answer 1

@LGSon是正确的-如果你可以使用Sass或更小的版本，它将在这方面工作得很好。例如，您的代码将完全按照您在this demonstration website上想要的方式进行翻译。

有关更多详细信息，请参阅Nesting CSS classes。

编辑:添加了一个使用LESS来完成此操作的示例。

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

​