ซาส
ใช้ไฟล์ 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";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";
// 5. 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";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@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
}
}