Html 可能是CSS预处理器？

我有一个HTML/CSS网站：

现在它可以在原始的codepen上正常工作，但是当我将它放在JSFIDLE上时，它就不工作了。我注意到它使用了一些我在普通CSS中没有见过的技术，例如：

&.fixed {

有没有人能告诉我这就是为什么它不能在JSFIDLE中工作，以及它是否可以在不添加某种预处理器的情况下进行编码？

如果是这样的话：

nav{
  /*styles*/

  > p{
    /*styles*/
  }
}

nav{
  /*styles*/
}

nav > span {
  /*styles*/
}

你需要做的就是重写它，就像这样：

nav{
  /*styles*/

  > p{
    /*styles*/
  }
}

nav{
  /*styles*/
}

nav > span {
  /*styles*/
}

这：

将是：

nav.active{
  /*styles*/
}

但是因为它在代码中，所以它将是：

（原件）

（CSS）

有人能告诉我这就是为什么它不能在JSFIDLE中工作吗

因为它不是CSS

如果不需要添加某种预处理器就可以对其进行编码

只要复制预处理器将要执行的任何操作即可

这可能是将规则集从其所在的规则集中取出，并用刚刚从中删除的规则集的选择器替换

&

e、 g

变成

.foo { }
.foo.fixed { ... }

---

这可以在不使用预处理器的情况下进行编码，语法只是使用&指示应用此选择器与父选择器（即，以及父选择器）结合嵌套，因此您可以将CSS更改为：

* {
    padding:0px;
    margin:0px;
}
header {
    background:#CCEAF9;
    height:100px;
    padding:1em;
}
nav {
    background:#000;
    color:#FFF;
    height:50px;
    padding:0 1em;
    transition:0.3s;
}
nav > span {
    display:inline-block;
    font-weight:bold;
    padding:1em;
    margin-right:1em;
    opacity:.5;
}
nav > span.active {
    opacity:1;
}
nav.fixed {
    position:fixed;
    width:100%;
    top:0;
    opacity:0.6;    
}
.fixed + #navPlaceholder {
    height:50px;
}
section {
    height:600px;
    background:#EEE;
    background: linear-gradient(to bottom, #DDD 0%, #FFF 100%);
    padding:1em;
}

---

注意，当您将JSFIDLE中语言选项下的CSS语言更改为“SCSS”时，情况会发生一些变化。

.foo { }
.foo.fixed { ... }

* {
    padding:0px;
    margin:0px;
}
header {
    background:#CCEAF9;
    height:100px;
    padding:1em;
}
nav {
    background:#000;
    color:#FFF;
    height:50px;
    padding:0 1em;
    transition:0.3s;
}
nav > span {
    display:inline-block;
    font-weight:bold;
    padding:1em;
    margin-right:1em;
    opacity:.5;
}
nav > span.active {
    opacity:1;
}
nav.fixed {
    position:fixed;
    width:100%;
    top:0;
    opacity:0.6;    
}
.fixed + #navPlaceholder {
    height:50px;
}
section {
    height:600px;
    background:#EEE;
    background: linear-gradient(to bottom, #DDD 0%, #FFF 100%);
    padding:1em;
}