Jak rozpocząć korzystanie z Twitter Bootstrap i Sass w projekcie Sinatra?

Question

Wiem, że Twitter Bootstrap jest napisany w Less, ale jest też kilka wersji Sassa. Trudno mi wymyślić najlepszy do użycia i skonfigurować mój projekt Sinatra.

Chcę, aby moje zasoby zostały wstępnie skompilowane i pobrane odciski palców w środowisku produkcyjnym, ale mają nieskompresowane zasoby w fazie rozwoju, aby łatwiej było debugować (np. Potok zasobów Railsowych). Próbowałem skonfigurować bootstrap-sass, ale wymaga to kompasu. Ale tak naprawdę nie potrzebuję kompasu, gdy mam wszystkie miksy na bootstrapie twitter. Miałem także problem z jego konfiguracją.

W każdym razie ostateczna odpowiedź na pytanie, co powinienem zrobić, byłaby pomocna.

Answer 1

Właśnie używać znaczników ENV-zależne w moim szablon układu dla .less wersji bootstrap, lub mój zrekompilowane wersji .css:

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

ten sposób to tylko pokazuje mi wersję on-the-fly w fazie rozwoju i plik .css w trybie produkcyjnym. Kiedy wdrażam, po prostu kompiluję arkusze stylów w wierszu poleceń.

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

(. W tym przykładzie Używam również https://github.com/wbzyl/sinatra-static-assets/ do timestamp plik CSS dla produkcji)

publiczny/mniej/style.less zaczyna się właśnie coś takiego:

@import "bootstrap/bootstrap.less"; 

@import "bootstrap/responsive.less"; 

I wszystkie pliki bootstrap .less na żywo/less/bootstrap/

Po prostu upuść tam wszystkie https://github.com/twitter/bootstrap/tree/master/less.

a następnie można rozpocząć nadrzędnego rzeczy się w tym samym pliku, importowanie innych plików po dokonaniu lub edytowania rzeczywisty podstawowe pliki bootstrap (: |)

Jeśli naprawdę trzeba używać Sass (Nie widzę powodu, aby tak było, zobacz komentarz) nie jest to tak proste, jak nie ma standardowego kompilatora .js, który można łatwo zawrzeć w układzie.

Domyślam się, że możesz spróbować powiedzieć rackowi, aby użyć http://sass-lang.com/docs/yardoc/Sass/Plugin/Rack.html w pliku config.ru, gdy pracujesz w trybie programistycznym. Jednak nigdy tego nie próbowałem i miałem problem z wtyczką .less rack, gdy próbowałem go użyć.