CODEWITHSUNDEEP
csssass
mrfr
mrfr

Reputation: 1794

gulp compile SCSS/SASS breaks on valid color value

I've got this code. Which works in chrome dev-tools

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

and when I try to compile it i get this error

[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;
------------^

If I put any other value like #000000 or black it works. I think it has somehting to do with me putting the last bits for the opacity.

Upvotes: 0

Views: 516

Answers (2)

Rebecca
Rebecca

Reputation: 459

Color codes with more than 6 digits are not supported in CSS/SCSS. I'm not sure why chrome dev-tools allow that.

Just use color: rgba(0,0,0,0.7); instead.

If you want to add opacity to other colors, but you don't feel like translating them into rgb, you can also use the scss variable there:

$my-color: pink;

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

Upvotes: 1

sunil kumar
sunil kumar

Reputation: 301

color code has only 3 (#000) or 6 (#000000) digit value. so you have to add only 3 or 6 digit and if you want to add opacity then define color in rgba(0,0,0,0.6);

first three number are used for color and last float value is used for opacity.

Upvotes: 1

Related Questions