ซาส
ใช้ไฟล์ 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";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. 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/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 มีแผนที่ 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
ใช้ โปรดทราบว่าคุณต้องแทรกระหว่างข้อกำหนดและตัวเลือกของเรา:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// 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%);
}
ความคมชัดของสี
เพื่อให้เป็นไปตามมาตรฐานความสามารถในการเข้าถึง WCAG 2.0 สำหรับคอนทราสต์ของสี ผู้เขียนต้องกำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1โดยมีข้อยกเว้นน้อยมาก
ฟังก์ชันเพิ่มเติมที่เรารวมไว้ใน Bootstrap คือฟังก์ชันความคมชัดของสีcolor-contrast
. ใช้อัลกอริธึม WCAG 2.0ในการคำนวณคอนทราสต์เกณฑ์ตามความสว่างสัมพัทธ์ในพื้นที่สี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
และ เพื่อรวม ฟังก์ชันsubtract
CSS 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
}
}