سس

اپنے پراجیکٹ کو تیز تر بنانے اور اپنی مرضی کے مطابق بنانے میں مدد کرنے کے لیے متغیرات، نقشوں، مکسنس، اور فنکشنز سے فائدہ اٹھانے کے لیے ہماری سورس 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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@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";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. 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/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

ہمارے اسٹارٹر پروجیکٹ کے ساتھ npm کے ذریعے Bootstrap کے ساتھ شروع کریں! twbs /bootstrap-npm-starter ٹیمپلیٹ ریپوزٹری کی طرف جائیں یہ دیکھنے کے لیے کہ آپ کے اپنے npm پروجیکٹ میں بوٹسٹریپ کو کیسے بنایا جائے اور کس طرح اپنی مرضی کے مطابق بنایا جائے۔ Sass compiler، Autoprefixer، Stylelint، PurgeCSS، اور Bootstrap شبیہیں شامل ہیں۔

نقشے اور لوپس

بوٹسٹریپ میں مٹھی بھر ساس نقشے، کلیدی قدر کے جوڑے شامل ہیں جو متعلقہ 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۔ آگاہ رہیں کہ آپ کو $theme-colorsہماری ضروریات کے درمیان اس کی تعریف کے بعد variablesاور اس کے استعمال سے پہلے داخل کرنا ضروری ہے maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@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) کے متضاد تقاضوں کو پورا کرنے کے لیے ، مصنفین کو بہت کم استثناء کے ساتھ، کم از کم ٹیکسٹ کلر کنٹراسٹ 4.5:1 اور کم از کم غیر ٹیکسٹ کلر کنٹراسٹ 3:1 فراہم کرنا چاہیے۔

اس میں مدد کرنے کے لیے، ہم color-contrastنے بوٹسٹریپ میں فنکشن کو شامل کیا۔ یہ مخصوص بنیادی رنگ کی بنیاد پر خود بخود روشنی ( ) , سیاہ ( ) یا سیاہ ( ) کنٹراسٹ رنگ واپس کرنے کے لیے رنگ کی جگہ میں رشتہ دار روشنی کی بنیاد پر متضاد حدوں کا حساب لگانے کے لیے WCAG کنٹراسٹ تناسب الگورتھم کا استعمال کرتا ہے۔ یہ فنکشن خاص طور پر مکسینز یا لوپس کے لیے مفید ہے جہاں آپ متعدد کلاسز تیار کر رہے ہیں۔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" قدر کو اظہار میں منتقل کیا جاتا ہے۔ اس طرح کے تاثرات ریاضی کے لحاظ سے درست ہونے کے باوجود تمام براؤزرز میں ایک خرابی لوٹا دیں گے۔subtractcalc0calccalc(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
  }
}