gulp编译SCSS / SASS中断有效颜色值

Question

我有这个代码。哪个适用于chrome dev-tools

p {
    color: #00000070;
    padding: 0px 10px;
    position: relative;
    z-index: 98;
}

当我尝试编译它时，我得到了这个错误

[19:36:38] Using gulpfile ~/job/fello/gulpfile.js
[19:36:38] Starting 'sass'...
Error in plugin 'sass'
Message:
    wp-content/themes/fellose/styles/layouts/_mypages.scss
Error: Invalid CSS after "                      color:": expected expression (e.g. 1px, bold), was "#00000070;"
        on line 462 of wp-content/themes/fellose/styles/layouts/_mypages.scss
>>                      color: #00000070;
------------^

如果我把任何其他值，如#000000或black，它的工作原理。我认为这与我将不透明度的最后几位放在一起有所作为。

Answer 1

颜色代码只有3（＃000）或6（＃000000）数字值。所以你只需要添加3或6位数字，如果你想添加不透明度，那么在rgba(0,0,0,0.6)中定义颜色;

前三个数字用于颜色，最后一个浮点值用于不透明度。

Answer 2

CSS / SCSS不支持超过6位的颜色代码。我不确定为什么chrome dev-tools允许这样做。

只需使用color: rgba(0,0,0,0.7);。

如果你想为其他颜色添加不透明度，但是你不想将它们翻译成rgb，你也可以在那里使用scss变量：

$my-color: pink;

color: rgba($my-color,0.5);