Question

我有这个HTML / CSS网站：Link

现在它在原始的codepen上运行正常但是当我把它放在jsfiddle上时它不起作用。我注意到它使用了一些我在普通CSS中没有看到的技术，例如：

&.fixed {

有人能告诉我这是不是为什么它不能在JSfiddle工作，如果这可以编码而不必添加某种预处理器？

Answer 1

<强> JSFiddle

如果是这样的话：

nav{
  /*styles*/

  > p{
    /*styles*/
  }
}

您需要做的就是重新编写它，就像这样：

nav{
  /*styles*/
}

nav > span {
  /*styles*/
}

此：

&.active

将是：

nav.active{
  /*styles*/
}

但是因为它在代码中的span中，它将是：

（原）

nav{
  /*styles*/

  > span{
    /*styles*/

    &.active{
      /*styles*/
    }
  }
}

（CSS）

nav{
  /*styles*/
}

nav > span{
  /*styles*/
}

nav > span.active{
  /*styles*/
}

Answer 2

这可以在没有预处理器的情况下进行编码，语法只需使用＆amp;指示应用此选择器与父选择器（以及父选择器）结合使用，因此您可以将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;
}

Answer 3

任何人都可以告诉我这是不是在JSfiddle工作的原因

因为它不是CSS

如果可以编码而无需添加某种预处理器？

只需复制预处理器所能做的任何事情。

这可能是将规则集从其内部的规则集中取出，并将&替换为刚删除它的规则集的选择器。

e.g。

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

变为

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

也许是CSS预处理器？

3 个答案: