6

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

本番環境でアセットをプリコンパイルしてフィンガープリントを作成したいが、開発中のアセットは圧縮されていないため、デバッグが容易になります (Rails アセット パイプラインなど)。bootstrap-sassを設定してみましたが、Compass が必要です。しかし、Twitter のブートストラップ mixin がすべて揃っている場合は、コンパスは必要ありません。私も設定に苦労しました。

とにかく、私が何をすべきかについての決定的な答えは役に立ちます。

4

1 に答える 1

5

ブートストラップの .less バージョン、または再コンパイルされた .css バージョンのレイアウト テンプレートで env 依存タグを使用するだけです。

<% 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 %>

このようにして、開発中のオンザフライ バージョンと、プロダクション モードの .css ファイルが表示されます。デプロイするときは、コマンド ラインでスタイルシートをコンパイルするだけです。

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

(その例では、https://github.com/wbzyl/sinatra-static-assets/も使用して、本番用の css ファイルにタイムスタンプを付けています。)

public/less/style.less は、次のようなものから始まります。

 @import "bootstrap/bootstrap.less";

 @import "bootstrap/responsive.less";

そしてすべてのブートストラップ .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ラックプラグインを使用しようとしたときに問題が発生しました.

于 2012-07-21T08:11:52.800 に答える