থিমিং বুটষ্ট্ৰেপ

সহজ থিমিং আৰু উপাদান পৰিবৰ্তনৰ বাবে গোলকীয় শৈলী পছন্দসমূহৰ বাবে আমাৰ নতুন অন্তৰ্নিৰ্মিত Sass চলকসমূহৰ সৈতে Bootstrap 4 কাষ্টমাইজ কৰক।

পাতনি

বুটষ্ট্ৰেপ ৩ ত, থিমিং বহুলাংশে LESS ত চলক অভাৰৰাইড, স্বনিৰ্বাচিত CSS, আৰু এটা পৃথক থিম শৈলীপত্ৰৰ দ্বাৰা পৰিচালিত হৈছিল যি আমি আমাৰ distনথিপত্ৰসমূহত অন্তৰ্ভুক্ত কৰিছিলোঁ । কিছু প্ৰচেষ্টাৰে, কোনোবাই মূল নথিপত্ৰসমূহ স্পৰ্শ নকৰাকৈ Bootstrap 3 ৰ ৰূপ সম্পূৰ্ণৰূপে পুনৰ নিৰ্মাণ কৰিব পাৰিলেহেঁতেন। বুটষ্ট্ৰেপ ৪ এ এটা চিনাকি, কিন্তু অলপ বেলেগ পদ্ধতি প্ৰদান কৰে।

এতিয়া, থিমিং Sass ভেৰিয়েবল, Sass মেপ, আৰু কাষ্টম CSS দ্বাৰা সম্পন্ন কৰা হয়। আৰু কোনো নিৰ্দিষ্ট থিম ষ্টাইলশ্বীট নাই; ইয়াৰ পৰিবৰ্তে, আপুনি অন্তৰ্নিৰ্মিত থিম সামৰ্থবান কৰিব পাৰে গ্ৰেডিয়েন্ট, ছাঁ, আৰু অধিক যোগ কৰিবলে।

ছাছ

আপোনাৰ নিজৰ সম্পত্তি পাইপলাইন ব্যৱহাৰ কৰি Sass কম্পাইল কৰাৰ সময়ত চলকসমূহ, মেপসমূহ, মিক্সিনসমূহ, আৰু অধিক সুবিধা ল'বলৈ আমাৰ উৎস Sass নথিপত্ৰসমূহ ব্যৱহাৰ কৰক।

নথিপত্ৰৰ গঠন

যেতিয়াই সম্ভৱ, Bootstrap ৰ মূল নথিপত্ৰসমূহ পৰিবৰ্তন কৰা এৰক । Sass ৰ বাবে, ইয়াৰ অৰ্থ হৈছে আপোনাৰ নিজৰ শৈলীপত্ৰিকা সৃষ্টি কৰা যি Bootstrap আমদানি কৰে যাতে আপুনি ইয়াক পৰিবৰ্তন আৰু সম্প্ৰসাৰণ কৰিব পাৰে । ধৰি লওক আপুনি npm ৰ দৰে এটা সৰঞ্জাম ব্যৱস্থাপক ব্যৱহাৰ কৰিছে, আপোনাৰ এটা নথিপত্ৰ গঠন থাকিব যি এনেকুৱা দেখা যাব:

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

যদি আপুনি আমাৰ উৎস নথিপত্ৰসমূহ ডাউনল'ড কৰিছে আৰু এটা সৰঞ্জাম ব্যৱস্থাপক ব্যৱহাৰ কৰা নাই, আপুনি সেই গঠনৰ সৈতে একেধৰণৰ কিবা এটা হস্তচালিতভাৱে প্ৰতিষ্ঠা কৰিব বিচাৰিব, Bootstrap ৰ উৎস নথিপত্ৰসমূহ আপোনাৰ নিজৰ পৰা পৃথক কৰি ।

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

আমদানি কৰা হৈছে

আপোনাৰ custom.scss, আপুনি Bootstrap ৰ উৎস Sass নথিপত্ৰসমূহ আমদানি কৰিব। আপোনাৰ দুটা বিকল্প আছে: 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নথিপত্ৰৰ পৰা সম্পূৰ্ণ আমদানি ষ্টেক আপোনাৰ আৰম্ভণি বিন্দু হিচাপে ব্যৱহাৰ কৰাৰ পৰামৰ্শ দিওঁ।

