ছাছ

আপোনাৰ প্ৰকল্প দ্ৰুতভাৱে নিৰ্মাণ আৰু স্বনিৰ্বাচিত কৰাত সহায় কৰিবলৈ চলকসমূহ, মেপসমূহ, মিক্সিনসমূহ, আৰু ফলনসমূহৰ সুবিধা ল'বলৈ আমাৰ উৎস 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";

// 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 ৰ অংশসমূহ যোগ কৰিবলেও আৰম্ভ কৰিব পাৰে । আমি আমাৰ bootstrap.scssনথিপত্ৰৰ পৰা সম্পূৰ্ণ আমদানি ষ্টেক আপোনাৰ আৰম্ভণি বিন্দু হিচাপে ব্যৱহাৰ কৰাৰ পৰামৰ্শ দিওঁ।

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

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

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

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

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

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

আমাৰ আৰম্ভণি প্ৰকল্পৰ সৈতে npm ৰ জৰিয়তে Bootstrap ৰ সৈতে আৰম্ভ কৰক! আপোনাৰ নিজৰ npm প্ৰকল্পত Bootstrap কেনেকৈ নিৰ্মাণ আৰু স্বনিৰ্বাচিত কৰিব লাগে চাবলৈ twbs/bootstrap-npm-starter সাঁচ ভঁৰাললৈ যাওক । Sass কমপাইলাৰ, স্বয়ংপ্ৰিফিক্সাৰ, Stylelint, PurgeCSS, আৰু বুটষ্ট্ৰেপ আইকনসমূহ অন্তৰ্ভুক্ত কৰে।

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

বুটষ্ট্ৰেপত এটা মুষ্টিমেয় Sass মেপসমূহ অন্তৰ্ভুক্ত কৰা হৈছে, চাবি মান যোৰসমূহ যি সম্পৰ্কীয় CSS ৰ পৰিয়ালসমূহ সৃষ্টি কৰাটো সহজ কৰে। আমি আমাৰ ৰং, গ্ৰীড ব্ৰেকপইন্ট, আৰু অধিক বাবে Sass মেপ ব্যৱহাৰ কৰো। ঠিক Sass চলকসমূহৰ দৰেই, সকলো Sass মেপে !defaultফ্লেগ অন্তৰ্ভুক্ত কৰে আৰু অভাৰৰাইড আৰু সম্প্ৰসাৰিত কৰিব পাৰি।

আমাৰ কিছুমান Sass মেপ ডিফল্টভাৱে খালীত একত্ৰিত কৰা হয়। এইটো এটা নিৰ্দিষ্ট Sass মেপ সহজে সম্প্ৰসাৰণৰ অনুমতি দিবলৈ কৰা হয়, কিন্তু এটা মেপৰ পৰা বস্তু আঁতৰোৱাটো অলপ অধিক কঠিন কৰি তোলাৰ খৰচত আহে ।

মানচিত্ৰ পৰিবৰ্তন কৰক

মেপত থকা সকলো চলকক $theme-colorsস্বতন্ত্ৰ চলক হিচাপে সংজ্ঞায়িত কৰা হৈছে। আমাৰ মেপত এটা বৰ্ত্তমানৰ ৰং পৰিবৰ্তন কৰিবলে $theme-colors, আপোনাৰ স্বনিৰ্বাচিত Sass নথিপত্ৰত নিম্নলিখিত যোগ কৰক:

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

পিছলৈ, এই চলকসমূহ Bootstrap ৰ $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;
}

আপুনি Bootstrap's tint-color()আৰু shade-color()কাৰ্য্যসমূহৰ সৈতে ৰং পোহৰ বা গাঢ় কৰিব পাৰে। এই ফাংচনসমূহে ক'লা বা বগাৰ সৈতে ৰং মিহলাই দিব, Sass ৰ নেটিভ 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-contrastBootstrap ত ফাংচনটো অন্তৰ্ভুক্ত কৰিলোঁ। ই এটা ৰঙৰ স্থানত আপেক্ষিক লুমিনেন্সৰ ওপৰত ভিত্তি কৰি কনট্ৰাষ্ট থ্ৰেছহোল্ড গণনা কৰাৰ বাবে 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ফাংচনটো ব্যৱহাৰ কৰো <, >আৰু #SVG পটভূমি ছবিৰ বাবে আখৰসমূহ এস্কেপ কৰিবলৈ। ফাংচন ব্যৱহাৰ কৰাৰ সময়ত 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);
}

মিক্সিন

আমাৰ scss/mixins/ডাইৰেকটৰীত এটা টন মিক্সিন আছে যি Bootstrap ৰ অংশসমূহক শক্তি প্ৰদান কৰে আৰু আপোনাৰ নিজৰ প্ৰকল্পত ব্যৱহাৰ কৰিব পাৰি।

ৰঙৰ আঁচনি

মাধ্যম প্ৰশ্নৰ বাবে এটা চৰ্টহেণ্ড মিক্সিন , , আৰু স্বনিৰ্বাচিত ৰঙৰ আঁচনিসমূহৰ prefers-color-schemeবাবে সমৰ্থনৰ সৈতে উপলব্ধ ।lightdark

@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
  }
}