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

Answer 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);  
}