Gulp Sass suddenly rejecting double quotes

A slip-up of adding an extra ” to a string definition highlights an anomaly in Sass which causes it to flag every line of scss  code (including comments) with double quotes as an error including the real error lost in the jungle of errors. See example below with ” added to the end of $fontfamily (not easy to spot) and an excerpt of the Sass compiler error message pointing to valid line of code amongst many more misleading messages.

$fontfamily: "Comic Sans MS",Arial,Helvetica,sans-serif!important";
Error in plugin "sass"
Message:
src/scss/style.scss
Error: Invalid CSS after '...nd-image: url("': expected expression (e.g. 1px, bold), was "../images/Computer_"
on line 430 of src/scss/style.scss
>> // background-image: url("../images/Computer_Doctor_1800x1149.png");

All this confusion leaves you scratching your head trying to figure out what’s suddenly gone wrong leading you down false trails, e.g. thinking Sass has been updated to a buggy version or should I replace all double with single quotes or whatever.

Once you’ve tracked down the real error line and removed that extra ” all the other error messages miraculously disappear – phew!

I hope this  revelation saves you many hours of lost productivity.

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out comment
Enter name