চলক অবিকল্পিতসমূহ

Bootstrap ত প্ৰতিটো Sass চলকে !defaultফ্লেগ অন্তৰ্ভুক্ত কৰে যি আপোনাক Bootstrap ৰ উৎস ক'ড পৰিবৰ্তন নকৰাকৈ আপোনাৰ নিজৰ Sass ত চলকটোৰ অবিকল্পিত মান অভাৰৰাইড কৰাৰ অনুমতি দিয়ে। প্ৰয়োজন অনুসৰি চলকসমূহ কপি আৰু পেষ্ট কৰক, সিহতৰ মানসমূহ পৰিবৰ্তন কৰক, আৰু !defaultফ্লেগ আঁতৰাওক। যদি এটা চলক ইতিমধ্যে নিযুক্ত কৰা হৈছে, তেন্তে ইয়াক Bootstrap ত অবিকল্পিত মানসমূহৰ দ্বাৰা পুনৰায় নিযুক্ত কৰা নহ'ব ।

আপুনি Bootstrap ৰ চলকসমূহৰ সম্পূৰ্ণ তালিকা ত পাব scss/_variables.scss। কিছুমান চলক লে সংহতি কৰা হৈছে null, এই চলকসমূহে বৈশিষ্ট্য আউটপুট নকৰে যেতিয়ালৈকে সিহতক আপোনাৰ বিন্যাসত অভাৰৰাইড কৰা নহয়।

আমাৰ ফাংচন, ভেৰিয়েবল, আৰু মিক্সিন আমদানি কৰাৰ পিছত ভেৰিয়েবল অভাৰৰাইড আহিব লাগিব, কিন্তু বাকী আমদানি কৰাৰ আগতে।

ইয়াত এটা উদাহৰণ আছে যি npm ৰ যোগেদি Bootstrap আমদানি আৰু কম্পাইল কৰাৰ সময়ত 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

Bootstrap ত যিকোনো চলকৰ বাবে প্ৰয়োজন অনুসৰি পুনৰাবৃত্তি কৰক, তলৰ গোলকীয় বিকল্পসমূহ অন্তৰ্ভুক্ত কৰি ।

মানচিত্ৰ আৰু লুপ

বুটষ্ট্ৰেপ ৪ ত এটা মুষ্টিমেয় 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 মেপৰ চাবি ব্যৱহাৰ কৰা হৈছে।

উদাহৰণস্বৰূপ, আমি সংযোগ, বুটাম, আৰু ফৰ্ম অৱস্থাৰ বাবে 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);
}

এইবোৰে আপোনাক এটা Sass মেপৰ পৰা এটা ৰং বাছি ল'বলৈ অনুমতি দিয়ে যেনেকৈ আপুনি 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 যোগ কৰিব পাৰি, বা আনকি এটা সাধাৰণ এটা যদি আপুনি অধিক verbose হ'ব বিচাৰে।

ৰঙৰ বিপৰীতমুখীতা

আমি বুটষ্ট্ৰেপত অন্তৰ্ভুক্ত কৰা এটা অতিৰিক্ত ফলন হৈছে ৰঙৰ বিপৰীত ফলন, 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 ৰ পৰা পলায়ন কৰক

আমি escape-svgফাংচনটো ব্যৱহাৰ কৰো <, >আৰু #SVG পটভূমি ছবিৰ বাবে আখৰসমূহ এস্কেপ কৰিবলৈ। IE ত পটভূমিৰ ছবিসমূহ সঠিকভাৱে ৰেণ্ডাৰ কৰিবলৈ এই আখৰসমূহ এস্কেপ কৰিব লাগিব। ফাংচন ব্যৱহাৰ কৰাৰ সময়ত escape-svg, ডাটা URI সমূহ উদ্ধৃত কৰিব লাগিব।

যোগ আৰু বিয়োগ ফাংচনসমূহ

আমি CSS ফাংচনটো ৰেপ কৰিবলৈ addand functions ব্যৱহাৰ কৰো । এই ফাংচনসমূহৰ প্ৰধান উদ্দেশ্য হৈছে এটা “ইউনিটলেছ” মান এটা এক্সপ্ৰেচনলৈ পাছ কৰাৰ সময়ত ভুলৰ পৰা হাত সাৰিবলৈ। গাণিতিকভাৱে শুদ্ধ হোৱাৰ পিছতো সকলো ব্ৰাউজাৰত এটা ভুল ঘূৰাই দিব।subtractcalc0calccalc(10px - 0)

