in English

සාස්

විචල්‍යයන්, සිතියම්, මිශ්‍රණ සහ ශ්‍රිතවල ප්‍රයෝජන ගැනීමට අපගේ මූලාශ්‍ර 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 ඇතුළත් කරන්න, නැතහොත් ඔබට අවශ්‍ය කොටස් තෝරා ගන්න. අපගේ සංරචක හරහා යම් අවශ්‍යතා සහ පරායත්තතා ඇති බව දැන සිටියත්, අපි දෙවැන්න දිරිමත් කරමු. අපගේ ප්ලගීන සඳහා ඔබට JavaScript කිහිපයක් ඇතුළත් කිරීමටද අවශ්‍ය වනු ඇත.

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

// 4. Include any optional Bootstrap CSS 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";

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

// 6. Add additional custom code here

එම සැකසුම සමඟින්, ඔබට ඔබගේ Sass විචල්‍යයන් සහ සිතියම් කිසිවක් වෙනස් කිරීමට පටන් ගත හැක custom.scss. // Optionalඔබට අවශ්‍ය පරිදි කොටස යටතේ Bootstrap කොටස් එකතු කිරීමටද පටන් ගත හැක . bootstrap.scssඔබගේ ආරම්භක ලක්ෂ්‍යය ලෙස අපගේ ගොනුවෙන් සම්පූර්ණ ආයාත තොගය භාවිතා කිරීමට අපි යෝජනා කරමු .

විචල්‍ය පෙරනිමි

Bootstrap හි ඇති සෑම Sass විචල්‍යයක්ම !defaultBootstrap හි ප්‍රභව කේතය වෙනස් නොකර ඔබේම 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/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 compiler, Autoprefixer, Stylelint, PurgeCSS, සහ Bootstrap Icons ඇතුළත් වේ.

සිතියම් සහ ලූප

Bootstrap හි 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. අපගේ අවශ්‍යතා සහ විකල්ප අතර ඔබ එය ඇතුළත් කළ යුතු බව සලකන්න:

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

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

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

අවශ්ය යතුරු

Bootstrap උපකල්පනය කරන්නේ Sass සිතියම් තුළ අප විසින්ම භාවිතා කරන සහ දිගු කරන විට යම් නිශ්චිත යතුරු තිබීමයි. ඔබ ඇතුළත් සිතියම් අභිරුචිකරණය කරන විට, විශේෂිත Sass සිතියම් යතුරක් භාවිතා කරන විට ඔබට දෝෂ ඇතිවිය හැක.

උදාහරණයක් ලෙස, අපි සබැඳි, බොත්තම් සහ පෝරම තත්ත්වයන් සඳහා primary, success, සහ dangerයතුරු භාවිතා කරමු. $theme-colorsමෙම යතුරු වල අගයන් ප්‍රතිස්ථාපනය කිරීමෙන් ගැටළු ඇති නොවිය යුතුය, නමුත් ඒවා ඉවත් කිරීමෙන් Sass සම්පාදන ගැටළු ඇති විය හැක. මෙම අවස්ථා වලදී, ඔබට එම අගයන් භාවිතා කරන Sass කේතය වෙනස් කිරීමට අවශ්‍ය වනු ඇත.

කාර්යයන්

වර්ණ

අප සතුව ඇති Sass සිතියම් අසල , තේමා වර්ණ ස්වාධීන විචල්‍යයන් ලෙසද භාවිතා කළ හැක $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

tint-color()බූට්ස්ට්‍රැප් සහ shade-color()කර්තව්‍යයන් සමඟින් ඔබට වර්ණ සැහැල්ලු කිරීමට හෝ අඳුරු කිරීමට හැකිය . lighten()මෙම ශ්‍රිතයන් Sass හි ස්වදේශික මෙන් නොව කළු හෝ සුදු සමඟ වර්ණ මිශ්‍ර 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 2.0 ප්‍රවේශ්‍යතා ප්‍රමිතීන් සපුරාලීම සඳහා , කතුවරුන් ඉතා සුළු ව්‍යතිරේකයකින් අවම වශයෙන් 4.5:1 ප්‍රතිවිරුද්ධ අනුපාතයක් සැපයිය යුතුය .

අපි Bootstrap හි ඇතුලත් කරන අමතර කාර්යයක් වන්නේ වර්ණ පරස්පර ශ්‍රිතය, color-contrast. එය නිශ්චිත මූලික වර්ණය මත පදනම්ව ආලෝකය ( ), අඳුරු ( ) හෝ කළු ( ) ප්‍රතිවිරුද්ධ වර්ණයක් ස්වයංක්‍රීයව ආපසු ලබා දීම සඳහා වර්ණ අවකාශයක සාපේක්ෂ දීප්තිය මත පදනම්ව ප්‍රතිවිරුද්ධ සීමාවන් ගණනය කිරීම සඳහා WCAG 2.0 ඇල්ගොරිතම භාවිතා කරයි. ඔබ බහු පන්ති ජනනය කරන මික්සින් හෝ ලූප සඳහා මෙම ශ්‍රිතය විශේෂයෙන් ප්‍රයෝජනවත් වේ.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`
}

Escape SVG

SVG පසුබිම් රූප සඳහා , සහ අක්ෂර escape-svgවලින් ගැලවීමට අපි ශ්‍රිතය භාවිතා කරමු . කාර්යය භාවිතා කරන විට , දත්ත URIs උපුටා දැක්විය යුතුය.<>#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
  }
}