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

Question

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..

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

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

edited May 23 '17 at 12:19

Community

1
1

answered Dec 18 '13 at 00:28

Bass Jobsen

48,736
16
143
224

Still, it is really not a convenient method :( I tried to import SASS files from thomas-mcdonalod repository and use sass mixins into my bootstrap-and-overrides.css.scss file but it doesn't work either :( – jazzytomato Dec 18 '13 at 18:42
i do work with LESS mostly. Does it work without your `bootstrap-and-overrides.css.scss`? – Bass Jobsen Dec 18 '13 at 18:53
nevermind. I was a bit lost here. I now use the gem bootstrap-sass and override bootstrap default theme by importing the new css in my application.css :-) (I can use SASS mixins this way) thank you for you time – jazzytomato Dec 18 '13 at 20:37

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

1 Answers1