Source

تھیمنگ بوٹسٹریپ

آسان تھیمنگ اور اجزاء کی تبدیلیوں کے لیے عالمی طرز کی ترجیحات کے لیے ہمارے نئے بلٹ ان Sass متغیرات کے ساتھ بوٹسٹریپ 4 کو حسب ضرورت بنائیں۔

تعارف

بوٹسٹریپ 3 میں، تھیمنگ بڑی حد تک کم، کسٹم سی ایس ایس، اور ایک الگ تھیم اسٹائل شیٹ میں متغیر اوور رائیڈز کے ذریعے چلائی گئی تھی جسے ہم نے اپنی distفائلوں میں شامل کیا تھا۔ کچھ کوشش کے ساتھ، کوئی بھی بنیادی فائلوں کو چھوئے بغیر بوٹسٹریپ 3 کی شکل کو مکمل طور پر دوبارہ ڈیزائن کر سکتا ہے۔ بوٹسٹریپ 4 ایک مانوس، لیکن قدرے مختلف نقطہ نظر فراہم کرتا ہے۔

اب، تھیمنگ کو Sass متغیرات، Sass نقشے، اور حسب ضرورت CSS کے ذریعے مکمل کیا جاتا ہے۔ مزید کوئی سرشار تھیم اسٹائل شیٹ نہیں ہے۔ اس کے بجائے، آپ بلٹ ان تھیم کو گریڈینٹ، شیڈو اور مزید شامل کرنے کے لیے فعال کر سکتے ہیں۔

سس

متغیرات، نقشہ جات، مکسنس وغیرہ سے فائدہ اٹھانے کے لیے ہماری سورس Sass فائلوں کو استعمال کریں۔

فائل کا ڈھانچہ

جب بھی ممکن ہو، بوٹسٹریپ کی بنیادی فائلوں میں ترمیم کرنے سے گریز کریں۔ ساس کے لیے، اس کا مطلب ہے کہ آپ کی اپنی اسٹائل شیٹ بنانا جو بوٹسٹریپ کو درآمد کرتی ہے تاکہ آپ اس میں ترمیم اور توسیع کر سکیں۔ فرض کریں کہ آپ npm جیسے پیکیج مینیجر کا استعمال کر رہے ہیں، آپ کے پاس ایک فائل کا ڈھانچہ ہوگا جو اس طرح لگتا ہے:

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

اگر آپ نے ہماری سورس فائلیں ڈاؤن لوڈ کی ہیں اور پیکیج مینیجر استعمال نہیں کر رہے ہیں، تو آپ بوٹسٹریپ کی سورس فائلوں کو اپنے سے الگ رکھتے ہوئے، اس ڈھانچے سے ملتی جلتی کوئی چیز دستی طور پر ترتیب دینا چاہیں گے۔

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

درآمد کرنا

آپ میں custom.scss، آپ بوٹسٹریپ کی سورس Sass فائلیں درآمد کریں گے۔ آپ کے پاس دو اختیارات ہیں: تمام بوٹسٹریپ شامل کریں، یا اپنی ضرورت کے پرزے منتخب کریں۔ ہم مؤخر الذکر کی حوصلہ افزائی کرتے ہیں، حالانکہ آگاہ رہیں کہ ہمارے تمام اجزاء میں کچھ تقاضے اور انحصار موجود ہیں۔ آپ کو ہمارے پلگ انز کے لیے کچھ جاوا اسکرپٹ بھی شامل کرنے کی ضرورت ہوگی۔

// 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۔ // Optionalآپ ضرورت کے مطابق سیکشن کے تحت بوٹسٹریپ کے حصے شامل کرنا بھی شروع کر سکتے ہیں ۔ ہم اپنی bootstrap.scssفائل سے مکمل درآمدی اسٹیک کو اپنے نقطہ آغاز کے طور پر استعمال کرنے کا مشورہ دیتے ہیں۔

متغیر ڈیفالٹس

بوٹسٹریپ 4 میں ہر Sass متغیر میں !defaultجھنڈا شامل ہوتا ہے جو آپ کو بوٹسٹریپ کے سورس کوڈ میں ترمیم کیے بغیر آپ کے اپنے Sass میں متغیر کی ڈیفالٹ ویلیو کو اوور رائیڈ کرنے کی اجازت دیتا ہے۔ ضرورت کے مطابق متغیرات کو کاپی اور پیسٹ کریں، ان کی اقدار میں ترمیم کریں، اور !defaultپرچم کو ہٹا دیں۔ اگر ایک متغیر پہلے ہی تفویض کیا گیا ہے، تو اسے بوٹسٹریپ میں ڈیفالٹ اقدار کے ذریعے دوبارہ تفویض نہیں کیا جائے گا۔

آپ کو بوٹسٹریپ کے متغیرات کی مکمل فہرست مل جائے گی scss/_variables.scss۔

