সস

ভেরিয়েবল, ম্যাপ, মিক্সিন, এবং ফাংশনগুলির সুবিধা নিতে আমাদের সোর্স 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";

// 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 এর মাধ্যমে বুটস্ট্র্যাপ শুরু করুন! কিভাবে আপনার নিজস্ব npm প্রকল্পে বুটস্ট্র্যাপ তৈরি এবং কাস্টমাইজ করতে হয় তা দেখতে twbs/bootstrap-npm-starter টেমপ্লেট সংগ্রহস্থলে যান। Sass কম্পাইলার, Autoprefixer, Stylelint, PurgeCSS, এবং বুটস্ট্র্যাপ আইকন অন্তর্ভুক্ত।

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

বুটস্ট্র্যাপে কয়েকটি Sass মানচিত্র, মূল মান জোড়া রয়েছে যা সম্পর্কিত CSS এর পরিবারগুলি তৈরি করা সহজ করে তোলে। আমরা আমাদের রঙ, গ্রিড ব্রেকপয়েন্ট এবং আরও অনেক কিছুর জন্য Sass মানচিত্র ব্যবহার করি। Sass ভেরিয়েবলের মতই, সমস্ত Sass মানচিত্রে !defaultপতাকা অন্তর্ভুক্ত এবং ওভাররাইড এবং প্রসারিত করা যেতে পারে।

আমাদের কিছু Sass মানচিত্র ডিফল্টরূপে খালিতে একত্রিত হয়। এটি একটি প্রদত্ত Sass মানচিত্রের সহজ প্রসারণের অনুমতি দেওয়ার জন্য করা হয়, তবে একটি মানচিত্র থেকে আইটেমগুলিকে কিছুটা কঠিন করে তোলার খরচে আসে ।

মানচিত্র পরিবর্তন করুন

মানচিত্রের সমস্ত ভেরিয়েবলকে $theme-colorsস্বতন্ত্র ভেরিয়েবল হিসাবে সংজ্ঞায়িত করা হয়েছে। আমাদের মানচিত্রে একটি বিদ্যমান রঙ পরিবর্তন করতে $theme-colors, আপনার কাস্টম Sass ফাইলে নিম্নলিখিত যোগ করুন:

$primary: #0074d9;
$danger: #ff4136;

পরে, এই ভেরিয়েবলগুলি বুটস্ট্র্যাপের $theme-colorsমানচিত্রে সেট করা হয়েছে:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

মানচিত্রে যোগ করুন

$theme-colorsআপনার কাস্টম মানগুলির সাথে একটি নতুন Sass মানচিত্র তৈরি করে এবং এটিকে মূল মানচিত্রের সাথে মার্জ করে, বা অন্য কোনো মানচিত্রে নতুন রং যোগ করুন । এই ক্ষেত্রে, আমরা একটি নতুন $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 কোড পরিবর্তন করতে হবে যা সেই মানগুলি ব্যবহার করে।

ফাংশন

রং

আমাদের কাছে থাকা 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 ব্যাকগ্রাউন্ড ইমেজের জন্য , এবং অক্ষরগুলি escape-svgথেকে বাঁচতে ফাংশনটি ব্যবহার করি। ফাংশন ব্যবহার করার সময় , ডেটা 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);
}

মিক্সিন

আমাদের 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
  }
}