بوت استرپ تم

بوت استرپ 4 را با متغیرهای جدید Sass داخلی ما برای ترجیحات سبک جهانی برای تغییر قالب و اجزای آسان سفارشی کنید.

مقدمه

در بوت استرپ 3، قالب‌بندی عمدتاً توسط تغییر متغیرها در LESS، CSS سفارشی و یک شیوه نامه موضوعی جداگانه که در distفایل‌های خود گنجانده‌ایم هدایت می‌شد. با کمی تلاش، می‌توان ظاهر بوت استرپ 3 را بدون دست زدن به فایل‌های اصلی دوباره طراحی کرد. بوت استرپ 4 روشی آشنا، اما کمی متفاوت ارائه می دهد.

اکنون، قالب‌بندی توسط متغیرهای Sass، نقشه‌های Sass و CSS سفارشی انجام می‌شود. صفحه سبک تم اختصاصی دیگری وجود ندارد. در عوض، می‌توانید تم داخلی را برای افزودن گرادیان، سایه‌ها و موارد دیگر فعال کنید.

ساس

هنگام کامپایل Sass با استفاده از خط لوله دارایی خود ، از فایل‌های Sass منبع ما برای استفاده از متغیرها، نقشه‌ها، میکس‌ها و موارد دیگر استفاده کنید.

ساختار فایل

در صورت امکان، از تغییر فایل های اصلی بوت استرپ خودداری کنید. برای Sass، این به معنای ایجاد شیوه نامه خود است که Bootstrap را وارد می کند تا بتوانید آن را تغییر دهید و گسترش دهید. با فرض اینکه از یک مدیریت بسته مانند npm استفاده می کنید، ساختار فایلی به شکل زیر خواهید داشت:

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

اگر فایل‌های منبع ما را دانلود کرده‌اید و از یک مدیریت بسته استفاده نمی‌کنید، می‌خواهید به صورت دستی چیزی شبیه به آن ساختار را تنظیم کنید و فایل‌های منبع بوت استرپ را از فایل‌های منبع خود جدا نگه دارید.

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

واردات

در خود custom.scss، فایل‌های Sass منبع Bootstrap را وارد می‌کنید. شما دو گزینه دارید: همه Bootstrap را بگنجانید یا قطعات مورد نیاز خود را انتخاب کنید. ما دومی را تشویق می‌کنیم، اگرچه توجه داشته باشید که برخی الزامات و وابستگی‌ها در اجزای ما وجود دارد. همچنین باید مقداری جاوا اسکریپت را برای افزونه های ما اضافه کنید.

// 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/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. همچنین می‌توانید در // Optionalصورت نیاز بخش‌هایی از Bootstrap را در زیر بخش اضافه کنید. پیشنهاد می کنیم از پشته کامل واردات از bootstrap.scssفایل ما به عنوان نقطه شروع استفاده کنید.

پیش فرض های متغیر

هر متغیر Sass در Bootstrap شامل !defaultپرچمی است که به شما امکان می دهد بدون تغییر کد منبع Bootstrap، مقدار پیش فرض متغیر را در Sass خود لغو کنید. متغیرها را در صورت نیاز کپی و جایگذاری کنید، مقادیر آنها را تغییر دهید و !defaultپرچم را حذف کنید. اگر متغیری قبلاً اختصاص داده شده باشد، با مقادیر پیش‌فرض در Bootstrap دوباره تخصیص داده نمی‌شود.

لیست کامل متغیرهای Bootstrap را در scss/_variables.scss. برخی از متغیرها روی تنظیم شده‌اند null، این متغیرها ویژگی را خروجی نمی‌کنند مگر اینکه در پیکربندی شما لغو شوند.

نادیده گرفتن متغیرها باید بعد از وارد شدن توابع، متغیرها و میکسین های ما انجام شود، اما قبل از بقیه واردات.

در اینجا یک مثال است که هنگام وارد کردن و کامپایل Bootstrap از طریق npm ، background-colorو colorfor را تغییر می‌دهد:<body>

@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، از جمله گزینه های جهانی زیر، این کار را تکرار کنید.

با پروژه شروع ما با بوت استرپ از طریق npm شروع کنید! به مخزن قالب twbs/bootstrap-npm-starter بروید تا نحوه ساخت و سفارشی کردن Bootstrap را در پروژه npm خودتان ببینید. شامل کامپایلر Sass، Autoprefixer، Stylelint، PurgeCSS، و نمادهای 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";
...

کلیدهای مورد نیاز

بوت استرپ وجود برخی از کلیدهای خاص را در نقشه های Sass فرض می کند که ما خودمان از آنها استفاده کرده و گسترش می دهیم. همانطور که نقشه های ارائه شده را سفارشی می کنید، ممکن است در هنگام استفاده از یک کلید Sass map خاص با خطاهایی مواجه شوید.

برای مثال، ما از کلیدهای، و از primaryبرای successپیوندها ، دکمه‌ها و حالت‌های فرم استفاده می‌کنیم. جایگزین کردن مقادیر این کلیدها نباید مشکلی ایجاد کند، اما حذف آنها ممکن است باعث ایجاد مشکلاتی در کامپایل Sass شود. در این موارد، شما باید کد Sass را تغییر دهید که از آن مقادیر استفاده می کند.danger$theme-colors

کارکرد

بوت استرپ از چندین توابع 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 انتخاب کنید، دقیقاً مانند نحوه استفاده از یک متغیر رنگ از نسخه 3.

.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);
}

در عمل، شما باید تابع را فراخوانی و در دو پارامتر ارسال کنید: نام رنگ از $theme-colors(به عنوان مثال، اولیه یا خطر) و یک سطح عددی.

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

