SinatraプロジェクトでTwitter BootstrapとSassを使用するにはどうすればいいですか？

Question

Twitter BootstrapはLessで書かれていますが、Sassバージョンもたくさんあります。私は使用するのに最適なものとSinatraプロジェクトをセットアップする方法を考え出すのに苦労しています。

私の資産をプロダクション環境でプリコンパイルして指紋処理しても、非圧縮アセットを開発中にして、Railsアセットパイプラインのように簡単にデバッグすることができます。 bootstrap-sassを設定しようとしましたが、コンパスが必要です。しかし、私はすべてのツイッターブートストラップミックスインを持っているときにコンパスが本当に必要ない。私もそれを設定するのに苦労しました。

とにかく、私が何をすべきかについての決定的な答えが役に立つでしょう。

<% if settings.development? %> 
    <link rel="stylesheet/less" href="/less/style.less"> 
    <%= javascript_tag "/js/libs/less-1.2.1.min.js" %> 
<% end %> 

<% if settings.production? %> 
    <%= stylesheet_tag "/css/mycss.css" %> 
<% end %> 

それはちょうど私オンザフライバージョンを示し、この方法は：

Answer 1

私はちょうどバージョンのブートストラップの.lessバージョンのための私のレイアウトテンプレートでENV依存のタグを使用するか、私の再コンパイルの.css開発モード、および.cssファイルをプロダクションモードで使用します。私がデプロイするときは、コマンドラインでスタイルシートをコンパイルするだけです。

@import "bootstrap/bootstrap.less"; 

@import "bootstrap/responsive.less"; 

：

$ lessc public/less/style.less > public/css/mycss.css 

（。この例では、私はまた、生産のためのCSSファイルをタイムスタンプするhttps://github.com/wbzyl/sinatra-static-assets/を使用しています）

公開/以下/ style.lessのようなだけで何かをオフに開始しますブートストラップレスのファイルはすべてpublic/less/bootstrap/

にあります。

基本的には、https://github.com/twitter/bootstrap/tree/master/lessをすべてドロップしてください。

そして、あなたは、あなたが作った他のファイルをインポートし、同じファイルにオーバーライディング物事を自分で開始するか、実際のコアのブートストラップファイルを編集することができます|あなたが本当にSASSを（使用する必要がある場合

を（）私はこれがなぜそうでなければならないのか分かりませんが、コメントを参照してください）、標準の.jsコンパイラがあなたのレイアウトに簡単に含まれるほど単純ではありません。

開発モードで実行しているときに、config.ruにhttp://sass-lang.com/docs/yardoc/Sass/Plugin/Rack.htmlを使用するようラックに伝えてみるといいでしょう。私はそれを試したことはありません、と私はそれを使用しようとしたときに.lessラックのプラグインに問題があった。