如何在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/#usage或https://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

相关问题
最新问题