Recently we deployed one of our applications to production and while precompiling the assets we got the error –
rake aborted!
Sass::SyntaxError: Invalid CSS after ” color:”: expected expression (e.g. 1px, bold), was “##fff;”
(in ../app/assets/stylesheets/application.css)
(sass):6442
Tasks: TOP => assets:precompile
From this error message we couldn’t locate the file where this particular invalid CSS was present. After few minutes of unsuccessful manual attempts, I decided to use the scss-lint gem which scans all your CSS & SCSS files and reports if there are issues with them.
To install scss-lint, run
gem install scss_lint
To scan our stylesheets just run the scss-lint command and pass an individual file or directories to it like so –
scss-lint app/assets/stylesheets/
When I ran this, I got –
app\assets\stylesheets\style.css:3246 [E] Syntax Error: Invalid CSS after ” color:”: expected expression (e.g. 1px, bold), was “##fff;”
Voila, now I know which line in which file is causing the issue. This style.css file is a huge 4000 line theme stylesheet document and going through it manually to identify problems would be extremely tedious. Thanks to scss-lint, I can do this with a single command.
The scss-lint saved me a lot of time and its very handy to have in your toolkit as you always get such CSS problems and they are extremely hard to debug using the error messages given by the asset precompilation rake task. Hope this was useful for you!
