有没有更好的方法来做CSS类“在CSS类中”？ [英] Is there a better way to do CSS classes "within CSS classes"?

问题描述

提出我的问题的最好方法是制定一个方案。

The best way to ask my question is to lay out a scenario.

说我有以下标记：

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

    </div>

    <div class="jill">

    </div>
</div>

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

Right, so the way I was taught to affect the child through the parent was with something like this:

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

我的问题源自我最近学习的响应式CSS，行如：@media only screen {}。它有（请原谅任何困扰的术语）CSS列在CSS？ （Curly Brackets within Curly Brackets）。

My question stems from my recent learning of responsive CSS, where I've seen lines such as: @media only screen{}. It has (please forgive any botched terminology) CSS listed inside CSS?? (Curly Brackets within Curly Brackets).

有没有办法影响上述标记？示例：

Is there a way to affect the aforementioned markup with something like that? Example:

.box{
     .jack{
          /*Mooooom, I don't want to go shopping for school clothes*/
     }

     .jill{
          /*Yay, shopping! I need all the new styles!!!*/
     }
}

我在JSFiddle试验了几次，它没有工作。我的希望是，我错过了一些关键字或字符。或者，这只是不可能影响这种格式的CSS元素？

I've experimented a couple times in a JSFiddle, and it didn't work. My hope is that I'm missing some kind of key word or character. Or is this just not possible to affect elements with CSS in this format?

P.S。
我不知道我在找什么的术语，所以谷歌没有帮助。

P.S. I do not know the term of what I am looking for, so Google isn't helping. If you know that this is already answered, please link me to it!

推荐答案

不，没有。

您可以使用像SASS / SCSS或LESS（和其他人，Stylus）这样的CSS预处理程序，使得更容易，更快地编写代码，但最终，他们仍然编译到相同的CSS。

You can use CSS preprocessors like SASS/SCSS or LESS (and others, Stylus) which make writing code easier and quicker but, in the end, they still compile to the same CSS.

SASSMeister演示

SASS信息链接

LESS信息链接

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

6 Current Options for CSS Preprocessors - 11/2014

这篇关于有没有更好的方法来做CSS类“在CSS类中”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！