如何在rails应用程序中使用SASS或LESS mixins?

时间:2013-12-17 23:39:10

标签: ruby-on-rails ruby-on-rails-4 sass less twitter-bootstrap-3

我使用 bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass在我的应用程序中实现了 twitter-bootstrap 3 但我无法使用主题< / strong>来自http://bootswatch.com/的方法(因为它不提供css文件)。

然后,我终于设法通过删除gem 来安装bootswatch 中的主题,并且仅使用来自twitter-bootstrap网站的直接下载的CSS文件。 (我遵循了本教程:http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/)。它到目前为止工作得很好,但我遇到了这篇文章http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html,并决定使用bootstrap mixins 来改进我的代码。

我发现这种方法非常有趣,我想在我的项目中使用它:

article {
  .makeRow();

  section.main {
    .makeColumn(10);
  }

  aside {
    .makeColumn(2);
  }
}

考虑到我所说的使用没有gem的主题,我怎么能使用 LESS SASS mixins

编辑

除了手动编译LESS代码之外没有其他方法吗? (正如Bass Jobsen建议的那样)因为它真的不方便..

1 个答案:

答案 0 :(得分:2)

您必须编译较少的代码。使用Twitter的Bootstrap 3下载的较少文件。

将上面显示的较少代码添加到bootstraps.less,使用较少的编译器(一些示例http://lesscss.org/#usagehttps://github.com/twitter/recess)将其编译为bootstrap.css并将此文件复制到{{1} }目录。

另请参阅:How can I create multiple rows using semantic markup in Bootstrap 3?并注意示例代码中的vendor/assets/makeRow不是当前Bootstrap版本的有效mixins。

<强>更新 你的问题是SASS或LESS,所以我回答的很少。我希望你能和SASS一样。从阅读本文开始:https://github.com/thomas-mcdonald/bootstrap-sass#sass它认为您应该将makeColumn导入bootstrap-and-overrides.css.scss