有没有更好的方法来做CSS类"within CSS classes"？

Question

问我的问题最好的方式是布置一个场景。

假设我有以下标记:

<div class="box">
    <div class="jack">
    </div>
    <div class="jill">
    </div>
</div>

对，所以我被教导通过父母来影响孩子的方式是这样的:

.box .jack, .box .jill{
    width: 100px;
    height: 100px;
    background-color: yellow;
}

我的问题源于我最近学习的响应式CSS，在那里我看到这样的行:@media only screen{}。它有(请原谅任何拙劣的术语)CSS内列出的CSS??(大括号中的大括号).

是否有一种方法可以用类似的东西影响上述标记?例子:

.box{
     .jack{
          /*Mooooom, I don't want to go shopping for school clothes*/
     }
     .jill{
          /*Yay, shopping! I need all the new styles!!!*/
     }
}

我已经在JSFiddle中试验了几次，它没有工作。我希望我遗漏了一些关键词或特征。或者只是不可能影响这种格式的CSS元素?

注:我不知道我要找的术语，所以谷歌没有帮助。如果你知道这个问题已经有答案了，请链接我!

Answer 1

不…There is not.

您可以使用CSS预处理器，如SASS/SCSS或LESS(以及其他，Stylus)，使编写代码更容易和更快，但最终，它们仍然编译为相同的CSS。

<<p> SASSMeister演示/strong>

---

SASS信息链接

LESS Info Link

6 CSS预处理器的当前选项 - 11/2014