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.
การแทนที่ตัวแปรภายในไฟล์ 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`
}ตัวเลือก 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-print-styles |
true(ค่าเริ่มต้น) หรือfalse |
เปิดใช้งานรูปแบบเพื่อเพิ่มประสิทธิภาพการพิมพ์ |
$enable-validation-icons |
true(ค่าเริ่มต้น) หรือfalse |
เปิดใช้งานbackground-imageไอคอนภายในอินพุตที่เป็นข้อความและบางรูปแบบที่กำหนดเองสำหรับสถานะการตรวจสอบ |
สี
ส่วนประกอบและยูทิลิตี้ต่างๆ ของ 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ไฟล์ ของ Bootstraps
สีเทา
ชุดตัวแปรสีเทาที่กว้างขวางและแผนที่ Sass scss/_variables.scssสำหรับเฉดสีเทาที่สอดคล้องกันทั่วทั้งโปรเจ็กต์ของคุณ โปรดทราบว่าสิ่งเหล่านี้คือ “สีเทาเย็น” ซึ่งมีแนวโน้มที่จะเป็นโทนสีน้ำเงินที่ละเอียดอ่อน แทนที่จะเป็นสีเทาที่เป็นกลาง
ภายใน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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--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);
}
}