在Sass中使用冒号语法和变量

Question

我仍在使用旧的冒号语法（比括号语法更喜欢）和以下特定代码：

a.button-link 
  +box($main-color) 
  +border-radius(5px) 
  :background 
    :color $main-color 
  :color #fff 
  :padding 5px 

生成如下警告：

弃用警告：在'/ Users / eumir / rails_apps / dxconnect / app / stylesheets / partials / utilities / _link-styles.sass'的字符3中，带有=的设置属性已被弃用，并将在3.2版中删除。 使用“ background：$ main-color”代替。

我试过了，但是我的背景色仍然没有出现。 对此有何帮助？ 谢谢！

Answer 1

尝试：

a.button-link
  background: $main-color

要么

a.button-link
  background-color: $main-color

Answer 2

即使您更喜欢SASS语法而不是SCSS（我也这样做！），也应该使用转换器更新文件：

sass-convert --from=sass2 --to=sass --recursive views/stylesheets

有关所有选项，请参见sass-convert --help 。

Answer 3

这是我从Haml小组获得的有效答案。 显然，我将变量声明为$ main-color：“＃f00”，而不仅仅是$ main-color：＃f00

“您的$ main-color变量不应该带引号。在Sass 3中，所有变量和mixin参数都应与您希望它们出现在CSS中一样，而无需任何引号。”