توابع اضافی را می توان در آینده اضافه کرد یا Sass سفارشی شما برای ایجاد توابع سطح برای نقشه های Sass اضافی، یا حتی اگر می خواهید پرمخاطب تر باشید، یک توابع عمومی اضافه کنید.

تضاد رنگ

یک تابع اضافی که در بوت استرپ قرار می دهیم، تابع کنتراست رنگ است 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 ارائه شوند. هنگام استفاده از escape-svgتابع، URIهای داده باید نقل قول شوند.

توابع اضافه و تفریق

ما از توابع addو subtractبرای بسته بندی تابع CSS calcاستفاده می کنیم. هدف اصلی این توابع جلوگیری از خطا در هنگام ارسال مقدار "unitless" 0به یک 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

بوت استرپ 4 را با فایل متغیرهای سفارشی داخلی ما سفارشی کنید و به راحتی تنظیمات CSS جهانی را با $enable-*متغیرهای جدید Sass تغییر دهید. مقدار یک متغیر را نادیده بگیرید و در npm run testصورت نیاز دوباره کامپایل کنید.

می توانید این متغیرها را برای گزینه های کلیدی جهانی در scss/_variables.scssفایل بوت استرپ پیدا کرده و سفارشی کنید.

متغیر	ارزش های	شرح
`$spacer`	`1rem`(پیش‌فرض)، یا هر مقدار > 0	مقدار پیش‌فرض فاصله‌گذار را برای تولید برنامه‌ای ابزارهای فاصله‌گذار ما مشخص می‌کند.
`$enable-rounded`	`true`(پیش فرض) یا`false`	`border-radius`استایل های از پیش تعریف شده را روی اجزای مختلف فعال می کند.
`$enable-shadows`	`true`یا `false`(پیش فرض)	سبک های تزئینی از پیش تعریف شده `box-shadow`را روی اجزای مختلف فعال می کند. `box-shadow`روی s مورد استفاده برای حالت های فوکوس تأثیر نمی گذارد .
`$enable-gradients`	`true`یا `false`(پیش فرض)	گرادیان های از پیش تعریف شده را از طریق `background-image`استایل ها روی اجزای مختلف فعال می کند.
`$enable-transitions`	`true`(پیش فرض) یا`false`	s های از پیش تعریف شده `transition`را روی اجزای مختلف فعال می کند.
`$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`	برای `false`پنهان کردن هشدارها هنگام استفاده از هر یک از ترکیب‌ها و عملکردهای منسوخ شده که برنامه‌ریزی شده‌اند در حذف شوند، روی را تنظیم `v5`کنید.

رنگ

بسیاری از اجزا و ابزارهای مختلف Bootstrap از طریق یک سری رنگ تعریف شده در نقشه Sass ساخته می شوند. این نقشه را می توان در Sass حلقه کرد تا به سرعت مجموعه ای از قوانین را تولید کند.

همه رنگ ها

تمام رنگ های موجود در Bootstrap 4، به عنوان متغیرهای Sass و نقشه Sass در scss/_variables.scssفایل موجود هستند. این در نسخه‌های کوچک بعدی برای افزودن سایه‌های اضافی، بسیار شبیه پالت خاکستری که قبلاً اضافه کرده‌ایم، گسترش خواهد یافت.

آبی دلار #007bff

$نیلی #6610f2

دلار بنفش #6f42c1

$ صورتی #e83e8c

قرمز دلار #dc3545

نارنجی دلار #fd7e14

زرد دلار #ffc107

سبز $ #28a745

رنگ قرمز #20c997

فیروزه ای دلار #17a2b8

در اینجا نحوه استفاده از آنها در 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 موجود است.

اولیه $ #007bff

$ ثانویه #6c757d

$موفقیت #28a745

$ خطر #dc3545

$warning #ffc107

اطلاعات $ #17a2b8

نور دلار #f8f9fa

$تاریک #343a40

خاکستری ها

مجموعه گسترده ای از متغیرهای خاکستری و نقشه Sass scss/_variables.scssبرای سایه های خاکستری ثابت در پروژه شما. توجه داشته باشید که اینها "خاکستری های سرد" هستند که به جای خاکستری های خنثی به رنگ آبی ظریف تمایل دارند.

خاکستری-100 دلار #f8f9fa

خاکستری $200 #e9ecef

خاکستری-300 دلار #dee2e6

خاکستری-400 دلار #ced4da

خاکستری-500 دلار #adb5bd

خاکستری-600 دلار #6c757d

خاکستری $700 #495057

خاکستری دلار - 800 #343a40

خاکستری $900 #212529

در داخل 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 را سفارشی می کنید و دوباره کامپایل می کنید، به طور خودکار تغییرات خود را در این حلقه ها منعکس می کنید.

اصلاح کننده ها

بسیاری از اجزای بوت استرپ با رویکرد کلاس اصلاح کننده پایه ساخته شده اند. این بدان معناست که بخش عمده ای از یک ظاهر طراحی شده در یک کلاس پایه (مثلاً .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; }
  }
}

اگر نیاز به تغییر خود $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", "Liberation 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 کامپایل شده برای سازگاری به عقب باقی می مانند، زیرا می توانند توسط جاوا اسکریپت مورد استفاده قرار گیرند. در مشخصات بیشتر بیاموزید

در اینجا نمونه ای از مواردی که پشتیبانی نمی شود آورده شده است:

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

و در اینجا نمونه ای از آنچه پشتیبانی می شود آورده شده است:

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