উদাহৰণ য'ত calc বৈধ:

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

উদাহৰণ য'ত calc অবৈধ:

$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 বিকল্পসমূহ

আমাৰ বিল্ট-ইন কাষ্টম চলকসমূহ ফাইলৰ সৈতে Bootstrap 4 কাষ্টমাইজ কৰক আৰু নতুন $enable-*Sass চলকসমূহৰ সৈতে সহজে গোলকীয় CSS পছন্দসমূহ টগল কৰক। এটা চলকৰ মান অভাৰৰাইড কৰক আৰু npm run testপ্ৰয়োজন অনুসৰি পুনৰ কম্পাইল কৰক।

scss/_variables.scssআপুনি Bootstrap ৰ নথিপত্ৰত চাবি গোলকীয় বিকল্পসমূহৰ বাবে এই চলকসমূহ বিচাৰি পাব আৰু স্বনিৰ্বাচিত কৰিব পাৰিব ।

ৰং

Bootstrap ৰ বহুতো বিভিন্ন উপাদান আৰু সঁজুলিসমূহ এটা Sass মেপত সংজ্ঞায়িত ৰঙৰ এটা শৃংখলাৰ যোগেদি নিৰ্মাণ কৰা হয়। এই মেপটো Sass ত লুপ কৰি দ্ৰুতভাৱে নিয়মৰ এটা শৃংখলা সৃষ্টি কৰিব পাৰি।

সকলো ৰং

বুটষ্ট্ৰেপ ৪ ত উপলব্ধ সকলো ৰং, Sass চলক হিচাপে আৰু scss/_variables.scssনথিপত্ৰত এটা Sass মেপ হিচাপে উপলব্ধ। ইয়াক পৰৱৰ্তী সৰু উন্মোচনসমূহত সম্প্ৰসাৰিত কৰা হ'ব অতিৰিক্ত শ্বেডসমূহ যোগ কৰিবলে, আমি ইতিমধ্যে অন্তৰ্ভুক্ত কৰা ধূসৰ স্কেল পেলেটৰ দৰে ।

ইয়াত আপুনি আপোনাৰ Sass ত এইবোৰ কেনেকৈ ব্যৱহাৰ কৰিব পাৰে:

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

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

ৰঙৰ সঁজুলি শ্ৰেণীসমূহ সংহতি colorআৰু background-color.

থিম ৰং

আমি সকলো ৰঙৰ এটা উপগোট ব্যৱহাৰ কৰো ৰঙৰ আঁচনি সৃষ্টি কৰাৰ বাবে এটা সৰু ৰঙৰ পেলেট সৃষ্টি কৰিবলে, যিটো Sass চলক হিচাপেও উপলব্ধ আৰু Bootstrap ৰ scss/_variables.scssফাইলত এটা Sass মেপ হিচাপেও উপলব্ধ।

ধূসৰ ৰঙৰ

ধূসৰ চলকসমূহৰ এটা বিস্তৃত গোট আৰু এটা Sass মেপ scss/_variables.scssআপোনাৰ প্ৰকল্পত ধূসৰ ৰঙৰ সামঞ্জস্যপূৰ্ণ শ্বেডসমূহৰ বাবে। মন কৰিব যে এইবোৰ “শীতল ধূসৰ”, যিবোৰে নিৰপেক্ষ ধূসৰ ৰঙৰ নহয়, সূক্ষ্ম নীলা ৰঙৰ সুৰৰ প্ৰতি প্ৰৱণতা ৰাখে।

ৰ ভিতৰত scss/_variables.scss, আপুনি Bootstrap ৰ ৰঙৰ চলকসমূহ আৰু Sass মেপ পাব। ইয়াত $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;

