我有以下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方式”的概念。
祝你有美好的一天。
关于css - Sass : “&” and “@at-root” don't mix?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24797410/