اسی Sass فائل میں متغیر اوور رائیڈز پہلے سے طے شدہ متغیرات سے پہلے یا بعد میں آ سکتے ہیں۔ تاہم، جب تمام Sass فائلوں کو اوور رائیڈ کرتے ہیں، تو Bootstrap کی Sass فائلوں کو درآمد کرنے سے پہلے آپ کے اوور رائیڈز آنا چاہیے۔

یہاں ایک مثال ہے جو npm کے ذریعے بوٹسٹریپ کو درآمد اور مرتب کرتے وقت تبدیل background-colorکرتی ہے color:<body>

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

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

بوٹسٹریپ میں کسی بھی متغیر کے لیے حسب ضرورت دہرائیں، بشمول ذیل میں عالمی اختیارات۔

نقشے اور لوپس

بوٹسٹریپ 4 میں مٹھی بھر ساس نقشے، کلیدی قدر کے جوڑے شامل ہیں جو متعلقہ CSS کے خاندانوں کو پیدا کرنا آسان بناتے ہیں۔ ہم اپنے رنگوں، گرڈ بریک پوائنٹس، اور مزید کے لیے Sass نقشے استعمال کرتے ہیں۔ ساس متغیرات کی طرح، تمام ساس نقشوں میں !defaultجھنڈا شامل ہے اور اسے اوور رائڈ اور بڑھایا جا سکتا ہے۔

ہمارے کچھ ساس نقشے پہلے سے طے شدہ طور پر خالی نقشوں میں ضم ہوجاتے ہیں۔ یہ ایک دیئے گئے 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 نقشہ کی کلید استعمال ہو رہی ہو۔

مثال کے طور پر، ہم لنکس، بٹن، اور فارم اسٹیٹس کے لیے primary، successاور dangerکیز سے استعمال کرتے ہیں۔ $theme-colorsان کلیدوں کی اقدار کو تبدیل کرنے سے کوئی مسئلہ نہیں ہونا چاہئے، لیکن ان کو ہٹانے سے Sass کی تالیف کے مسائل پیدا ہو سکتے ہیں۔ ان مثالوں میں، آپ کو Sass کوڈ میں ترمیم کرنے کی ضرورت ہوگی جو ان اقدار کو استعمال کرتا ہے۔

افعال

بوٹسٹریپ کئی 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);
}

یہ آپ کو ساس نقشے سے ایک رنگ چننے کی اجازت دیتے ہیں جیسے کہ آپ 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);
}

