How do I view SCSS @warn and @debug directives in a Rails 3.1 project?

Question

One of my favourite debugging features of SCSS is the @warn and @debug directives, which both aid with debugging. However, when I place either of these in my scss files in a Rails 3.1 project, they don't appear in the stdout (from running tail -f log/development.log)

Does anyone know whether it's possible to enable these so that Sprockets/Rails doesn't disable them, and I can view the output in the output stream.

Solution 1

I haven't found how to enable them on the development log but can achieve the same thing by using sass --watch.

Here is my application.css.scss which mostly pulls other sass files using sass @import (not sprockets *=require. see here for why.) for shared variables/mixins/functions usage:

/*
 *= require_self
 *= depend_on projects
*/

@import "layout.css.scss";
@import "projects.css.scss";

Now suppose layout.css.scss has this variable:

$main-color:  #327B31;

I can get its value in file project.css.scss

@debug "Main color is:" $main-color;
@warn "Darker: " darken($main-color, 20%);

I open up a terminal window and point sass --watch at the main .scss file that pulls in the others

$ sass --watch  app/assets/stylesheets/application.css.scss --stop-on-error --trace
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: /home/yuval/ws/books/railscasts/268-sass-basics/app/assets/stylesheets/projects.css.scss
app/assets/stylesheets/projects.css.scss:5 DEBUG: "Main color is:" #327b31
WARNING: "Darker: " #143214
         on line 6 of app/assets/stylesheets/projects.css.scss
         from line 16 of app/assets/stylesheets/application.css.scss

  overwrite app/assets/stylesheets/application.css.css 

--stop-on-error is because errors tend to make sass --watch retry repeatedly which I don't want. --trace gives you a backtrace if an error happens.

So long as an error doesn't happen, this log will continue to refresh with each save.

I like this approach also because it's ruby/rails neutral (which it should be, it seems ) and so works with anything running sass.

Also, this works if you are using Compass on top of Sass.

Just activate compass in your application.css.scss file (or whichever .scss file):

@import "compass";

and then use ``compass watch```:

$ compass watch app/assets/stylesheets/application.css.scss  --css-dir tmp/cache/

--css-dir tmp/cache/ is to avoid compass watch creating .css files that override your .scss ones. I dump them into the cache with this.

Solution 2

Rails 5

If anyone comes here looking for this in Rails 5, you can simply add @warn directives to your stylesheets and the output will be printed to your console (you must be running rails s).

For example:

$main-color:  #327B31;
@warn "Main color is:" $main-color;

Will print this output to your console:

WARNING: "Main color is:" #f5f5f5
     on line 2 of /path/to/your/app/assets/stylesheets/application.scss

PS: As far as I can tell, this shows up in your console only - not in the logs.