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

时间:2018-03-05 18:42:05

标签: css sass

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

function myFunctionCreate() {
   var mydoc = DocumentApp.getActiveDocument();
   var cursor = mydoc.getCursor();
   var bookmark = mydoc.addBookmark(cursor);
   Logger.log(bookmark.getId());
 }

当我尝试编译它时会出现此错误

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,它就有效。我认为它与我将不透明度的最后几位放在一起有所作为。

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

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

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

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

$my-color: pink;

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