عملی طور پر، آپ فنکشن کو کال کریں گے اور دو پیرامیٹرز میں پاس کریں گے: رنگ کا نام $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`
}

ساس کے اختیارات

بوٹسٹریپ 4 کو ہماری بلٹ ان حسب ضرورت متغیر فائل کے ساتھ حسب ضرورت بنائیں اور نئے $enable-*Sass متغیرات کے ساتھ عالمی CSS ترجیحات کو آسانی سے ٹوگل کریں۔ متغیر کی قدر کو اوور رائڈ کریں اور npm run testضرورت کے مطابق دوبارہ مرتب کریں۔

scss/_variables.scssآپ بوٹسٹریپ کی فائل میں کلیدی عالمی اختیارات کے لیے ان متغیرات کو تلاش اور اپنی مرضی کے مطابق کر سکتے ہیں ۔

متغیر	اقدار	تفصیل
`$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`	`transition`مختلف اجزاء پر پہلے سے طے شدہ s کو فعال کرتا ہے۔
`$enable-hover-media-query`	`true`یا `false`(پہلے سے طے شدہ)	فرسودہ
`$enable-grid-classes`	`true`(پہلے سے طے شدہ) یا`false`	`.container`گرڈ سسٹم (مثلاً، , `.row`, `.col-md-1`, وغیرہ) کے لیے CSS کلاسز کی تخلیق کو فعال کرتا ہے ۔
`$enable-caret`	`true`(پہلے سے طے شدہ) یا`false`	چھدم عنصر کیریٹ کو فعال کرتا ہے `.dropdown-toggle`۔
`$enable-print-styles`	`true`(پہلے سے طے شدہ) یا`false`	پرنٹنگ کو بہتر بنانے کے لیے اسٹائل کو فعال کرتا ہے۔

رنگ

بوٹسٹریپ کے بہت سے مختلف اجزاء اور یوٹیلیٹیز کو ساس میپ میں بیان کردہ رنگوں کی ایک سیریز کے ذریعے بنایا گیا ہے۔ اس نقشے کو ساس میں ختم کیا جا سکتا ہے تاکہ قواعد کی ایک سیریز کو تیزی سے تیار کیا جا سکے۔

تمام رنگ

بوٹسٹریپ 4 میں دستیاب تمام رنگ، ساس متغیرات اور scss/_variables.scssفائل میں ایک ساس نقشہ کے طور پر دستیاب ہیں۔ اضافی شیڈز کو شامل کرنے کے لیے اس کو بعد میں آنے والی معمولی ریلیزز میں بڑھایا جائے گا، جیسا کہ ہم پہلے سے شامل گرے اسکیل پیلیٹ کی طرح۔

نیلا

انڈگو

جامنی

گلابی

سرخ

کینو

پیلا

سبز

ٹیل

سیان

یہاں یہ ہے کہ آپ ان کو اپنے ساس میں کیسے استعمال کرسکتے ہیں:

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

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

ترتیبcolor اور background-color. _

مستقبل میں، ہم ہر رنگ کے شیڈز کے لیے Sass نقشے اور متغیرات فراہم کرنے کا ارادہ کریں گے جیسا کہ ہم نے نیچے گرے اسکیل رنگوں کے ساتھ کیا ہے۔

تھیم کے رنگ

ہم رنگ سکیموں کو بنانے کے لیے ایک چھوٹا رنگ پیلیٹ بنانے کے لیے تمام رنگوں کا سب سیٹ استعمال کرتے ہیں، جو بوٹسٹریپس کی scss/_variables.scssفائل میں ساس متغیر اور ساس نقشہ کے طور پر بھی دستیاب ہے۔

پرائمری

ثانوی

کامیابی

خطرہ

وارننگ

معلومات

روشنی

اندھیرا

گرے

سرمئی متغیرات کا ایک وسیع سیٹ اور scss/_variables.scssآپ کے پورے پروجیکٹ میں سرمئی رنگ کے مستقل شیڈز کے لیے ایک ساس نقشہ۔

100

200

300

400

500

600

700

800

900

کے اندر scss/_variables.scss، آپ کو بوٹسٹریپ کے رنگ متغیرات اور ساس کا نقشہ مل جائے گا۔ $colorsیہاں ساس نقشہ کی ایک مثال ہے :

$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;

نقشے میں اقدار کو شامل کریں، ہٹائیں یا ان میں ترمیم کریں تاکہ یہ اپ ڈیٹ کیا جا سکے کہ وہ بہت سے دوسرے اجزاء میں کیسے استعمال ہوتے ہیں۔ بدقسمتی سے اس وقت، ہر جزو اس ساس نقشے کو استعمال نہیں کرتا ہے۔ مستقبل کے اپ ڈیٹس اس میں بہتری لانے کی کوشش کریں گے۔ تب تک، ${color}متغیرات اور اس ساس نقشہ کو استعمال کرنے کا منصوبہ بنائیں۔

اجزاء

بوٹسٹریپ کے بہت سے اجزاء اور یوٹیلیٹیز ایسے @eachلوپس کے ساتھ بنائے گئے ہیں جو ایک ساس نقشے پر دہراتے ہیں۔ یہ خاص طور پر ہماری طرف سے کسی جزو کی $theme-colorsمختلف حالتیں پیدا کرنے اور ہر بریک پوائنٹ کے لیے جوابی تغیرات بنانے میں مددگار ہے۔ جیسا کہ آپ ان ساس نقشوں کو اپنی مرضی کے مطابق بناتے ہیں اور دوبارہ مرتب کرتے ہیں، آپ خود بخود اپنی تبدیلیاں ان لوپس میں جھلکتے ہوئے دیکھیں گے۔

ترمیم کرنے والے

بوٹسٹریپ کے بہت سے اجزاء بیس موڈیفائر کلاس اپروچ کے ساتھ بنائے گئے ہیں۔ اس کا مطلب ہے کہ اسٹائل کا بڑا حصہ بنیادی طبقے (مثلاً، .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);
}

جوابدہ

یہ ساس لوپس صرف رنگین نقشوں تک ہی محدود نہیں ہیں۔ آپ اپنے اجزاء یا افادیت کے جوابی تغیرات بھی پیدا کر سکتے ہیں۔ مثال کے طور پر ہماری ریسپانسیو ٹیکسٹ الائنمنٹ یوٹیلیٹیز کو لیں جہاں ہم میڈیا کے سوال کے ساتھ ساس میپ کے @eachلیے ایک لوپ کو ملاتے ہیں۔$grid-breakpoints

@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، آپ کی تبدیلیاں اس نقشے پر تکرار کرنے والے تمام لوپس پر لاگو ہوں گی۔

سی ایس ایس متغیرات

بوٹسٹریپ 4 اپنے مرتب کردہ CSS میں تقریباً دو درجن CSS کسٹم پراپرٹیز (متغیرات) کو شامل کرتا ہے۔ یہ آپ کے براؤزر کے انسپکٹر، کوڈ سینڈ باکس، یا عام پروٹو ٹائپنگ میں کام کرتے وقت ہمارے تھیم کے رنگ، بریک پوائنٹس، اور بنیادی فونٹ اسٹیک جیسی عام استعمال شدہ اقدار تک آسان رسائی فراہم کرتے ہیں۔

دستیاب متغیرات

یہاں وہ متغیرات ہیں جو ہم شامل کرتے ہیں (نوٹ کریں کہ :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;
}

مثالیں

سی ایس ایس متغیر 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);
  }
}