web-dev-qa-db-ja.com

SASSで拡張/変更（カスタマイズ）Bootstrap 4にする方法

Bootstrapに基づいてWebサイトのテーマを作成します。 Bootstrapのデフォルトコンポーネントを拡張し、それらの一部を変更したい。このために、Bootstrap=が定義できるように定義するSASS変数へのaccessが必要なので、それらをオーバーライドできます。

クローンのBootstrap GitHubから直接変更することはできましたが、実際には良い習慣ではないと聞きました。アドバイスをください。

twitter-bootstrapsassbootstrap-4
11
Victor

SASSでBootstrap 4をオーバーライド/カスタマイズする方法は次のとおりです...

オーバーライドとカスタマイズは、Bootstrap SASSソースファイルとは別のcustom.scssファイルに保存する必要があります。このように、変更はBootstrapソースに影響を与えません。これにより、後でBootstrapの変更またはアップグレードがずっと簡単になります。

1- custom.scss...と並んで、BootstrapのSASSフォルダー構造を検討する.

|-- \bootstrap
|   |-- \scss
|   |   |-- \mixins
|   |   |-- \utilities
|   |   |-- bootstrap.scss
|   |   |-- variables.scss
|   |   |-- functions.scss
|   |   |-- ...more bootstrap scss files
|   custom.scss

2- custom.scssで、 Bootstrapファイルをインポート オーバーライドに必要です。 （通常、これは単なるvariables.scssです。より複雑なカスタマイズで、場合によっては、 functions、mixins、およびその他のBootstrapファイル。変更を加えてから、@import "bootstrap"。 _Bootstrap after変更をインポートすることが重要です...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* make changes to the !default Bootstrap variables */    
$body-color: green;

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

2a（optional）-また、既存のBootstrapクラスを拡張after@import "bootstrap";を作成して新しいカスタムクラス。たとえば、Bootstrap .row-darkクラスを拡張（継承）してから背景色を追加する新しい.rowクラスがあります。

 /* optionally create new custom classes from existing classes */
 .row-dark {
    @extend .row;
    background-color: #333333;
    color: #ffffff;
 }

3- SASSをコンパイルします（node-sass、gulp-sass、webpack/NPMなど）。 CSS出力にはオーバーライドが含まれます！ @importsが失敗した場合は、includePathsを確認することを忘れないでください。上書き可能な変数の完全なリストについては、 variables.scss ファイルを参照してください。これらもあります グローバル変数 。

CodeplyのブートストラップSASSデモ

要約すると、それがどのように機能するかです：

1_最初に、custom.scssファイルがSASSを使用して処理されると、！default値がbootstrap/variables.scssで定義されます。

2_次に、カスタム値が設定され、bootstrap/variables.scssに！default値が設定されている変数がオーバーライドされます。

3_最後に、Bootstrapがインポートされ（@import "bootstrap"）、SASSプロセッサー（A.K.A.コンパイラー）がBootstrapのデフォルトとカスタムオーバーライドの両方を使用してすべての適切なCSSを生成できるようにします。

SASSを知らない人のために、これを試してみてください tool 私が作ったもの。

参照：
SASS CSSでBootstrap 4の15列を取得する方法？
Bootstrap v4グリッドサイズ/ Sassリスト
Bootstrap CSSテンプレートのカスタマイズ
Bootstrap 4およびSASSの拡張

31
Zim

SassはRubyで書かれているため、Rubyをダウンロードします。「Rubyでコマンドを開始する」コマンドを開き、次のように入力します。

gem install sass

Macosでは、Rubyはすでにインストールされています。そのため、ターミナルでは：

Sudo gem install sass

パッケージマネージャーを介してbootstrap=をインストールした場合、このコードをmain.scssに記述します

@import "../node_modules/bootstrap/scss/bootstrap";

次に、main.scssまたはmain.cssファイルを保持する作業ディレクトリに移動します。次のコードをコマンドラインに入力します。

sass main.scss main.css

これにより、sassのコンパイルがcssに初期化されます。

bootstrapソースファイルをダウンロードした場合は、ソースフォルダーで「scss」フォルダーを見つけます。

BOOTSTRAP\bootstrap-4.2.1\bootstrap-4.2.1\scss

すべてのスタイリングファイルを保持するプロジェクトのスタイルフォルダーにコピーします。css、scss、bootstrap、「bootstrap.scss」ファイルをmain.scssにインポートします。

@import "./scss/bootstrap.scss";

そして、次のコードを入力してコンパイルを初期化します。

sass main.scss main.css

最後に、次のように入力できます。

sass --watch main.scss:main.css //this should be running

main.cssのすべての変更を監視するにはDONT FORGET：CSSコードをmain.scssに書き込み、sassでそれをmain.cssにコンパイルし、htmlのmain.cssファイルをリンクします。

Visual Studioコードを使用している場合は、「Live Sass Compiler」拡張機能をインストールできます。下に「Watch Sass」ボタンが表示されます。スタイルフォルダーにmain.scssファイルを作成し、上記で説明した方法でファイルをインポートした後、「ウォッチSass」ボタンをクリックすると、コンパイルが開始されます。

ここでbootstrapフォルダー、scssフォルダーの下に_variables.scssフォルダーがあります。これにはbootstrap=変数。境界半径を変更したいとしましょう。 main.scssファイル、ブートストラップをインポートする前：

$border-radius:10rem
@import "./scss/bootstrap.scss";
3
Yilmaz

BootstrapのGithubバージョンは、基盤自体が絶えず更新されているため、常に変化します。もちろん、Bootstrapが構造化され、必ずしもコンパイルされないSASSコンパイラがエクスポートする方法。

通常、プロジェクト全体をどのように構成するかを示します

/style/
/style/theme.scss
/style/theme.min.css
/style/bootstrap.scss
/style/bootstrap.min.css
/style/bootstrap/{subfiles}
/style/bootstrap/mixins/{subfiles}
/style/bootstrap/utilities/{subfiles}

/scripts/
/scripts/bootstrap.min.js
/scripts/main.min.js
/scripts/bootstrap/

これは、sassおよびjs minifierがあることを前提としています。

1
Sazzad Hossain