ซาส

ใช้ไฟล์ Sass ต้นทางของเราเพื่อใช้ประโยชน์จากตัวแปร แผนที่ มิกซ์อิน และฟังก์ชันต่างๆ เพื่อช่วยให้คุณสร้างได้เร็วขึ้นและปรับแต่งโครงการของคุณ

ในหน้านี้

ใช้ไฟล์ Sass ต้นทางของเราเพื่อใช้ประโยชน์จากตัวแปร แผนที่ มิกซ์อิน และอื่นๆ

โครงสร้างไฟล์

เมื่อใดก็ตามที่เป็นไปได้ ให้หลีกเลี่ยงการแก้ไขไฟล์หลักของ Bootstrap สำหรับ Sass นั่นหมายถึงการสร้างสไตล์ชีตของคุณเองที่นำเข้า Bootstrap เพื่อให้คุณสามารถแก้ไขและขยายได้ สมมติว่าคุณใช้ตัวจัดการแพ็คเกจเช่น npm คุณจะมีโครงสร้างไฟล์ที่มีลักษณะดังนี้:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

หากคุณดาวน์โหลดไฟล์ต้นทางของเราและไม่ได้ใช้ตัวจัดการแพ็คเกจ คุณจะต้องสร้างสิ่งที่คล้ายกับโครงสร้างนั้นด้วยตนเอง โดยแยกไฟล์ต้นฉบับของ Bootstrap ออกจากไฟล์ของคุณเอง

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

นำเข้า

ใน ของcustom.scssคุณ คุณจะนำเข้าไฟล์ Sass ต้นทางของ Bootstrap คุณมีสองตัวเลือก: รวม Bootstrap ทั้งหมดหรือเลือกชิ้นส่วนที่คุณต้องการ เราสนับสนุนสิ่งหลัง แม้ว่าโปรดทราบว่ามีข้อกำหนดและการพึ่งพาบางอย่างในส่วนประกอบของเรา คุณจะต้องรวม JavaScript สำหรับปลั๊กอินของเราด้วย

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

ด้วยการตั้งค่าดังกล่าว คุณสามารถเริ่มแก้ไขตัวแปร Sass และแมปในcustom.scssไฟล์ . คุณยังสามารถเริ่มเพิ่มส่วนต่างๆ ของ Bootstrap ใต้// Optionalส่วนได้ตามต้องการ เราแนะนำให้ใช้กองนำเข้าแบบเต็มจากbootstrap.scssไฟล์ของเราเป็นจุดเริ่มต้นของคุณ

ค่าเริ่มต้นของตัวแปร

ตัวแปร Sass ทุกตัวใน Bootstrap มี!defaultแฟล็กที่ให้คุณแทนที่ค่าเริ่มต้นของตัวแปรใน Sass ของคุณเองโดยไม่ต้องแก้ไขซอร์สโค้ดของ Bootstrap คัดลอกและวางตัวแปรตามต้องการ แก้ไขค่า และนำ!defaultแฟล็กออก หากกำหนดตัวแปรแล้ว ตัวแปรนั้นจะไม่ถูกกำหนดใหม่ด้วยค่าเริ่มต้นใน Bootstrap

คุณจะพบรายการตัวแปรทั้งหมดของ Bootstrap ได้ในscss/_variables.scss. ตัวแปรบางตัวถูกตั้งค่าเป็นnullตัวแปรเหล่านี้จะไม่แสดงคุณสมบัติเว้นแต่จะถูกแทนที่ในการกำหนดค่าของคุณ

การแทนที่ตัวแปรต้องมาหลังจากที่นำเข้าฟังก์ชันของเราแล้ว แต่ก่อนการนำเข้าส่วนที่เหลือ

นี่คือตัวอย่างที่เปลี่ยนbackground-colorและcolorสำหรับ<body>เมื่อนำเข้าและรวบรวม Bootstrap ผ่าน npm:

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

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

