Source

Bootstrap ธีม

กำหนด Bootstrap 4 เองด้วยตัวแปร Sass ในตัวใหม่ของเราสำหรับการตั้งค่าสไตล์สากลสำหรับชุดรูปแบบที่ง่ายและการเปลี่ยนแปลงองค์ประกอบ

บทนำ

ใน Bootstrap 3 ธีมส่วนใหญ่ขับเคลื่อนโดยการแทนที่ตัวแปรใน LESS, CSS ที่กำหนดเอง และสไตล์ชีตธีมแยกต่างหากที่เรารวมไว้ในdistไฟล์ ของเรา ด้วยความพยายาม คุณสามารถออกแบบรูปลักษณ์ของ Bootstrap 3 ใหม่ได้อย่างสมบูรณ์โดยไม่ต้องแตะไฟล์หลัก Bootstrap 4 ให้แนวทางที่คุ้นเคย แต่แตกต่างกันเล็กน้อย

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

ซาส

ใช้ไฟล์ Sass ต้นทางของเราเพื่อใช้ประโยชน์จากตัวแปร แผนที่ มิกซ์อิน และอื่นๆ ในงานสร้างของเรา เราได้เพิ่มความแม่นยำในการปัดเศษของ Sass เป็น 6 (โดยค่าเริ่มต้นคือ 5) เพื่อป้องกันปัญหาในการปัดเศษของเบราว์เซอร์

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

เมื่อใดก็ตามที่เป็นไปได้ ให้หลีกเลี่ยงการแก้ไขไฟล์หลักของ 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

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

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

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

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

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

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

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

การแทนที่ตัวแปรภายในไฟล์ Sass เดียวกันอาจมาก่อนหรือหลังตัวแปรเริ่มต้น อย่างไรก็ตาม เมื่อแทนที่ไฟล์ Sass การแทนที่ของคุณต้องมาก่อนนำเข้าไฟล์ Sass ของ Bootstrap

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

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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

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

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

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

แก้ไขแผนที่

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

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

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

หากต้องการเพิ่มสีใหม่ ให้$theme-colorsเพิ่มคีย์และค่าใหม่:

$theme-colors: (
  "custom-color": #900
);

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

ในการลบสีออกจาก$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";
...

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

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

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

ฟังก์ชั่น

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

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

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

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

นอกจากนี้เรายังมีฟังก์ชันอื่นในการรับระดับสีเฉพาะจาก$theme-colorsแผนที่ ค่าระดับลบจะทำให้สีสว่างขึ้น ในขณะที่ระดับที่สูงกว่าจะมืดลง

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

ในทางปฏิบัติ คุณจะต้องเรียกใช้ฟังก์ชันและส่งผ่านพารามิเตอร์ 2 ตัว ได้แก่ ชื่อของสีจาก$theme-colors(เช่น หลักหรืออันตราย) และระดับตัวเลข

.custom-element {
  color: theme-color-level(primary, -10);
}

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

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

ฟังก์ชันเพิ่มเติมที่เรารวมไว้ใน Bootstrap คือฟังก์ชันความคมชัดของสีcolor-yiq. ใช้พื้นที่สี YIQเพื่อคืนค่าสีคอนทราสต์ของแสง ( #fff) หรือสีเข้ม ( #111) โดยอัตโนมัติตามสีพื้นฐานที่ระบุ ฟังก์ชันนี้มีประโยชน์อย่างยิ่งสำหรับมิกซ์อินหรือลูปที่คุณสร้างหลายคลาส

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

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

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

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

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

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Escape SVG

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

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

เราใช้ ฟังก์ชัน 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);
}

ตัวเลือก Sass

ปรับแต่ง Bootstrap 4 ด้วยไฟล์ตัวแปรที่กำหนดเองในตัวของเรา และสลับการตั้งค่า CSS ทั่วโลกได้อย่างง่ายดายด้วย$enable-*ตัวแปร Sass ใหม่ แทนที่ค่าของตัวแปรและคอมไพล์ใหม่npm run testตามต้องการ

คุณสามารถค้นหาและปรับแต่งตัวแปรเหล่านี้สำหรับตัวเลือกส่วนกลางที่สำคัญได้ในscss/_variables.scssไฟล์ ของ Bootstrap

