CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-4sasslesstwitter-bootstrap-3
jazzytomato
jazzytomato

Reputation: 7214

How to use SASS or LESS mixins within a rails application?

I implemented twitter-bootstrap 3 in my application with bootstrap-sass (https://github.com/thomas-mcdonald/bootstrap-sass) but I was not able to use a theme from http://bootswatch.com/ with this method (because it doesn't provide the css files).

Then, I finally managed to install the theme from bootswatch by removing the gem, and using only the CSS files downloaded directly from twitter-bootstrap website. (I followed this tutorial : http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/ ). It worked great so far, but I came across this article http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html and decided to improve my code by using the bootstrap mixins.

I found this approach very interesting and I would like to use it in my project : 

article {
  .makeRow();

  section.main {
    .makeColumn(10);
  }

  aside {
    .makeColumn(2);
  }
}

Considering what I said about using a theme without a gem, how could I use LESS or SASS mixins ?

EDIT

Is there no other way than manually compile LESS code ? (as Bass Jobsen suggested) because it's really not convenient..

Upvotes: 1

Views: 932

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

You will have to compile your less code. Use the less files of your Twitter's Bootstrap 3 download.

Add your less code shown above to bootstraps.less, use a less compiler (some examples http://lesscss.org/#usage or https://github.com/twitter/recess) to compile this to bootstrap.css and copy this file to your vendor/assets/ directory.

Also see: How can I create multiple rows using semantic markup in Bootstrap 3? and notice makeRow and makeColumn in your example code are not valid mixins of the current Bootstrap release.

update Your question was SASS or LESS, so i answerd LESS. I expect you could do the same with SASS. From reading this: https://github.com/thomas-mcdonald/bootstrap-sass#sass it think you should import bootstrap-and-overrides.css.scss into app/assets/stylesheets/bootstrap-custom.scss

Upvotes: 2

Related Questions