Source

තේමා බූට්ස්ට්‍රැප්

පහසු තේමා සහ සංරචක වෙනස් කිරීම් සඳහා ගෝලීය මෝස්තර මනාපයන් සඳහා අපගේ නව බිල්ට්-ඉන් Sass විචල්‍යයන් සමඟ Bootstrap 4 අභිරුචිකරණය කරන්න.

හැදින්වීම

බූට්ස්ට්‍රැප් 3 හි, තේමා කිරීම බොහෝ දුරට මෙහෙයවනු ලැබුවේ අඩුවෙන්, අභිරුචි CSS, සහ අපි අපගේ distගොනුවලට ඇතුළත් කළ වෙනම තේමා මෝස්තර පත්‍රිකාවකින් විචල්‍ය අභිබවා යාමෙනි. යම් උත්සාහයකින්, කෙනෙකුට මූලික ගොනු ස්පර්ශ නොකර Bootstrap 3 හි පෙනුම සම්පූර්ණයෙන්ම ප්‍රතිනිර්මාණය කළ හැකිය. Bootstrap 4 හුරුපුරුදු නමුත් තරමක් වෙනස් ප්‍රවේශයක් සපයයි.

දැන්, තේමා කිරීම Sass විචල්‍යයන්, Sass සිතියම් සහ අභිරුචි CSS මගින් සිදු කෙරේ. තවත් කැප වූ තේමා මෝස්තර පත්‍රිකාවක් නොමැත; ඒ වෙනුවට, ඔබට අනුක්‍රමික, සෙවනැලි සහ තවත් දේ එක් කිරීමට ගොඩනඟන ලද තේමාව සබල කළ හැක.

සාස්

විචල්‍යයන්, සිතියම්, මිශ්‍රණයන් සහ තවත් දේවලින් ප්‍රයෝජන ගැනීමට අපගේ මූලාශ්‍ර 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

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

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

// Optional
@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 4 හි ඇති සෑම Sass විචල්‍යයක්ම !defaultBootstrap හි ප්‍රභව කේතය වෙනස් නොකර ඔබේම Sass හි විචල්‍යයේ පෙරනිමි අගය අභිබවා යාමට ඔබට ඉඩ සලසන ධජය ඇතුළත් වේ. අවශ්‍ය පරිදි විචල්‍ය පිටපත් කර අලවන්න, ඒවායේ අගයන් වෙනස් කරන්න, සහ !defaultධජය ඉවත් කරන්න. විචල්‍යයක් දැනටමත් පවරා තිබේ නම්, එය Bootstrap හි පෙරනිමි අගයන් මගින් නැවත පවරා නොදෙනු ඇත.

Bootstrap හි විචල්‍යවල සම්පූර්ණ ලැයිස්තුව ඔබට සොයාගත හැකිය scss/_variables.scss.

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

npm හරහා Bootstrap ආයාත කිරීමේදී සහ සම්පාදනය කිරීමේදී background-colorවෙනස් colorකරන උදාහරණයක් මෙන්න :<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

පහත ගෝලීය විකල්ප ඇතුළුව Bootstrap හි ඕනෑම විචල්‍යයක් සඳහා අවශ්‍ය පරිදි නැවත නැවත කරන්න.

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

Bootstrap 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";
...

අවශ්ය යතුරු

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

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

කාර්යයන්

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

ඔබ v3 වෙතින් වර්ණ විචල්‍යයක් භාවිතා කරන ආකාරය වැනි Sass සිතියමකින් එක් වර්ණයක් තෝරා ගැනීමට මේවා ඔබට ඉඩ සලසයි.

.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 එකතු කළ හැකිය, නැතහොත් ඔබට වඩාත් වාචික වීමට අවශ්‍ය නම් සාමාන්‍ය එකක් වුවද.

වර්ණ වෙනස