ตัวแปร ค่านิยม คำอธิบาย
$spacer 1rem(ค่าเริ่มต้น) หรือค่าใดๆ > 0 ระบุค่าตัวแบ่งเริ่มต้นเพื่อสร้างยูทิลิตี้ตัวเว้นวรรคโดยทาง โปรแกรม
$enable-rounded true(ค่าเริ่มต้น) หรือfalse เปิดใช้งานborder-radiusสไตล์ที่กำหนดไว้ล่วงหน้าในส่วนประกอบต่างๆ
$enable-shadows trueหรือfalse(ค่าเริ่มต้น) เปิดใช้งานbox-shadowสไตล์ที่กำหนดไว้ล่วงหน้าในส่วนประกอบต่างๆ
$enable-gradients trueหรือfalse(ค่าเริ่มต้น) เปิดใช้งานการไล่ระดับสีที่กำหนดไว้ล่วงหน้าผ่านbackground-imageสไตล์บนส่วนประกอบต่างๆ
$enable-transitions true(ค่าเริ่มต้น) หรือfalse เปิดใช้งานtransitions ที่กำหนดไว้ล่วงหน้าบนส่วนประกอบต่างๆ
$enable-prefers-reduced-motion-media-query true(ค่าเริ่มต้น) หรือfalse เปิดใช้งานการprefers-reduced-motionสืบค้นข้อมูลสื่อซึ่งจะระงับภาพเคลื่อนไหว/การเปลี่ยนแปลงบางอย่างตามการตั้งค่าเบราว์เซอร์/ระบบปฏิบัติการของผู้ใช้
$enable-hover-media-query trueหรือfalse(ค่าเริ่มต้น) เลิกใช้
$enable-grid-classes true(ค่าเริ่มต้น) หรือfalse เปิดใช้งานการสร้างคลาส CSS สำหรับระบบกริด (เช่น , .container, .row, .col-md-1ฯลฯ )
$enable-caret true(ค่าเริ่มต้น) หรือfalse เปิดใช้งานคาเร็ตองค์ประกอบหลอกบน.dropdown-toggle.
$enable-pointer-cursor-for-buttons true(ค่าเริ่มต้น) หรือfalse เพิ่มเคอร์เซอร์ "มือ" ให้กับองค์ประกอบปุ่มที่ไม่ปิดใช้งาน
$enable-print-styles true(ค่าเริ่มต้น) หรือfalse เปิดใช้งานรูปแบบเพื่อเพิ่มประสิทธิภาพการพิมพ์
$enable-responsive-font-sizes trueหรือfalse(ค่าเริ่มต้น) เปิดใช้งานขนาดฟอนต์ที่ตอบสนอง
$enable-validation-icons true(ค่าเริ่มต้น) หรือfalse เปิดใช้งานbackground-imageไอคอนภายในอินพุตที่เป็นข้อความและบางรูปแบบที่กำหนดเองสำหรับสถานะการตรวจสอบ
$enable-deprecation-messages trueหรือfalse(ค่าเริ่มต้น) ตั้งค่าให้trueแสดงคำเตือนเมื่อใช้มิกซ์อินและฟังก์ชันที่เลิกใช้แล้วซึ่งวางแผนจะลบv5ใน

สี

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

ทุกสี

สีทั้งหมดที่มีใน Bootstrap 4 มีให้เลือกเป็นตัวแปร Sass และแผนที่ Sass ในscss/_variables.scssไฟล์ สิ่งนี้จะขยายออกไปในรุ่นย่อยต่อมาเพื่อเพิ่มเฉดสีเพิ่มเติม เช่นเดียวกับจานสีเทา ที่ เรารวมไว้แล้ว

สีฟ้า
คราม
สีม่วง
สีชมพู
สีแดง
ส้ม
สีเหลือง
เขียว
นกเป็ดน้ำ
สีฟ้า

คุณสามารถใช้สิ่งเหล่านี้ใน Sass ของคุณได้อย่างไร:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

นอกจากนี้ยังมีคลาสยูทิลิตี้สีcolor สำหรับการตั้งค่า และbackground-color.

ในอนาคต เราจะตั้งเป้าที่จะให้แผนที่ Sass และตัวแปรสำหรับเฉดสีของแต่ละสี ตามที่เราทำกับสีโทนสีเทาด้านล่าง

ธีมสี

เราใช้ชุดย่อยของสีทั้งหมดเพื่อสร้างจานสีที่มีขนาดเล็กลงสำหรับการสร้างแบบแผนชุดสี นอกจากนี้ยังมีให้ใช้งานในรูปแบบตัวแปร Sass และแผนที่ Sass ในscss/_variables.scssไฟล์ ของ Bootstrap

หลัก
รอง
ความสำเร็จ
อันตราย
คำเตือน
ข้อมูล
แสงสว่าง
มืด

สีเทา

ชุดตัวแปรสีเทาที่กว้างขวางและแผนที่ Sass scss/_variables.scssสำหรับเฉดสีเทาที่สอดคล้องกันทั่วทั้งโปรเจ็กต์ของคุณ โปรดทราบว่าสิ่งเหล่านี้คือ “สีเทาเย็น” ซึ่งมีแนวโน้มที่จะเป็นโทนสีน้ำเงินที่ละเอียดอ่อน แทนที่จะเป็นสีเทาที่เป็นกลาง

100
200
300
400
500
600
700
800
900

ภายในscss/_variables.scssคุณจะพบตัวแปรสีของ Bootstrap และแผนที่ Sass นี่คือตัวอย่าง$colorsแผนที่ Sass:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

