Change Bootstrap SASS border-radius (and other mixins) - Rails

Question

I'm using the rails gem Bootstrap SASS, and was wondering how I can overwrite some of the mixins. Specifically border radius and the like.

I thought I could simply overwrite it like:

@import "bootstrap";
@import "bootstrap-responsive";

    @mixin border-radius($radius: 1px) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
              border-radius: $radius;
    }

But that doesn't seem to do squat! Any ideas?

Bootstrap SASS - Mixins

Solution 1

That is actually a mixin with an argument, SASS calls it a "mixin" but it's really a parametric or dynamic mixin. But to clarify your question, do you want to change the default value for the border radius mixin radius, or do you want to do it on the fly on a class by class basis? If you are looking to change the default you should do it directly in the Bootstrap mixin.scss file.

But if you want the latter, you just add the mixin to any class the same as you would add a property such as font-size, but then you pass in the value you wish to declare each time you use the mixin. Like this:

.giant-box {  
   width: 400px;
   height: 400px;
   background-color: #900;
   @include border-radius(20px);  
}

.small-box {  
   width: 10px;
   height: 10px;
   background-color: #900;
   @include border-radius(3px);  
}

In LESS it would look like this:

.giant-box {  
   width: 400px;
   height: 400px;
   background-color: #900;
   .border-radius(20px);  
}

Solution 2

Check the Customize and Download page on the Bootstrap site. There are list of LESS variables listed on the page.

Usually the SASS variables are the same but with '$' instead of a '@'. To customize bootstrap without having to re-download everything after changing one or two variables you can instead do this in your .scss file:

$border-radius-base: 0;
@import "bootstrap";

Solution 3

If you want to overwrite the Bootstrap variables, you need to do so before the import. E.g.

$baseFontFamily: $serifFontFamily; // Use serif fonts instead of sans-serifs
@import "bootstrap";
@import "bootstrap-responsive";

Comments

[Galaxy]

I wanted to know if I could change the default value. I don't have direct access to the mixin file for bootstrap (I'm using a gem that inserts it into middleware), but it seems I should maybe include manually in the assets. Thanks for you help, this clears it up!

[sixty4bit]

I am getting "undefined mixin 'border-radius'" (rails bootstrap-sass gem)