تھیمنگ بوٹسٹریپ
آسان تھیمنگ اور اجزاء کی تبدیلیوں کے لیے عالمی طرز کی ترجیحات کے لیے ہمارے نئے بلٹ ان Sass متغیرات کے ساتھ بوٹسٹریپ 4 کو حسب ضرورت بنائیں۔
تعارف
بوٹسٹریپ 3 میں، تھیمنگ بڑی حد تک کم، کسٹم سی ایس ایس، اور ایک الگ تھیم اسٹائل شیٹ میں متغیر اوور رائیڈز کے ذریعے چلائی گئی تھی جسے ہم نے اپنی dist
فائلوں میں شامل کیا تھا۔ کچھ کوشش کے ساتھ، کوئی بھی بنیادی فائلوں کو چھوئے بغیر بوٹسٹریپ 3 کی شکل کو مکمل طور پر دوبارہ ڈیزائن کر سکتا ہے۔ بوٹسٹریپ 4 ایک مانوس، لیکن قدرے مختلف نقطہ نظر فراہم کرتا ہے۔
اب، تھیمنگ کو Sass متغیرات، Sass نقشے، اور حسب ضرورت CSS کے ذریعے مکمل کیا جاتا ہے۔ مزید کوئی سرشار تھیم اسٹائل شیٹ نہیں ہے۔ اس کے بجائے، آپ بلٹ ان تھیم کو گریڈینٹ، شیڈو اور مزید شامل کرنے کے لیے فعال کر سکتے ہیں۔
سس
اپنی اپنی اثاثہ پائپ لائن کا استعمال کرتے ہوئے Sass کو مرتب کرتے وقت متغیرات، نقشوں، مکسنس اور مزید کا فائدہ اٹھانے کے لیے ہماری سورس 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
// 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.scss
فائل سے مکمل درآمدی اسٹیک کو اپنے نقطہ آغاز کے طور پر استعمال کرنے کا مشورہ دیتے ہیں۔
متغیر ڈیفالٹس
بوٹسٹریپ میں ہر Sass متغیر میں وہ !default
جھنڈا شامل ہوتا ہے جو آپ کو بوٹسٹریپ کے سورس کوڈ میں ترمیم کیے بغیر اپنے Sass میں متغیر کی ڈیفالٹ ویلیو کو اوور رائیڈ کرنے کی اجازت دیتا ہے۔ ضرورت کے مطابق متغیرات کو کاپی اور پیسٹ کریں، ان کی اقدار میں ترمیم کریں، اور !default
پرچم کو ہٹا دیں۔ اگر ایک متغیر پہلے ہی تفویض کیا گیا ہے، تو اسے بوٹسٹریپ میں ڈیفالٹ اقدار کے ذریعے دوبارہ تفویض نہیں کیا جائے گا۔
آپ کو بوٹسٹریپ کے متغیرات کی مکمل فہرست مل جائے گی scss/_variables.scss
۔ کچھ متغیرات پر سیٹ ہیں null
، یہ متغیرات پراپرٹی کو آؤٹ پٹ نہیں کرتے جب تک کہ وہ آپ کی کنفیگریشن میں اوور رائڈ نہ ہوں۔
متغیر اوور رائیڈز ہمارے فنکشنز، ویری ایبلز اور مکسینز کو درآمد کرنے کے بعد، لیکن باقی درآمدات سے پہلے آنا چاہیے۔
یہاں ایک مثال ہے جو npm کے ذریعے بوٹسٹریپ کو درآمد اور مرتب کرتے وقت تبدیل background-color
کرتی ہے color
:<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
بوٹسٹریپ میں کسی بھی متغیر کے لیے حسب ضرورت دہرائیں، بشمول ذیل میں عالمی اختیارات۔
نقشے اور لوپس
بوٹسٹریپ 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`
}
فرار SVG
ہم SVG پس منظر کی تصاویر کے لیے ، اور حروف escape-svg
سے بچنے کے لیے فنکشن کا استعمال کرتے ہیں۔ IE میں پس منظر کی تصاویر کو صحیح طریقے سے پیش کرنے کے لیے ان کرداروں کو فرار ہونے کی ضرورت ہے۔ فنکشن استعمال کرتے وقت ، ڈیٹا URIs کا حوالہ دینا ضروری ہے۔<
>
#
escape-svg
افعال شامل کریں اور گھٹائیں
ہم CSS فنکشن کو لپیٹنے کے لیے add
اور فنکشنز کا استعمال کرتے ہیں ۔ ان فنکشنز کا بنیادی مقصد غلطیوں سے بچنا ہے جب "unitless" قدر کو اظہار میں منتقل کیا جاتا ہے۔ اس طرح کے تاثرات ریاضی کے لحاظ سے درست ہونے کے باوجود تمام براؤزرز میں ایک خرابی لوٹا دیں گے۔subtract
calc
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);
}
ساس کے اختیارات
بوٹسٹریپ 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 طرزوں کو قابل بناتا ہے۔ box-shadow فوکس سٹیٹس کے لیے استعمال شدہ s کو متاثر نہیں کرتا۔ |
$enable-gradients |
true یا false (پہلے سے طے شدہ) |
background-image مختلف اجزاء پر اسٹائل کے ذریعے پہلے سے طے شدہ گریڈینٹ کو فعال کرتا ہے۔ |
$enable-transitions |
true (پہلے سے طے شدہ) یاfalse |
transition مختلف اجزاء پر پہلے سے طے شدہ s کو فعال کرتا ہے۔ |
$enable-prefers-reduced-motion-media-query |
true (پہلے سے طے شدہ) یاfalse |
prefers-reduced-motion میڈیا استفسار کو فعال کرتا ہے ، جو صارفین کے براؤزر/آپریٹنگ سسٹم کی ترجیحات کی بنیاد پر کچھ اینیمیشنز/ٹرانزیشنز کو دباتا ہے۔ |
$enable-hover-media-query |
true یا false (پہلے سے طے شدہ) |
فرسودہ |
$enable-grid-classes |
true (پہلے سے طے شدہ) یاfalse |
.container گرڈ سسٹم (مثلاً، , .row , .col-md-1 , وغیرہ) کے لیے CSS کلاسز کی تخلیق کو فعال کرتا ہے ۔ |
$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 ۔ |
رنگ
بوٹسٹریپ کے بہت سے مختلف اجزاء اور یوٹیلیٹیز کو ساس میپ میں بیان کردہ رنگوں کی ایک سیریز کے ذریعے بنایا گیا ہے۔ اس نقشے کو ساس میں ختم کیا جا سکتا ہے تاکہ قواعد کی ایک سیریز کو تیزی سے تیار کیا جا سکے۔
تمام رنگ
بوٹسٹریپ 4 میں دستیاب تمام رنگ، ساس متغیرات اور scss/_variables.scss
فائل میں ایک ساس نقشہ کے طور پر دستیاب ہیں۔ اضافی شیڈز کو شامل کرنے کے لیے اس کو بعد میں آنے والی معمولی ریلیزز میں بڑھایا جائے گا، جیسا کہ ہم پہلے سے شامل گرے اسکیل پیلیٹ کی طرح۔
یہاں یہ ہے کہ آپ ان کو اپنے ساس میں کیسے استعمال کرسکتے ہیں:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
کلر یوٹیلیٹی کلاسزcolor
سیٹنگ اور کے لیے بھی دستیاب ہیں background-color
۔
تھیم کے رنگ
ہم رنگ سکیمیں بنانے کے لیے ایک چھوٹا رنگ پیلیٹ بنانے کے لیے تمام رنگوں کا سب سیٹ استعمال کرتے ہیں، جو بوٹسٹریپ کی scss/_variables.scss
فائل میں ساس متغیر اور ساس نقشہ کے طور پر بھی دستیاب ہے۔
گرے
سرمئی متغیرات کا ایک وسیع سیٹ اور scss/_variables.scss
آپ کے پورے پروجیکٹ میں سرمئی رنگ کے مستقل شیڈز کے لیے ایک ساس نقشہ۔ نوٹ کریں کہ یہ "ٹھنڈی گرے" ہیں، جو غیر جانبدار گرے کے بجائے ایک لطیف نیلے رنگ کی طرف مائل ہوتے ہیں۔
کے اندر 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, "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;
}
مثالیں
سی ایس ایس متغیر 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);
}
}