¿Cómo comenzar a usar Twitter Bootstrap y Sass en un proyecto de Sinatra?

Question

Sé que Twitter Bootstrap está escrito en Less, pero también hay un montón de versiones de Sass. Estoy teniendo dificultades para descubrir cuál es el mejor para usar y cómo configurar mi proyecto Sinatra.

Quiero que mis activos se compilen previamente y se tomen las huellas dactilares en un entorno de producción, pero tengo los activos no comprimidos en desarrollo para poder depurarlos más fácilmente (como la cartera de activos de Rails). Intenté configurar bootstrap-sass, pero requiere Compass. Pero realmente no necesito brújula cuando tengo todos los mixins de arranque de Twitter. También tuve problemas para configurarlo.

De todos modos, una respuesta definitiva sobre lo que debería hacer sería útil.

Answer 1

sólo tiene que utilizar etiquetas env dependiente en mi plantilla de diseño para la versión .less de arranque, o mi versión Css recompiladas:

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

De esta manera sólo me muestra la versión on-the-fly en desarrollo, y el archivo .css en modo de producción. Cuando despliegue, simplemente compilo las hojas de estilo en la línea de comando.

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

(. En ese ejemplo También estoy usando https://github.com/wbzyl/sinatra-static-assets/ de marca de tiempo del archivo css para la producción)

pública/menos/style.less comienza simplemente algo como:

@import "bootstrap/bootstrap.less"; 

@import "bootstrap/responsive.less"; 

Y todos los archivos bootstrap .less viven en public/less/bootstrap/

Básicamente, simplemente coloque todos https://github.com/twitter/bootstrap/tree/master/less allí.

Y a continuación, puede empezar de nuevo a caballo cosas a sí mismo en el mismo archivo, importar otros archivos que usted ha hecho, o la edición de los archivos de arranque del núcleo real (: |)

Si realmente tiene que utilizar Sass (No veo por qué debería ser así, vea el comentario) no es tan simple como no hay un compilador .js estándar para incluir fácilmente en su diseño.

Supongo que podría intentar decirle a rack que use http://sass-lang.com/docs/yardoc/Sass/Plugin/Rack.html en su config.ru cuando esté ejecutando en modo de desarrollo. Sin embargo, nunca lo intenté, y tuve problemas con el plugin .less rack la única vez que traté de usarlo.