如何开始在Sinatra项目中使用Twitter Bootstrap和Sass？

我知道Twitter Bootstrap是用Less编写的，但也有一些Sass版本。我很难找出最佳的使用方法以及如何建立我的Sinatra项目。如何开始在Sinatra项目中使用Twitter Bootstrap和Sass？

我希望我的资产能够在生产环境中预编译和指纹识别，但开发中包含未压缩的资产，因此我可以更轻松地进行调试（如Rails资产管道）。我尝试设置bootstrap-sass，但它需要Compass。但是当我拥有所有的twitter引导混合时，我并不需要指南针。我也有麻烦配置它。

无论如何，我应该做什么的明确答案会有帮助。

来源

2012-07-14 Andrew

为什么你不使用bootstrap的编译版本？你没有改变太多，是吗？你仍然可以使用你自己的CSS文件的sass版本来适应你的需求。 – three 2012-07-20 21:13:44

我想重写Twitter Bootstrap默认值，方法是为我的字体，颜色等设置一个变量，就像它在较少文档中提到的一样。否则，我会看起来像使用Twitter Bootstrap的其他网站。 – Andrew 2012-07-20 21:48:47

http://sass-lang.com/docs/yardoc/Sass/Plugin/Rack.html – robomc 2012-07-21 08:00:48

我只是用ENV相关的标签在我的布局模板为.LESS版本的引导，或者我重新编译的.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 %>

这样，它只是表明我的即时版本开发中以及生产模式下的.css文件。当我部署时，我只是在命令行上编译样式表。

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

（在我还使用https://github.com/wbzyl/sinatra-static-assets/到时间戳生产的CSS文件的例子）

公共/更少/ style.less开始了仅仅是这样的：

@import "bootstrap/bootstrap.less"; 

@import "bootstrap/responsive.less";

并且所有bootstrap .less文件都在公共/ 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-21 08:11:52 robomc

顺便说一句，在我看来，麻烦使用sass版本的bootstrap是毫无意义的。您正在使用引导程序来获取一套标准的默认设置和工具。这些默认设置和工具内置较少。少和sass只是生成css的两个方便的marcos。他们没有那么不同，而且他们都很简单。所以，只需使用你使用的库支持的那个（在这种情况下更少）。 – robomc 2012-07-21 08:28:03

你能举一个你的style.less文件是什么样子的例子吗？ – Andrew 2012-07-21 19:38:28

当你启动它时，它将只是一个调用引导程序无文件的其余部分。 '@import“bootstrap/bootstrap.less”; @import“bootstrap/responsive.less”;'其他所有.less文件都存在'public/less/bootstrap /'中。 – robomc 2012-07-21 21:26:19

如何开始在Sinatra项目中使用Twitter Bootstrap和Sass？

回答

相关问题