Css Sass:“您必须遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他有关法律法规。”&&引用;及@“从根本上”;don';不混?

Css Sass:“您必须遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他有关法律法规。”&&引用;及@“从根本上”;don';不混?,css,compiler-construction,compiler-errors,sass,converter,Css,Compiler Construction,Compiler Errors,Sass,Converter,我有以下CSS: #extra-info .warning { color: #c33; } #extra-info .warning, .created-link { font-size: 12px; margin-right: 4px; text-transform: uppercase; } 我想把它转换成Sass 3.3.10。我尝试了以下方法: #extra-info .warning { color: #c33; &, @at-root .created

我有以下CSS:

#extra-info .warning { color: #c33; }
#extra-info .warning, .created-link { font-size: 12px; margin-right: 4px; text-transform: uppercase; }  
我想把它转换成Sass 3.3.10。我尝试了以下方法:

#extra-info .warning {
    color: #c33;
    &, @at-root .created-link { font-size: 12px; margin-right: 4px; text-transform: uppercase; }        
}
但是,这给了我以下错误:

Sass::SyntaxError: Invalid CSS after "  &, ": expected "{", was "@at-root .creat..."

如何修复此问题?

我不确定在这种特殊情况下为什么需要使用@at root,但您可以这样编写:

#extra-info .warning{
  /* Use @extend directive, because it's designed specifically for this.*/
  @extend .created-link;
  color: #c33;
  @at-root .created-link{
    font-size: 12px;
    margin-right: 4px;
    text-transform: uppercase;
  }
}
或者更简单的方法,只需将其写入单独的块中:

#extra-info .warning{
  @extend .created-link; /*some*/
  color: #c33;
}
.created-link{
  font-size: 12px;
  margin-right: 4px;
  text-transform: uppercase;
}
我认为第一个例子更符合“SASS方式”的概念。 祝你今天愉快