থিমিং বুটস্ট্র্যাপ

সহজ থিমিং এবং উপাদান পরিবর্তনের জন্য বিশ্বব্যাপী শৈলী পছন্দের জন্য আমাদের নতুন অন্তর্নির্মিত Sass ভেরিয়েবলের সাথে বুটস্ট্র্যাপ 4 কাস্টমাইজ করুন।

ভূমিকা

বুটস্ট্র্যাপ 3-এ, থিমিং মূলত কম, কাস্টম CSS, এবং একটি পৃথক থিম স্টাইলশীটে পরিবর্তনশীল ওভাররাইড দ্বারা চালিত হয়েছিল যা আমরা আমাদের distফাইলগুলিতে অন্তর্ভুক্ত করেছি। কিছু প্রচেষ্টার সাথে, কেউ মূল ফাইলগুলি স্পর্শ না করেই বুটস্ট্র্যাপ 3 এর চেহারা সম্পূর্ণরূপে পুনরায় ডিজাইন করতে পারে। বুটস্ট্র্যাপ 4 একটি পরিচিত, কিন্তু সামান্য ভিন্ন পদ্ধতি প্রদান করে।

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

সস

আপনার নিজস্ব সম্পদ পাইপলাইন ব্যবহার করে Sass কম্পাইল করার সময় ভেরিয়েবল, মানচিত্র, মিক্সিন এবং আরও অনেক কিছুর সুবিধা নিতে আমাদের উত্স 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

বুটস্ট্র্যাপের যেকোনো ভেরিয়েবলের জন্য প্রয়োজন অনুযায়ী পুনরাবৃত্তি করুন, নীচের বিশ্বব্যাপী বিকল্পগুলি সহ।

মানচিত্র এবং loops

বুটস্ট্র্যাপ 4-এ রয়েছে মুষ্টিমেয় 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 মানচিত্রের জন্য স্তরের ফাংশন তৈরি করতে, অথবা এমনকি একটি সাধারণ একটি যদি আপনি আরও ভার্বস হতে চান।

রঙের বৈসাদৃশ্য

একটি অতিরিক্ত ফাংশন যা আমরা বুটস্ট্র্যাপে অন্তর্ভুক্ত করি তা হল কালার কনট্রাস্ট ফাংশন 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থেকে বাঁচতে ফাংশনটি ব্যবহার করি। IE তে ব্যাকগ্রাউন্ড ইমেজগুলিকে সঠিকভাবে রেন্ডার করার জন্য এই অক্ষরগুলিকে এস্কেপ করা দরকার৷ ফাংশন ব্যবহার করার সময় , ডেটা URI গুলি অবশ্যই উদ্ধৃত করতে হবে।<>#escape-svg

ফাংশন যোগ এবং বিয়োগ করুন

আমরা CSS ফাংশন মোড়ানোর জন্য addএবং ফাংশন ব্যবহার করি । এই ফাংশনগুলির প্রাথমিক উদ্দেশ্য হল ত্রুটিগুলি এড়ানো যখন একটি "ইউনিটহীন" মান একটি অভিব্যক্তিতে পাস করা হয়। অভিব্যক্তিগুলি গাণিতিকভাবে সঠিক হওয়া সত্ত্বেও সমস্ত ব্রাউজারে একটি ত্রুটি ফিরিয়ে দেবে।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);
}

Sass অপশন

আমাদের অন্তর্নির্মিত কাস্টম ভেরিয়েবল ফাইলের সাথে বুটস্ট্র্যাপ 4 কাস্টমাইজ করুন এবং নতুন $enable-*Sass ভেরিয়েবলের সাথে বিশ্বব্যাপী CSS পছন্দগুলি সহজেই টগল করুন। একটি ভেরিয়েবলের মান ওভাররাইড করুন এবং npm run testপ্রয়োজন অনুসারে পুনরায় কম্পাইল করুন।

