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

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

?1。設置帶有SASS的引導程序

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

 NPM安裝引導程序

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

然後，創(chuàng)建您的主SASS文件（例如， custom.scss ）並導入Bootstrap：

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

此時，您將獲得默認的引導程序。要自定義，您將在導入之前覆蓋設置。

？ 2。使用SASS變量自定義

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

 // custom.scss

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

//導入引導程序（在您的覆蓋之後）
@import“ ../node_modules/bootstrap/scss/bootstrap”;

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

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

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

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

例如，擴展$theme-colors圖：

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

或修改$grid-breakpoints映射以調整響應行為：

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

同樣，在導入bootstrap之前定義這些。

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

而不是導入所有引導程序，而是僅導入您使用的組件：

 // custom.scss

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

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

// 3。可選：導入單個組件
@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”;

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

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

？員5。編譯您的雜物

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

• DART SASS CLI ：

   sass custom.scss custom.css

• 構建使用SASS插件的工具，例如WebPack，Vite或Gulp。

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

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

  ---

  ?摘要：最佳實踐

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

  ---

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

  以上是如何使用Sass自定義引導程序？的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！