Rails 6项目中使用SASS时8位十六进制颜色语法报错如何解决？

问题描述 #

在Rails 6项目中使用8位十六进制RGBA颜色语法（#0abf3055）编写SASS代码：

background-image: linear-gradient(to right, #0abf3055, #22242F 30%)

触发如下报错：

Invalid CSS after "": expected expression (e.g. 1px, bold), was "#0abf3055"

替换为rgba(#0abf30, 0.33)或仅#0abf30时代码可正常运行，说明当前SASS环境对8位十六进制颜色语法存在兼容问题，但SASS官方文档显示该语法受支持。

解决方法 #

1. 升级Sass版本

Rails 6默认依赖的Sass版本可能不支持8位十六进制RGBA语法，你可以在Gemfile中指定更高版本的sass：

gem 'sass', '>= 3.8.0'

执行bundle update sass完成版本升级，新版本Sass原生支持该语法。

2. 替换为Dart Sass编译器

Rails 6默认使用的SassC（基于停止维护的LibSass）对新CSS语法支持有限，建议替换为Dart Sass：

• 在Gemfile中移除sassc-rails，添加sass-rails：

  # gem 'sassc-rails'
  gem 'sass-rails', '>= 6.0.0'
  

• 执行bundle install更新依赖，Dart Sass会成为默认编译器，完美支持8位十六进制RGBA语法。

3. 临时兼容方案（不推荐）

如果暂时无法升级或替换编译器，可使用Sass的transparentize函数间接实现相同效果：

background-image: linear-gradient(to right, transparentize(#0abf30, 0.67), #22242F 30%)

注：0.67为透明度值（1 - 目标不透明度0.33），与#0abf3055的透明度（十六进制55转换为十进制是85，85/255≈0.33）对应。

内容的提问来源于stack exchange，提问作者Matrix