අපි Bootstrap හි ඇතුලත් කරන එක් අමතර කාර්යයක් වන්නේ වර්ණ පරස්පර ශ්‍රිතය, 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`
}

Sass විකල්ප

අපගේ බිල්ට් අභිරුචි විචල්‍ය ගොනුව සමඟ Bootstrap 4 අභිරුචිකරණය කරන්න සහ නව $enable-*Sass විචල්‍යයන් සමඟ ගෝලීය CSS මනාපයන් පහසුවෙන් ටොගල් කරන්න. විචල්‍යයක අගය අභිබවා npm run testඅවශ්‍ය පරිදි නැවත සම්පාදනය කරන්න.

scss/_variables.scssBootstrap ගොනුවේ ඇති ප්‍රධාන ගෝලීය විකල්ප සඳහා ඔබට මෙම විචල්‍යයන් සොයා ගැනීමට සහ අභිරුචිකරණය කිරීමට හැකිය .

විචල්ය වටිනාකම් විස්තර
$spacer 1rem(පෙරනිමි), හෝ ඕනෑම අගයක් > 0 අපගේ ස්පේසර් උපයෝගිතා ක්‍රමලේඛනාත්මකව උත්පාදනය කිරීමට පෙරනිමි ස්පේසර් අගය නියම කරයි .
$enable-rounded true(පෙරනිමි) හෝfalse border-radiusවිවිධ සංරචක මත පූර්ව නිශ්චිත මෝස්තර සබල කරයි .
$enable-shadows trueහෝ false(පෙරනිමි) box-shadowවිවිධ සංරචක මත පූර්ව නිශ්චිත මෝස්තර සබල කරයි .
$enable-gradients trueහෝ false(පෙරනිමි) background-imageවිවිධ සංරචක මත මෝස්තර හරහා පූර්ව නිශ්චිත අනුක්‍රමණය සක්‍රීය කරයි .
$enable-transitions true(පෙරනිමි) හෝfalse transitionවිවිධ සංරචක මත පූර්ව නිශ්චිත s සබල කරයි .
$enable-hover-media-query trueහෝ false(පෙරනිමි) අත්හරින ලදී
$enable-grid-classes true(පෙරනිමි) හෝfalse ජාල පද්ධතිය සඳහා CSS පන්ති උත්පාදනය සබල කරයි (උදා, .container, .row, .col-md-1, ආදිය).
$enable-caret true(පෙරනිමි) හෝfalse මත ව්‍යාජ මූලද්‍රව්‍ය රැකවරණය සබල කරයි .dropdown-toggle.
$enable-print-styles true(පෙරනිමි) හෝfalse මුද්‍රණය ප්‍රශස්ත කිරීම සඳහා මෝස්තර සබල කරයි.

වර්ණ

Bootstrap හි විවිධ සංරචක සහ උපයෝගිතා බොහොමයක් Sass සිතියමක අර්ථ දක්වා ඇති වර්ණ මාලාවක් හරහා ගොඩනගා ඇත. නීති මාලාවක් ඉක්මනින් ජනනය කිරීමට මෙම සිතියම Sass හි ලූප් කළ හැක.

සියලු වර්ණ

Bootstrap 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.

අනාගතයේදී, අපි පහත අළුපැහැති වර්ණ සමඟ කර ඇති පරිදි සෑම වර්ණයකම සෙවන සඳහා Sass සිතියම් සහ විචල්‍යයන් සැපයීමට අපි ඉලක්ක කරමු.

තේමා වර්ණ

scss/_variables.scssබූට්ස්ට්‍රැප්ස් ගොනුවේ Sass විචල්‍යයන් සහ Sass සිතියමක් ලෙස ද ලබා ගත හැකි, වර්ණ පටිපාටි ජනනය කිරීම සඳහා කුඩා වර්ණ මාලාවක් නිර්මාණය කිරීමට අපි සියලු වර්ණවල උප කුලකයක් භාවිතා කරමු .

ප්රාථමික
ද්විතියික
සාර්ථකත්වය
අනතුර
අවවාදයයි
තොරතුරු
ආලෝකය
අඳුරු

අළු

අළු විචල්‍යවල විස්තීරණ කට්ටලයක් සහ scss/_variables.scssඔබේ ව්‍යාපෘතිය පුරා ස්ථාවර අළු වර්ණ සඳහා Sass සිතියමක්.

100
200
300
400
500
600
700
800
900

ඇතුළත scss/_variables.scss, ඔබට Bootstrap හි වර්ණ විචල්‍යයන් සහ Sass සිතියම සොයා ගත හැක. $colorsමෙන්න Sass සිතියමේ උදාහරණයක් :

$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 හි බොහෝ සංරචක සහ උපයෝගිතා @eachSass සිතියමක් හරහා පුනරාවර්තනය වන ලූප සමඟ ගොඩනගා ඇත. මෙය විශේෂයෙන්ම අපගේ සංරචකයේ ප්‍රභේද ජනනය කිරීමට $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 විචල්යයන්

Bootstrap 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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) තුළ බිඳුම් ලක්ෂ්‍ය ඇතුළත් කළ අතර, මේවා මාධ්‍ය විමසුම්වල සහාය නොදක්වයි , නමුත් ඒවා තවමත් මාධ්‍ය විමසුම්වල නීති රීති තුළ භාවිත කළ හැක. මෙම බ්‍රේක්පොයින්ට් විචල්‍යයන් JavaScript මගින් භාවිතා කළ හැකි බැවින් පසුගාමී ගැළපුම සඳහා සම්පාදනය කරන ලද CSS තුළ පවතී. පිරිවිතරයෙන් තව දැනගන්න.

සහාය නොදක්වන දේ පිළිබඳ උදාහරණයක් මෙන්න :

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

සහය දක්වන දේ පිළිබඳ උදාහරණයක් මෙන්න :

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