如何在導軌應用程序中使用SASS或LESS mixins？

Question

我實現Twitter的引導3在我的應用程序與引導-SASS（https://github.com/thomas-mcdonald/bootstrap-sass）但我無法從http://bootswatch.com/使用主題用這種方法（因爲它不提供的css文件）。

然後，我終於通過移除寶石，並且僅使用直接從 Twitter的引導網站下載的CSS文件來安裝從bootswatch 主題。 （我遵循本教程：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); 
    } 
} 

考慮我所說的關於使用主題沒有寶石，我怎麼會用LESS或SASS mixins？

編輯

難道還有比手動編譯更少的代碼沒有別的辦法？ （正如Bass Jobsen所建議的那樣），因爲它確實不方便..

Answer 1

您將不得不編譯少量代碼。使用Twitter的Bootstrap 3下載文件較少。

添加如上所示bootstraps.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版本的有效mixins。

更新 您的問題是SASS或更少，所以我回答了更少。我希望你可以在SASS做同樣的事情。從閱讀本：https://github.com/thomas-mcdonald/bootstrap-sass#sass它認爲你應該導入bootstrap-and-overrides.css.scss到app/assets/stylesheets/bootstrap-custom.scss