মেপৰ ভিতৰত মানসমূহ যোগ কৰক, আঁতৰাওক, বা পৰিবৰ্তন কৰক যাতে সিহতক অন্য বহুতো উপাদানত কেনেকৈ ব্যৱহাৰ কৰা হয় তাক আপডেইট কৰিবলে। দুৰ্ভাগ্যজনকভাৱে এই সময়ত, প্ৰতিটো উপাদানে এই Sass মেপ ব্যৱহাৰ নকৰে। ভৱিষ্যতে আপডেটসমূহে ইয়াৰ ওপৰত উন্নতি সাধন কৰিবলৈ চেষ্টা কৰিব। তেতিয়ালৈকে, ${color}চলকসমূহ আৰু এই Sass মেপ ব্যৱহাৰ কৰাৰ পৰিকল্পনা কৰক।

উপাদানসমূহ

Bootstrap ৰ বহুতো উপাদান আৰু সঁজুলিসমূহ @eachলুপসমূহৰ সৈতে নিৰ্মিত যি এটা Sass মেপৰ ওপৰত পুনৰাবৃত্তি কৰে। এইটো বিশেষকৈ আমাৰ দ্বাৰা এটা উপাদানৰ $theme-colorsভিন্নতা সৃষ্টি কৰাৰ বাবে আৰু প্ৰতিটো ব্ৰেকপইণ্টৰ বাবে প্ৰতিক্ৰিয়াশীল ভিন্নতা সৃষ্টি কৰাৰ বাবে সহায়ক। আপুনি এই Sass মেপসমূহ কাষ্টমাইজ আৰু পুনৰ কম্পাইল কৰাৰ লগে লগে, আপুনি স্বয়ংক্ৰিয়ভাৱে আপোনাৰ পৰিবৰ্তনসমূহ এই লুপসমূহত প্ৰতিফলিত হোৱা দেখিব।

পৰিৱৰ্তকসমূহ

Bootstrap ৰ বহু��ো উপাদান এটা ভিত্তি-পৰিৱৰ্তক শ্ৰেণী পদ্ধতিৰ সৈতে নিৰ্মিত। ইয়াৰ অৰ্থ হৈছে ষ্টাইলিঙৰ ডাঙৰ অংশ এটা ভিত্তি শ্ৰেণীত (যেনে, .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 লুপসমূহ কেৱল ৰঙৰ মেপত সীমাবদ্ধ নহয়, তাকো। আপুনি আপোনাৰ উপাদানসমূহ বা সঁজুলিসমূহৰ প্ৰতিক্ৰিয়াশীল ভিন্নতাসমূহো সৃষ্টি কৰিব পাৰে। উদাহৰণস্বৰূপে আমাৰ প্ৰতিক্ৰিয়াশীল লিখনী প্ৰান্তিককৰণ সঁজুলিসমূহ লওক য'ত আমি Sass মেপৰ @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আপোনাৰ পৰিবৰ্তন কৰিব লাগে, আপোনাৰ পৰিবৰ্তনসমূহ সেই মেপৰ ওপৰত পুনৰাবৃত্তি কৰা সকলো লুপত প্ৰযোজ্য হ'ব।

CSS চলকসমূহ

বুটষ্ট্ৰেপ ৪ এ ইয়াৰ কমপাইল কৰা CSS ত প্ৰায় দুডজন CSS স্বনিৰ্বাচিত বৈশিষ্ট্য (চলকসমূহ) অন্তৰ্ভুক্ত কৰে। এইবোৰে আপোনাৰ ব্ৰাউজাৰৰ পৰিদৰ্শক, এটা ক'ড ছেণ্ডবক্স, বা সাধাৰণ প্ৰ'ট'টাইপিঙত কাম কৰাৰ সময়ত আমাৰ থিম ৰং, ব্ৰেকপইণ্ট, আৰু প্ৰাথমিক ফন্ট ষ্টেকসমূহৰ দৰে সাধাৰণতে ব্যৱহৃত মানসমূহলৈ সহজ অভিগম প্ৰদান কৰে।

উপলব্ধ চলকসমূহ

ইয়াত আমি অন্তৰ্ভুক্ত কৰা চলকসমূহ দিয়া হৈছে (মন কৰিব যে the :rootis required)। _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 ত থাকে কাৰণ সিহতক জাভাস্ক্রিপ্ট দ্বাৰা ব্যৱহাৰ কৰিব পাৰি। spec ত অধিক শিকিব ।

কি সমৰ্থিত নহয় তাৰ এটা উদাহৰণ ইয়াত দিয়া হ'ল :

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

আৰু ইয়াত কি সমৰ্থিত তাৰ এটা উদাহৰণ দিয়া হ'ল:

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