How to use twitter bootstrap-sass mixins

Question

Using Rails 3.

Right now in each new .css.scss file that I am creating, I want to be able to use the mixins, but I just couldn't seem to use it.

Here is my bootstrap_import.css.scss:

// Import bootstrap
// --------------------------------------------------
@import "bootstrap";
@import "bootstrap-responsive";
@media (min-width: 1200px) {
  .span12, .container {
    width: 1170px;
  }
}
@import "base";

When I have another file called a.css.scss and I try to @include border-radius(12px);, but it just gives this error:

Undefined mixin 'border-radius'.

Same goes to variables, I would like to change some colors on some variables so that I can use it on any file without needing to include in each CSS file.

Thank you.

No, using boostrap-sass mixins. See https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss — Victor, Jun 19 '12 at 15:05

theforce · Answer 1 · 2012-06-20T00:57:09.477

3

Only one import works in my project, probably a bug or a mistake from my side.

My solution with bootstrap-sass v2.0.3.1 to achieve a solution is: (not 100% what do you expect, I know..)

I create a new scss file like: myAppBase.css.scss

/* override bootstrap default variables */
$linkColor:      #FF0000;
$linkColorHover: #000;

@import "bootstrap";

/* App variables */
$bgImage: url('bg.jpg');
$radius: 4px;
$maxHeight:600px;
$minHeight:400px;
$bSize:1px;

and if i need bootstrap and my variables in an other *.css.scss file. I include this line on the top:

@import  "myAppBase";

edited Jun 20 '12 at 00:57

answered Jun 20 '12 at 00:49

theforce

1,505
1
11
13

What if I have multiple CSS files for each controller? With what you are doing with `@import "myAppBase";`, aren't you duplicating all in `myAppBase` in other CSS files? – Victor Jun 20 '12 at 14:28
I use one core sass file (like theme 1). In the admin section I have an other core File (like theme 2).in some point I use the sass/css per controller but without the core sass file (without myAppBase). I make only small adjustment for UI controls (exception). – theforce Jun 21 '12 at 13:59
1

I found the best way to work: http://stackoverflow.com/questions/9138946/proper-scss-asset-structure-in-rails – Victor Jun 21 '12 at 14:13

score 0 · Answer 2 · answered Jan 29 '13 at 03:53

0

I followed this guidelines and I was able to fix the error "undefined border-radius". https://github.com/thomas-mcdonald/bootstrap-sass

answered Jan 29 '13 at 03:53

Mukesh kumar

63
4

How to use twitter bootstrap-sass mixins

2 Answers2