ทำซ้ำตามความจำเป็นสำหรับตัวแปรใดๆ ใน Bootstrap รวมถึงตัวเลือกส่วนกลางด้านล่าง

เริ่มต้นกับ Bootstrap ผ่าน npm ด้วยโครงการเริ่มต้นของเรา! ไปที่ที่ เก็บ เทมเพลต twbs/bootstrap-npm-starterเพื่อดูวิธีสร้างและปรับแต่ง Bootstrap ในโครงการ npm ของคุณเอง รวมไอคอนคอมไพเลอร์ Sass, Autoprefixer, Stylelint, PurgeCSS และ Bootstrap

แผนที่และลูป

Bootstrap มีแผนที่ Sass จำนวนหนึ่ง คู่ค่าคีย์ที่ช่วยให้สร้างกลุ่มของ CSS ที่เกี่ยวข้องได้ง่ายขึ้น เราใช้แผนที่ Sass สำหรับสี จุดพักตาราง และอื่นๆ เช่นเดียวกับตัวแปร Sass แผนที่ Sass ทั้งหมดมี!defaultแฟล็กและสามารถแทนที่และขยายได้

แผนที่ Sass บางส่วนของเราถูกรวมเป็นแผนที่ว่างโดยค่าเริ่มต้น สิ่งนี้ทำเพื่อให้ง่ายต่อการขยายแผนที่ Sass ที่กำหนด แต่ต้องใช้ค่าใช้จ่ายในการลบรายการออกจากแผนที่ยากขึ้นเล็กน้อย

แก้ไขแผนที่

ตัวแปรทั้งหมดใน$theme-colorsแผนที่ถูกกำหนดให้เป็นตัวแปรแบบสแตนด์อโลน หากต้องการแก้ไขสีที่มีอยู่ใน$theme-colorsแผนที่ของเรา ให้เพิ่มข้อมูลต่อไปนี้ในไฟล์ Sass ที่คุณกำหนดเอง:

$primary: #0074d9;
$danger: #ff4136;

ต่อมา ตัวแปรเหล่านี้ถูกตั้งค่าใน$theme-colorsแผนที่ของ Bootstrap:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

เพิ่มในแผนที่

เพิ่มสีใหม่ให้กับ$theme-colorsหรือแผนที่อื่นๆ โดยการสร้างแผนที่ Sass ใหม่ด้วยค่าที่คุณกำหนดเองและรวมเข้ากับแผนที่ดั้งเดิม ในกรณีนี้ เราจะสร้าง$custom-colorsแผนที่ใหม่และรวมเข้า$theme-colorsกับ

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

ลบออกจากแผนที่

ในการลบสีออกจาก$theme-colorsหรือแผนที่อื่น ให้map-removeใช้ โปรดทราบว่าคุณต้องแทรก$theme-colorsระหว่างข้อกำหนดของเราหลังคำจำกัดความในvariablesและก่อนการใช้งานในmaps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

คีย์ที่จำเป็น

Bootstrap ถือว่ามีคีย์เฉพาะบางอย่างในแผนที่ Sass ในขณะที่เราใช้และขยายสิ่งเหล่านี้เอง เมื่อคุณปรับแต่งแผนที่ที่รวมไว้ คุณอาจพบข้อผิดพลาดที่มีการใช้คีย์ของแผนที่ Sass เฉพาะ

ตัวอย่างเช่น เราใช้primary, success, และdangerคีย์จาก$theme-colorsลิงก์ ปุ่ม และสถานะของฟอร์ม การแทนที่ค่าของคีย์เหล่านี้ไม่ควรมีปัญหา แต่การลบออกอาจทำให้เกิดปัญหาในการรวบรวม Sass ในกรณีเหล่านี้ คุณจะต้องแก้ไขโค้ด Sass ที่ใช้ค่าเหล่านั้น

ฟังก์ชั่น

สี

