也许是CSS预处理器?

时间:2014-05-19 10:15:11

标签: html css

我有这个HTML / CSS网站:Link

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

&.fixed {

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

3 个答案:

答案 0 :(得分: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*/
}

答案 1 :(得分:1)

这可以在没有预处理器的情况下进行编码,语法只需使用&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;
}

答案 2 :(得分:0)

  

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

因为它不是CSS

  

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

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

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

e.g。

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

变为

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