سس
اپنے پراجیکٹ کو تیز تر بنانے اور اپنی مرضی کے مطابق بنانے میں مدد کرنے کے لیے متغیرات، نقشوں، مکسنس، اور فنکشنز سے فائدہ اٹھانے کے لیے ہماری سورس 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/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
// 5. Add additional custom code here
اس سیٹ اپ کے ساتھ، آپ اپنے Sass متغیرات اور نقشوں میں سے کسی میں ترمیم کرنا شروع کر سکتے ہیں custom.scss
۔ // Optional
آپ ضرورت کے مطابق سیکشن کے تحت بوٹسٹریپ کے حصے شامل کرنا بھی شروع کر سکتے ہیں ۔ ہم اپنی bootstrap.scss
فائل سے مکمل درآمدی اسٹیک کو اپنے نقطہ آغاز کے طور پر استعمال کرنے کا مشورہ دیتے ہیں۔
متغیر ڈیفالٹس
بوٹسٹریپ میں ہر Sass متغیر میں وہ !default
جھنڈا شامل ہوتا ہے جو آپ کو بوٹسٹریپ کے سورس کوڈ میں ترمیم کیے بغیر اپنے Sass میں متغیر کی ڈیفالٹ ویلیو کو اوور رائیڈ کرنے کی اجازت دیتا ہے۔ ضرورت کے مطابق متغیرات کو کاپی اور پیسٹ کریں، ان کی اقدار میں ترمیم کریں، اور !default
پرچم کو ہٹا دیں۔ اگر ایک متغیر پہلے ہی تفویض کیا گیا ہے، تو اسے بوٹسٹریپ میں ڈیفالٹ اقدار کے ذریعے دوبارہ تفویض نہیں کیا جائے گا۔
آپ کو بوٹسٹریپ کے متغیرات کی مکمل فہرست مل جائے گی scss/_variables.scss
۔ کچھ متغیرات پر سیٹ ہیں null
، یہ متغیرات پراپرٹی کو آؤٹ پٹ نہیں کرتے جب تک کہ وہ آپ کی کنفیگریشن میں اوور رائڈ نہ ہوں۔
متغیر اوور رائیڈز ہمارے فنکشنز کے امپورٹ ہونے کے بعد، لیکن باقی امپورٹس سے پہلے آنا چاہیے۔
یہاں ایک مثال ہے جو npm کے ذریعے بوٹسٹریپ کو درآمد اور مرتب کرتے وقت تبدیل background-color
کرتی ہے color
:<body>
// Required
@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
بوٹسٹریپ میں کسی بھی متغیر کے لیے حسب ضرورت دہرائیں، بشمول ذیل میں عالمی اختیارات۔
نقشے اور لوپس
بوٹسٹریپ میں مٹھی بھر ساس نقشے، کلیدی قدر کے جوڑے شامل ہیں جو متعلقہ CSS کے خاندانوں کو پیدا کرنا آسان بناتے ہیں۔ ہم اپنے رنگوں، گرڈ بریک پوائنٹس، اور مزید کے لیے Sass نقشے استعمال کرتے ہیں۔ ساس متغیرات کی طرح، تمام ساس نقشوں میں !default
جھنڈا شامل ہے اور اسے اوور رائڈ اور بڑھایا جا سکتا ہے۔
ہمارے کچھ ساس نقشے پہلے سے طے شدہ طور پر خالی نقشوں میں ضم ہوجاتے ہیں۔ یہ ایک دیئے گئے Sass نقشے کی آسانی سے توسیع کی اجازت دینے کے لیے کیا جاتا ہے، لیکن نقشے سے اشیاء کو ہٹانا قدرے مشکل بنانے کی قیمت پر آتا ہے۔
نقشہ میں ترمیم کریں۔
نقشے میں موجود تمام متغیرات کو $theme-colors
اسٹینڈ لون متغیرات کے طور پر بیان کیا گیا ہے۔ $theme-colors
ہمارے نقشے میں موجودہ رنگ میں ترمیم کرنے کے لیے، اپنی حسب ضرورت Sass فائل میں درج ذیل کو شامل کریں:
$primary: #0074d9;
$danger: #ff4136;
بعد میں، یہ متغیرات بوٹسٹریپ کے $theme-colors
نقشے میں سیٹ کیے جاتے ہیں:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
نقشے میں شامل کریں۔
$theme-colors
اپنی مرضی کے مطابق اقدار کے ساتھ ایک نیا ساس نقشہ بنا کر اور اسے اصل نقشے کے ساتھ ملا کر، یا کسی دوسرے نقشے میں نئے رنگ شامل کریں ۔ اس صورت میں، ہم ایک نیا $custom-colors
نقشہ بنائیں گے اور اسے کے ساتھ ضم کریں گے $theme-colors
۔
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
نقشے سے ہٹا دیں۔
$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";
// etc
مطلوبہ چابیاں
بوٹسٹریپ Sass نقشوں کے اندر کچھ مخصوص کلیدوں کی موجودگی کو فرض کرتا ہے جیسا کہ ہم نے خود ان کو استعمال کیا اور بڑھایا۔ جیسے ہی آپ شامل نقشوں کو اپنی مرضی کے مطابق بناتے ہیں، آپ کو ایسی غلطیوں کا سامنا کرنا پڑ سکتا ہے جہاں ایک مخصوص Sass نقشہ کی کلید استعمال ہو رہی ہو۔
مثال کے طور پر، ہم لنکس، بٹن، اور فارم اسٹیٹس کے لیے primary
، success
اور danger
کیز سے استعمال کرتے ہیں۔ $theme-colors
ان کلیدوں کی اقدار کو تبدیل کرنے سے کوئی مسئلہ نہیں ہونا چاہئے، لیکن ان کو ہٹانے سے Sass کی تالیف کے مسائل پیدا ہو سکتے ہیں۔ ان مثالوں میں، آپ کو Sass کوڈ میں ترمیم کرنے کی ضرورت ہوگی جو ان اقدار کو استعمال کرتا ہے۔
افعال
رنگ
ہمارے پاس موجود ساس نقشوں کے آگے، تھیم کے رنگ بھی اسٹینڈ لون متغیر کے طور پر استعمال کیے جا سکتے ہیں، جیسے $primary
۔
.custom-element {
color: $gray-100;
background-color: $dark;
}
tint-color()
آپ بوٹسٹریپ اور shade-color()
فنکشنز کے ساتھ رنگوں کو ہلکا یا گہرا کر سکتے ہیں ۔ یہ فنکشنز رنگوں کو سیاہ یا سفید کے ساتھ ملا دیں گے، ساس کے مقامی lighten()
اور darken()
فنکشنز کے برعکس جو ہلکے پن کو ایک مقررہ مقدار سے بدل دیں گے، جو اکثر مطلوبہ اثر کا باعث نہیں بنتے ہیں۔
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
عملی طور پر، آپ فنکشن کو کال کریں گے اور رنگ اور وزن کے پیرامیٹرز میں پاس کریں گے۔
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
رنگ کے برعکس
رنگ کے تضاد کے لیے WCAG 2.0 کی رسائی کے معیارات کو پورا کرنے کے لیے ، مصنفین کو بہت کم استثناء کے ساتھ، کم از کم 4.5:1 کا کنٹراسٹ تناسب فراہم کرنا چاہیے ۔
ایک اضافی فنکشن جو ہم بوٹسٹریپ میں شامل کرتے ہیں وہ کلر کنٹراسٹ فنکشن ہے color-contrast
۔ یہ WCAG 2.0 الگورتھم کو رنگ کی جگہ میں رشتہ دار روشنی کی بنیاد پر متضاد حدوں کا حساب لگانے کے لیے استعمال کرتا ہے تاکہ مخصوص بنیادی رنگ کی بنیاد پر sRGB
خود بخود روشنی ( #fff
) , سیاہ ( #212529
) یا سیاہ ( #000
) کنٹراسٹ رنگ واپس آ سکے۔ یہ فنکشن خاص طور پر مکسینز یا لوپس کے لیے مفید ہے جہاں آپ متعدد کلاسز تیار کر رہے ہیں۔
مثال کے طور پر، ہمارے $theme-colors
نقشے سے رنگین تبدیلیاں بنانے کے لیے:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
اسے یک طرفہ متضاد ضروریات کے لیے بھی استعمال کیا جا سکتا ہے:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
آپ ہمارے کلر میپ فنکشنز کے ساتھ بنیادی رنگ بھی بتا سکتے ہیں:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
فرار SVG
ہم SVG پس منظر کی تصاویر کے لیے ، اور حروف escape-svg
سے بچنے کے لیے فنکشن کا استعمال کرتے ہیں۔ فنکشن استعمال کرتے وقت ، ڈیٹا 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);
}
مکسنس
ہماری scss/mixins/
ڈائرکٹری میں ایک ٹن مکسز ہیں جو بوٹسٹریپ کے پرزوں کو طاقت دیتے ہیں اور آپ کے اپنے پروجیکٹ میں بھی استعمال کیے جا سکتے ہیں۔
رنگ سکیمیں
prefers-color-scheme
میڈیا استفسار کے لیے شارٹ ہینڈ مکسین light
, dark
اور حسب ضرورت رنگ سکیموں کے لیے تعاون کے ساتھ دستیاب ہے۔
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
.custom-element {
@include color-scheme(dark) {
// Insert dark mode styles here
}
@include color-scheme(custom-named-scheme) {
// Insert custom color scheme styles here
}
}