আপনি বুটস্ট্র্যাপের scss/_variables.scssফাইলে মূল বৈশ্বিক বিকল্পগুলির জন্য এই ভেরিয়েবলগুলি খুঁজে পেতে এবং কাস্টমাইজ করতে পারেন।

রঙ

বুটস্ট্র্যাপের অনেকগুলি বিভিন্ন উপাদান এবং ইউটিলিটি একটি Sass মানচিত্রে সংজ্ঞায়িত রঙের একটি সিরিজের মাধ্যমে তৈরি করা হয়। এই মানচিত্রটি Sass-এ লুপ করা যেতে পারে দ্রুত নিয়মের একটি সিরিজ তৈরি করতে।

সব রঙ

বুটস্ট্র্যাপ 4-এ উপলব্ধ সমস্ত রঙ 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।

থিম রং

scss/_variables.scssআমরা রঙের স্কিম তৈরি করার জন্য একটি ছোট রঙের প্যালেট তৈরি করতে সমস্ত রঙের একটি উপসেট ব্যবহার করি, এটি Sass ভেরিয়েবল এবং বুটস্ট্র্যাপের ফাইলে একটি Sass মানচিত্র হিসাবেও উপলব্ধ ।

ধূসর

ধূসর ভেরিয়েবলের একটি বিস্তৃত সেট এবং scss/_variables.scssআপনার প্রকল্প জুড়ে ধূসর রঙের ধারাবাহিক শেডগুলির জন্য একটি Sass মানচিত্র। মনে রাখবেন যে এগুলি হল "কুল ধূসর", যা নিরপেক্ষ ধূসর রঙের পরিবর্তে একটি সূক্ষ্ম নীল স্বরের দিকে ঝোঁক।

এর মধ্যে scss/_variables.scss, আপনি বুটস্ট্র্যাপের রঙের ভেরিয়েবল এবং Sass মানচিত্র খুঁজে পাবেন। এখানে $colorsSass মানচিত্রের একটি উদাহরণ:

$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 মানচিত্র ব্যবহার করার পরিকল্পনা করুন।

উপাদান

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

সংশোধক

বুটস্ট্র্যাপের অনেক উপাদান একটি বেস-মোডিফায়ার ক্লাস পদ্ধতির সাথে নির্মিত। এর মানে হল স্টাইলিংয়ের বেশিরভাগ অংশ একটি বেস ক্লাসে (যেমন, .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 ভেরিয়েবল

বুটস্ট্র্যাপ 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;
}

উদাহরণ

CSS ভেরিয়েবলগুলি Sass এর ভেরিয়েবলের অনুরূপ নমনীয়তা প্রদান করে, কিন্তু ব্রাউজারে পরিবেশন করার আগে সংকলনের প্রয়োজন ছাড়াই। উদাহরণস্বরূপ, এখানে আমরা CSS ভেরিয়েবলের সাথে আমাদের পৃষ্ঠার ফন্ট এবং লিঙ্ক শৈলী রিসেট করছি।

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

ব্রেকপয়েন্ট ভেরিয়েবল

যদিও আমরা মূলত আমাদের CSS ভেরিয়েবলে ব্রেকপয়েন্ট অন্তর্ভুক্ত করেছিলাম (যেমন, --breakpoint-md), এগুলি মিডিয়া কোয়েরিতে সমর্থিত নয় , তবে সেগুলি এখনও মিডিয়া কোয়েরির নিয়মের মধ্যে ব্যবহার করা যেতে পারে। এই ব্রেকপয়েন্ট ভেরিয়েবলগুলি জাভাস্ক্রিপ্ট দ্বারা ব্যবহার করা যেতে পারে প্রদত্ত ব্যাকওয়ার্ড সামঞ্জস্যের জন্য কম্পাইল করা CSS-এ থাকে। স্পেক আরো জানুন .

এখানে যা সমর্থিত নয় তার একটি উদাহরণ:

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

এবং এখানে যা সমর্থিত তার একটি উদাহরণ:

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