我有这个HTML / CSS网站:Link
现在它在原始的codepen上运行正常但是当我把它放在jsfiddle上时它不起作用。我注意到它使用了一些我在普通CSS中没有看到的技术,例如:
&.fixed {
有人能告诉我这是不是为什么它不能在JSfiddle工作,如果这可以编码而不必添加某种预处理器?
答案 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 { ... }