2011-12-02 4 views
9

SCSSの私のお気に入りのデバッグ機能の1つは、@warnと@debugの両方のディレクティブです。どちらもデバッグに役立ちます。しかし、これらのいずれかをRails 3.1プロジェクトのscssファイルに置くと、stdoutに表示されません(tail -f log/development.logを実行した場合)Rails 3.1プロジェクトでSCSS @warnと@debugディレクティブを表示するにはどうすればよいですか?

誰でも可能にすることができますか?これらはSprockets/Railsがそれらを無効にしないように、出力ストリームで出力を見ることができます。

答えて

7

私は開発ログでそれらを有効にする方法は見つけられませんでしたが、sass - watchを使用して同じことを達成できます。ここで

はほとんどSASS @import使用して他のSASSファイルを引っ張る私のapplication.css.scssある(ないスプロケットを* =必要here理由についてを参照してください。)共有変数/ミックスイン/機能を使用するため:

/* 
*= require_self 
*= depend_on projects 
*/ 

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

今仮定するlayout.css.scssは、この変数があります:私は、ファイルproject.css.scssでその値を取得することができます

$main-color: #327B31; 

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

私はエラーを繰り返したIドンを再試行--watch SASSを作る傾向があるため

$ 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がある他の人に引っ張るメイン.scssファイルでターミナルウィンドウとポイントSASS --watchを開きます欲しい。 --traceは、エラーが発生した場合にバックトレースを提供します。

エラーが発生しない限り、このログは保存ごとに更新され続けます。

私はこのアプローチも好きです。なぜなら、それはルビー/レールニュートラル(それはそうでなければなりません)なので、何かが鳴っているので動作します。

また、これはSassの上でコンパスを使用している場合にも有効です。 ``コンパスwatch```使用し、その後

@import "compass"; 

と::

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

--css-dir tmp/cache/をさ

はちょうどあなたのapplication.css.scssファイル(またはどちらか.scssファイル)にコンパスを活性化させますコンパスがあなたの.scssファイルを上書きする.cssファイルを作成しないようにします。私はこれを使ってキャッシュにダンプします。 (あなたがrails sを実行している必要があります)誰もがここに来たら

1

Railsの5

はRailsの5でこれを探して、あなたは単にあなたのスタイルシートに@warnディレクティブを追加することができ、出力はコンソールに出力されます。例えば

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

は、あなたのコンソールにこの出力を表示します:

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

をPS:私の知る限り、これが唯一のコンソールに表示さ - いないログに。

関連する問題