Question

我有以下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..."

我该如何解决这个问题？

Answer 1

我不确定为什么你需要在这种特殊情况下使用@ 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;
}

第一个例子更符合概念＆＃39; SASS方式＆＃39;我认为。祝你有个美好的一天。

Sass：＆＃34;＆amp;＆＃34;和＆＃34; @ at-root＆＃34;不要混在一起？

1 个答案: