如何在 Rails 应用程序中使用 SASS 或 LESS mixin？答案

【问题标题】：How to use SASS or LESS mixins within a rails application?如何在 Rails 应用程序中使用 SASS 或 LESS mixin？
【发布时间】：2014-01-05 23:15:36
【问题描述】：

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

然后，我终于设法从 bootswatch 通过删除 gem 安装主题，并且只使用从 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 并决定使用引导程序 mixins 来改进我的代码。

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

article {
  .makeRow();

  section.main {
    .makeColumn(10);
  }

  aside {
    .makeColumn(2);
  }
}

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

编辑

除了手动编译 LESS 代码没有别的办法吗？（正如 Bass Jobsen 建议的那样）因为它真的不方便..

【问题讨论】：

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

【解决方案1】：

您将不得不编译您的 less 代码。使用 Twitter 的 Bootstrap 3 下载的较少文件。

将上面显示的 less 代码添加到 bootstrap.less，使用 less 编译器（一些示例 http://lesscss.org/#usage 或 https://github.com/twitter/recess）将其编译为 bootstrap.css 并将此文件复制到您的 vendor/assets/ 目录。

另请参阅：How can I create multiple rows using semantic markup in Bootstrap 3? 并注意示例代码中的 makeRow 和 makeColumn 不是当前 Bootstrap 版本的有效混合。

更新你的问题是 SASS 还是 LESS，所以我回答了 LESS。我希望你可以对 SASS 做同样的事情。从阅读本文：https://github.com/thomas-mcdonald/bootstrap-sass#sass 它认为您应该将bootstrap-and-overrides.css.scss 导入app/assets/stylesheets/bootstrap-custom.scss

【讨论】：

不过，这确实不是一个方便的方法 :( 我尝试从 thomas-mcdonalod 存储库导入 SASS 文件，并在我的 bootstrap-and-overrides.css.scss 文件中使用 sass mixins，但它没有也不行:(
我主要使用 LESS。没有你的bootstrap-and-overrides.css.scss 也可以吗？
没关系。我有点迷失在这里。我现在使用 gem bootstrap-sass 并通过在我的 application.css 中导入新的 css 来覆盖 bootstrap 默认主题 :-)（我可以通过这种方式使用 SASS mixins）谢谢你的时间