Bootstrap SASSのボーダー半径（および他のミックスイン）を変更する - Rails

Question

私はレールの宝石Bootstrap SASSを使用していて、ミックスインのいくつかをどのように上書きできるのか不思議に思っていました。具体的にはボーダー半径など。

私は単にそれが好きで上書きする可能性があると思った：

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

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

しかし、それはスクワットをやっていないようです！何か案は？実際の引数とミックスインである

Bootstrap SASS - Mixins

Answer 1

、SASSは「ミックスイン」それを呼び出すが、それは本当にパラメトリックまたは動的のmixinです。しかし、あなたの質問を明確にするために、デフォルトののボーダー半径mixin半径の値を変更したいのですか、それともクラス単位でオンザフライで行うのですか？デフォルトを変更する場合は、bootstrap mixin.scssファイルで直接行う必要があります。

しかし、あなたが後者を望むならば、mixinをfont-sizeのようなプロパティを追加するのと同じクラスに追加するだけですが、mixinを使うたびに宣言したい値を渡します。このように：LESSで

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

それは次のようになります。

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

Answer 2

あなたはブートストラップ変数を上書きする場合は、インポートする前に行う必要があります。例えば。

Answer 3

ブートストラップサイトのCustomize and Downloadページを確認してください。このページにはLESS変数のリストがあります。

通常、SASS変数は同じですが、「@」の代わりに「$」が付いています。あなたの代わりにあなたの.scssファイルでこれを行うことができる1つのまたは2つの変数を変更した後再ダウンロードすべてにせずにブートストラップをカスタマイズするには：

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