ถัดจากแผนที่ Sass ที่ เรามี สีของธีมยังสามารถใช้เป็นตัวแปรแบบสแตนด์อโลนได้ เช่น$primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

คุณสามารถทำให้สีสว่างขึ้นหรือมืดลงได้ด้วย Bootstrap's tint-color()และshade-color()ฟังก์ชันต่างๆ ฟังก์ชันเหล่านี้จะผสมสีกับสีดำหรือสีขาว ซึ่งต่างจากฟังก์ชันดั้งเดิมของ Sass lighten()และdarken()ฟังก์ชันที่จะเปลี่ยนความสว่างตามจำนวนที่กำหนด ซึ่งมักจะไม่ทำให้เกิดเอฟเฟกต์ที่ต้องการ

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

ในทางปฏิบัติ คุณจะต้องเรียกใช้ฟังก์ชันและส่งผ่านพารามิเตอร์สีและน้ำหนัก

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

ความคมชัดของสี

เพื่อให้เป็นไปตามข้อกำหนดคอนทราสต์ของWeb Content Accessibility Guidelines (WCAG)ผู้เขียนต้องระบุคอนทราสต์สีข้อความขั้นต่ำ 4.5:1และคอนทราสต์สีที่ไม่ใช่ข้อความขั้นต่ำ 3:1โดยมีข้อยกเว้นน้อยมาก

เพื่อช่วยในเรื่องนี้ เราได้รวมcolor-contrastฟังก์ชันไว้ใน Bootstrap ใช้อัลกอริธึมอัตราส่วนคอนทราสต์ WCAGสำหรับการคำนวณคอนทราสต์เกณฑ์ตามความสว่างสัมพัทธ์ในsRGBพื้นที่สีเพื่อคืนค่าคอนทราสต์ของแสง ( #fff), มืด ( #212529) หรือสีดำ ( #000) โดยอัตโนมัติตามสีพื้นฐานที่ระบุ ฟังก์ชันนี้มีประโยชน์อย่างยิ่งสำหรับมิกซ์อินหรือลูปที่คุณสร้างหลายคลาส

ตัวอย่างเช่น ในการสร้างตัวอย่างสีจาก$theme-colorsแผนที่ของเรา:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

นอกจากนี้ยังสามารถใช้สำหรับความต้องการคอนทราสต์แบบครั้งเดียว:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

คุณยังสามารถระบุสีพื้นฐานด้วยฟังก์ชันแผนที่สีของเรา:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Escape SVG

เราใช้escape-svgฟังก์ชันเพื่อหลีกเลี่ยง<, >และ#อักขระสำหรับภาพพื้นหลัง SVG เมื่อใช้escape-svgฟังก์ชัน จะต้องอ้างอิง URI ข้อมูล

ฟังก์ชันบวกและลบ

เราใช้ ฟังก์ชัน addและ เพื่อรวม ฟังก์ชันsubtractCSS calcวัตถุประสงค์หลักของฟังก์ชันเหล่านี้คือการหลีกเลี่ยงข้อผิดพลาดเมื่อมีการ0ส่งค่า "unitless" ไปยังcalcนิพจน์ นิพจน์เช่นcalc(10px - 0)จะส่งคืนข้อผิดพลาดในเบราว์เซอร์ทั้งหมด แม้จะถูกต้องทางคณิตศาสตร์

ตัวอย่างที่การคำนวณถูกต้อง:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

ตัวอย่างที่การคำนวณไม่ถูกต้อง:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

มิกซ์อิน

ไดเร็กทอรี ของเราscss/mixins/มีมิกซ์อินมากมายที่ขับเคลื่อนส่วนต่างๆ ของ Bootstrap และยังสามารถใช้ในโปรเจ็กต์ของคุณเองได้อีกด้วย

โทนสี

มีมิกซ์อินชวเลขสำหรับคิวรีprefers-color-schemeสื่อพร้อมรองรับlight, dark, และชุดสีที่กำหนดเอง

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}