4

rails gem Bootstrap SASSを使用していますが、ミックスインの一部を上書きするにはどうすればよいか疑問に思っていました。具体的には、境界半径など。

私はそれを次のように単純に上書きできると思いました：

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

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

しかし、それはしゃがむようには見えません！何か案は？

ブートストラップSASS-ミックスイン

4

4 に答える 4

6

これは実際には引数付きのミックスインであり、SASSはそれを「ミックスイン」と呼んでいますが、実際にはパラメトリックまたは動的ミックスインです。しかし、質問を明確にするために、境界半径のミックスイン半径のデフォルト値を変更しますか、それともクラスごとにオンザフライで変更しますか？デフォルトを変更する場合は、Bootstrapmixin.scssファイルで直接変更する必要があります。

ただし、後者が必要な場合は、font-sizeなどのプロパティを追加するのと同じように、任意のクラスにミックスインを追加するだけです。ただし、ミックスインを使用するたびに、宣言する値を渡します。このような：

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

LESSでは、次のようになります。

.giant-box {  
   width: 400px;
   height: 400px;
   background-color: #900;
   .border-radius(20px);  
}
于 2012-04-12T07:49:28.793 に答える
3

Bootstrapサイトの[カスタマイズとダウンロード]ページを確認してください。ページにリストされているLESS変数のリストがあります。

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

$border-radius-base: 0;
@import "bootstrap";
于 2014-05-18T08:42:03.147 に答える
1

Bootstrap変数を上書きする場合は、インポートする前に上書きする必要があります。例えば

$baseFontFamily: $serifFontFamily; // Use serif fonts instead of sans-serifs
@import "bootstrap";
@import "bootstrap-responsive";
于 2012-09-15T01:30:50.907 に答える
0

これは特にゲームに遅れますが、Bootstrap 4では、次のenable-roundedようにSass変数を上書きできます。

@enable-rounded    false;
@import "~bootstrap/scss/bootstrap" /*lots of ways to do this step, see other answers herein*/

ブートストラップSassオプションのドキュメント

于 2020-09-27T01:58:18.197 に答える