เพิ่ม ลบ หรือแก้ไขค่าภายในแผนที่เพื่ออัปเดตวิธีการใช้ในองค์ประกอบอื่นๆ มากมาย น่าเสียดาย ณ เวลานี้ ไม่ใช่ทุกองค์ประกอบที่ใช้แผนที่ Sass นี้ การอัปเดตในอนาคตจะพยายามปรับปรุงสิ่งนี้ ก่อนหน้านั้น ให้วางแผนการใช้${color}ตัวแปรและแผนที่ Sass นี้

ส่วนประกอบ

ส่วนประกอบและยูทิลิตี้ของ Bootstrap จำนวนมากถูกสร้างขึ้นด้วย@eachการวนซ้ำที่วนซ้ำบนแผนที่ Sass สิ่งนี้มีประโยชน์อย่างยิ่งในการสร้างตัวแปรของส่วนประกอบโดยเรา$theme-colorsและสร้างตัวแปรที่ตอบสนองได้สำหรับแต่ละเบรกพอยต์ เมื่อคุณปรับแต่งแผนที่ Sass เหล่านี้และคอมไพล์ใหม่ คุณจะเห็นการเปลี่ยนแปลงของคุณสะท้อนให้เห็นในลูปเหล่านี้โดยอัตโนมัติ

ตัวดัดแปลง

คอมโพเนนต์ของ Bootstrap จำนวนมากสร้างขึ้นด้วยวิธีคลาสตัวดัดแปลงฐาน ซึ่งหมายความว่าการจัดสไตล์ส่วนใหญ่จะรวมอยู่ในคลาสพื้นฐาน (เช่น.btn) ในขณะที่รูปแบบต่างๆ นั้นจำกัดอยู่ที่คลาสตัวปรับแต่ง (เช่น.btn-danger) คลาสตัวปรับแต่งเหล่านี้สร้างขึ้นจาก$theme-colorsแผนที่เพื่อปรับแต่งหมายเลขและชื่อของคลาสตัวปรับแต่งของเรา

ต่อไปนี้คือตัวอย่างสองตัวอย่างเกี่ยวกับวิธีที่เราวนซ้ำบน$theme-colorsแผนที่เพื่อสร้างตัวแก้ไข.alertองค์ประกอบและ.bg-*ยูทิลิตี้พื้นหลัง ทั้งหมดของเรา

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

ตอบสนอง

ลูป Sass เหล่านี้ไม่ได้จำกัดเฉพาะแผนที่สีเช่นกัน คุณยังสามารถสร้างรูปแบบที่ตอบสนองของส่วนประกอบหรือยูทิลิตี้ของคุณได้ ยกตัวอย่างยูทิลิตีการจัดแนวข้อความที่ตอบสนองซึ่งเราผสมผสานการ@eachวนซ้ำสำหรับ$grid-breakpointsแผนที่ Sass กับการสืบค้นสื่อ

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

หากคุณต้องการแก้ไข your $grid-breakpointsการเปลี่ยนแปลงของคุณจะนำไปใช้กับลูปทั้งหมดที่วนซ้ำบนแผนที่นั้น

ตัวแปร CSS

Bootstrap 4 มีคุณสมบัติที่กำหนดเอง (ตัวแปร) ของ CSS ประมาณสองโหล ใน CSS ที่คอมไพล์แล้ว ค่าเหล่านี้ช่วยให้เข้าถึงค่าที่ใช้กันทั่วไปได้ง่าย เช่น สีของธีม จุดพัก และกองแบบอักษรหลักเมื่อทำงานใน Inspector ของเบราว์เซอร์ แซนด์บ็อกซ์โค้ด หรือการสร้างต้นแบบทั่วไป

ตัวแปรที่มีอยู่

นี่คือตัวแปรที่เรารวมไว้ (โปรดทราบว่า:rootจำเป็นต้องมี) อยู่ใน_root.scssไฟล์ ของเรา

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ตัวอย่าง

ตัวแปร CSS มีความยืดหยุ่นคล้ายกับตัวแปรของ Sass แต่ไม่จำเป็นต้องคอมไพล์ก่อนส่งไปยังเบราว์เซอร์ ตัวอย่างเช่น เรากำลังรีเซ็ตรูปแบบแบบอักษรและลิงก์ของหน้าเว็บด้วยตัวแปร CSS

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

ตัวแปรเบรกพอยต์

แม้ว่าในตอนแรกเราจะรวมเบรกพอยต์ไว้ในตัวแปร CSS ของเรา (เช่น--breakpoint-md) สิ่งเหล่านี้ไม่ได้รับการสนับสนุนในการสืบค้นสื่อแต่ยังคงสามารถใช้ภายในชุดกฎในการสืบค้นสื่อ ตัวแปรเบรกพอยต์เหล่านี้ยังคงอยู่ใน CSS ที่คอมไพล์แล้วสำหรับความเข้ากันได้แบบย้อนหลัง เนื่องจาก JavaScript สามารถใช้งานได้ เรียนรู้เพิ่มเติมใน ข้อมูลจำเพาะ

ต่อไปนี้คือตัวอย่างที่ไม่รองรับ:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

และนี่คือตัวอย่างที่รองรับ:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}