通過NPM安裝Bootstrap，并使用其SASS文件代替預(yù)編譯CSS。 2。創(chuàng)建一個custom.scss文件和覆蓋Bootstrap的默認(rèn)變量，例如$ primary，$ font-farmily-sans-serif或$ enable-shadows，然后再導(dǎo)入引自bootstrap。 3.使用SASS地圖（例如$ them-them-colors或$ break-breakpoints）自定義復(fù)雜組件，在導(dǎo)入之前重新定義它們。 4.通過僅導(dǎo)入必要的引導(dǎo)組件（例如按鈕或Navbar）功能，變量和Mixins來優(yōu)化輸出。 5。使用DART SASS，構(gòu)建工具或軟件包的custal.scss將Custom.scss編譯為CSS.JSON腳本，以確保更改在最終構(gòu)建中反映出來。始終在進口和編譯之前覆蓋以生成量身定制的高效樣式。

使用SASS自定義引導(dǎo)程序是一種有力的方法，可以根據(jù)您的設(shè)計需求來量身定制框架，而無需在普通CSS中覆蓋框架。您沒有直接修改引導(dǎo)程序，而是使用SASS變量，地圖和Mixins生成自定義構(gòu)建。這是正確的方法。

?1。設(shè)置帶有SASS的引導(dǎo)程序

首先，確保您使用的是Bootstrap的Sass版本（不是預(yù)編譯CSS）。最簡單的方法是通過NPM：

 NPM安裝引導(dǎo)程序

這安裝了Bootstrap的源文件，包括所需的.scss文件。

然后，創(chuàng)建您的主SASS文件（例如， custom.scss ）并導(dǎo)入Bootstrap：

 // custom.scss
@import“ ../node_modules/bootstrap/scss/bootstrap”;

此時，您將獲得默認(rèn)的引導(dǎo)程序。要自定義，您將在導(dǎo)入之前覆蓋設(shè)置。

？ 2。使用SASS變量自定義

Bootstrap使用SASS變量用于顏色，間距，字體，斷點等。您可以通過在導(dǎo)入引導(dǎo)程序之前重新定義它們來覆蓋它們。

 // custom.scss

//覆蓋默認(rèn)變量
$主：＃ff6b35;
$ secondary：＃6D4C41;
$ font-family-sans-serif：'Helvetica neue'，helvetica，arial，sans-serif;
$ enable-ounded：false;
$ enable-shadows：true;

//導(dǎo)入引導(dǎo)程序（在您的覆蓋之后）
@import“ ../node_modules/bootstrap/scss/bootstrap”;

？重要：在@import "bootstrap";之前，請始終覆蓋變量； 。 SASS變量僅在消耗之前定義時才使用。

您可以在Bootstrap的官方文檔或來源（ _variables.scss ）中找到所有可用的變量。

？ 3。使用SASS地圖自定義組件

Bootstrap使用Sass Maps進行更復(fù)雜的自定義（例如主題顏色，網(wǎng)格斷點或車身版式）。

例如，擴展$theme-colors圖：

 $主題色：（（
  “危險”：＃D6293E，
  “信息”：＃17a2b8，
  “警告”：＃ffc107，
  “ primary”：＃ff6b35，
  “黑暗”：＃212529，
  “ light”：＃f8f9fa，
  “成功”：＃28A745
）；

或修改$grid-breakpoints映射以調(diào)整響應(yīng)行為：

 $網(wǎng)格破壞點：（
  XS：0，
  SM：576px，
  MD：768px，
  LG：992PX，
  XL：1200px，
  xxl：1400px
）；

同樣，在導(dǎo)入bootstrap之前定義這些。

？ 4。僅導(dǎo)入您需要的東西（優(yōu)化捆綁尺寸）

而不是導(dǎo)入所有引導(dǎo)程序，而是僅導(dǎo)入您使用的組件：

 // custom.scss

// 1。包括您的變量覆蓋
$主：＃ff6b35;
$ enable-ounded：false;

// 2。必要：引導(dǎo)功能，變量，混音
@import“ ../node_modules/bootstrap/scss/functions”;
@Import“ ../ node_modules/bootstrap/scss/variables”;
@Import“ ../ node_modules/bootstrap/scss/mixins”;

// 3?？蛇x：導(dǎo)入單個組件
@Import“ ../ node_modules/bootstrap/scss/root”;
@Import“ ../ node_modules/bootstrap/scss/reboot”;
@import“ ../ node_modules/bootstrap/scss/type”;
@Import“ ../ node_modules/bootstrap/scss/buttons”;
@import“ ../ node_modules/bootstrap/scss/forms”;
@Import“ ../ node_modules/bootstrap/scss/navbar”;

這會減小文件大小并為您提供完整的控制。

??注意：如果您覆蓋變量，首先導(dǎo)入functions ，則將variables ，然后覆蓋，然后覆蓋mixins ，因為某些變量取決于函數(shù)。

？員5。編譯您的雜物

使用SASS編譯器生成CSS。您可以使用：

• DART SASS CLI ：

   sass custom.scss custom.css

• 構(gòu)建使用SASS插件的工具，例如WebPack，Vite或Gulp。

• package.json中的節(jié)點腳本：

   “腳本”：{
    “ build-css”：“ sass src/scss/custom.scs public/css/custom.css-watch”
  }

  ---

  ?摘要：最佳實踐

  • ?使用node_modules/bootstrap/scss/作為導(dǎo)入源。
  • ?在導(dǎo)入引導(dǎo)程序之前覆蓋變量和地圖。
  • ?通過SASS自定義顏色，字體，半徑，陰影等。
  • ?僅導(dǎo)入所需的組件來保持CSS精益。
  • ?進行更改時重新編譯SASS。

  ---

  就是這樣。使用Sass，您不會與Bootstrap作斗爭 - 您正在從內(nèi)部塑造它。基本上只是覆蓋，導(dǎo)入和編譯。一旦您知道訂單，就不難。

  以上是如何使用Sass自定義引導(dǎo)程序？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！