9

bootstrap-sass を使用すると、ブートストラップをインポートする前に変数を定義することで変数をオーバーロードできます (ドキュメントのように)。

$btnPrimaryBackground: #f00;
@import "bootstrap";

残念ながら、SASS では再定義/オーバーロードできるため、ミックスインでは機能しません。

Twitter ブートストラップ mixins をオーバーロードするための最良の方法は何でしょうか? これまでのところ、それを行う唯一の方法は、lib で gem を複製し、modify _mixins.scss を追加するか、後でカスタム _mixins.scss を含めるようです。

これをより保守しやすくするためのアイデアはありますか?

4

2 に答える 2

5

投稿Reopen SASS Mixinsによると、ミックスインをオーバーライドすることが可能です。import "bootstrap";ただし、 Bootstrap 内で定義されたものを呼び出す前にカスタムのものを定義すると、それがオーバーライドされます。一方、インポート後に配置すると、mixin を再定義するまでにすべての Bootstrap コードのコンパイルが完了します ( Issue #240およびIssue #420を参照)。この後者のオプションのサポートが将来追加される可能性があります。

それまでは、使用する前に mixin を再定義できるように、変数と mixin を_bootstrap.scssから分離するという (テストしていない) 考えられる 1 つのオプションがあります。

まず、_bootstrap.scssの最初の 2 つの import ステートメントをコメントアウトします。

// Core variables and mixins
//@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
//@import "bootstrap/mixins";

次に、Bootstrap をインポートする SASS ファイルで、それらを含めるように変更する必要があります。

$btnPrimaryBackground: #f00;

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Override of mixin for form field states
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
  // customization here
}

@import "bootstrap";

このワークフローでは、引き続きベンダー ファイルを編集しますが、少なくとも数行をコメント アウトするだけに制限できます。

于 2012-10-06T16:30:15.183 に答える