തീമിംഗ് ബൂട്ട്സ്ട്രാപ്പ്

എളുപ്പമുള്ള തീമിംഗിനും ഘടകങ്ങൾ മാറ്റുന്നതിനുമുള്ള ആഗോള ശൈലി മുൻഗണനകൾക്കായി ഞങ്ങളുടെ പുതിയ ബിൽറ്റ്-ഇൻ സാസ് വേരിയബിളുകൾ ഉപയോഗിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് 4 ഇഷ്‌ടാനുസൃതമാക്കുക.

ആമുഖം

distബൂട്ട്‌സ്‌ട്രാപ്പ് 3-ൽ, തീമിംഗ് പ്രധാനമായും നയിക്കുന്നത് കുറവ്, ഇഷ്‌ടാനുസൃത CSS, ഞങ്ങളുടെ ഫയലുകളിൽ ഞങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുള്ള ഒരു പ്രത്യേക തീം സ്റ്റൈൽഷീറ്റ് എന്നിവയിലെ വേരിയബിൾ ഓവർറൈഡുകളാണ് . കുറച്ച് പ്രയത്നത്തിലൂടെ, കോർ ഫയലുകളിൽ സ്പർശിക്കാതെ തന്നെ ബൂട്ട്സ്ട്രാപ്പ് 3-ന്റെ രൂപം പൂർണ്ണമായും പുനർരൂപകൽപ്പന ചെയ്യാൻ കഴിയും. ബൂട്ട്‌സ്‌ട്രാപ്പ് 4 പരിചിതമായ, എന്നാൽ അല്പം വ്യത്യസ്തമായ ഒരു സമീപനം നൽകുന്നു.

ഇപ്പോൾ, സാസ് വേരിയബിളുകൾ, സാസ് മാപ്പുകൾ, ഇഷ്‌ടാനുസൃത CSS എന്നിവയാൽ തീമിംഗ് നിർവ്വഹിക്കുന്നു. കൂടുതൽ സമർപ്പിത തീം സ്റ്റൈൽഷീറ്റ് ഇല്ല; പകരം, ഗ്രേഡിയന്റുകളും ഷാഡോകളും മറ്റും ചേർക്കുന്നതിന് നിങ്ങൾക്ക് അന്തർനിർമ്മിത തീം പ്രവർത്തനക്ഷമമാക്കാം.

സാസ്

വേരിയബിളുകൾ, മാപ്പുകൾ, മിക്‌സിനുകൾ എന്നിവയും മറ്റും പ്രയോജനപ്പെടുത്താൻ ഞങ്ങളുടെ സോഴ്‌സ് Sass ഫയലുകൾ ഉപയോഗിക്കുക. ബ്രൗസർ റൗണ്ടിംഗിലെ പ്രശ്നങ്ങൾ തടയാൻ ഞങ്ങളുടെ ബിൽഡിൽ ഞങ്ങൾ Sass റൗണ്ടിംഗ് പ്രിസിഷൻ 6 ആക്കി (സ്ഥിരമായി ഇത് 5 ആണ്).

ഫയൽ ഘടന

സാധ്യമാകുമ്പോഴെല്ലാം, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്രധാന ഫയലുകൾ പരിഷ്‌ക്കരിക്കുന്നത് ഒഴിവാക്കുക. Sass-ന്, അതിനർത്ഥം ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇറക്കുമതി ചെയ്യുന്ന നിങ്ങളുടെ സ്വന്തം സ്റ്റൈൽഷീറ്റ് സൃഷ്‌ടിക്കുക, അതുവഴി നിങ്ങൾക്ക് അത് പരിഷ്‌ക്കരിക്കാനും വിപുലീകരിക്കാനും കഴിയും. നിങ്ങൾ npm പോലെയുള്ള ഒരു പാക്കേജ് മാനേജറാണ് ഉപയോഗിക്കുന്നതെന്ന് കരുതുക, നിങ്ങൾക്ക് ഇതുപോലെയുള്ള ഒരു ഫയൽ ഘടന ഉണ്ടായിരിക്കും:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

നിങ്ങൾ ഞങ്ങളുടെ ഉറവിട ഫയലുകൾ ഡൗൺലോഡ് ചെയ്‌ത് ഒരു പാക്കേജ് മാനേജർ ഉപയോഗിക്കുന്നില്ലെങ്കിൽ, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഉറവിട ഫയലുകൾ നിങ്ങളുടേതിൽ നിന്ന് വേറിട്ട് നിർത്തിക്കൊണ്ട്, ആ ഘടനയ്ക്ക് സമാനമായ എന്തെങ്കിലും സ്വമേധയാ സജ്ജീകരിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കും.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

ഇറക്കുമതി ചെയ്യുന്നു

നിങ്ങളുടെ ൽ custom.scss, നിങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഉറവിട സാസ് ഫയലുകൾ ഇറക്കുമതി ചെയ്യും. നിങ്ങൾക്ക് രണ്ട് ഓപ്ഷനുകൾ ഉണ്ട്: എല്ലാ ബൂട്ട്സ്ട്രാപ്പും ഉൾപ്പെടുത്തുക, അല്ലെങ്കിൽ നിങ്ങൾക്ക് ആവശ്യമുള്ള ഭാഗങ്ങൾ തിരഞ്ഞെടുക്കുക. ഞങ്ങളുടെ ഘടകങ്ങളിൽ ഉടനീളം ചില ആവശ്യകതകളും ആശ്രിതത്വങ്ങളും ഉണ്ടെന്ന് അറിഞ്ഞിരിക്കുകയാണെങ്കിലും, രണ്ടാമത്തേതിനെ ഞങ്ങൾ പ്രോത്സാഹിപ്പിക്കുന്നു. ഞങ്ങളുടെ പ്ലഗിനുകൾക്കായി നിങ്ങൾ കുറച്ച് 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.scssനിങ്ങളുടെ ആരംഭ പോയിന്റായി ഉപയോഗിക്കാൻ ഞങ്ങൾ നിർദ്ദേശിക്കുന്നു.

വേരിയബിൾ ഡിഫോൾട്ടുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് 4-ലെ എല്ലാ Sass വേരിയബിളിലും !defaultബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ സോഴ്‌സ് കോഡ് പരിഷ്‌ക്കരിക്കാതെ തന്നെ നിങ്ങളുടെ സ്വന്തം Sass-ൽ വേരിയബിളിന്റെ ഡിഫോൾട്ട് മൂല്യം അസാധുവാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഫ്ലാഗ് ഉൾപ്പെടുന്നു. വേരിയബിളുകൾ ആവശ്യാനുസരണം പകർത്തി ഒട്ടിക്കുക, അവയുടെ മൂല്യങ്ങൾ പരിഷ്ക്കരിക്കുക, !defaultഫ്ലാഗ് നീക്കം ചെയ്യുക. ഒരു വേരിയബിൾ ഇതിനകം അസൈൻ ചെയ്‌തിട്ടുണ്ടെങ്കിൽ, ബൂട്ട്‌സ്‌ട്രാപ്പിലെ ഡിഫോൾട്ട് മൂല്യങ്ങൾ അത് വീണ്ടും അസൈൻ ചെയ്യില്ല.

എന്നതിൽ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വേരിയബിളുകളുടെ പൂർണ്ണമായ ലിസ്റ്റ് നിങ്ങൾ കണ്ടെത്തും scss/_variables.scss. ചില വേരിയബിളുകൾ എന്നതായി സജ്ജീകരിച്ചിരിക്കുന്നു null, ഈ വേരിയബിളുകൾ നിങ്ങളുടെ കോൺഫിഗറേഷനിൽ അസാധുവാക്കപ്പെടുന്നില്ലെങ്കിൽ പ്രോപ്പർട്ടി ഔട്ട്പുട്ട് ചെയ്യില്ല.

ഒരേ Sass ഫയലിനുള്ളിലെ വേരിയബിൾ ഓവർറൈഡുകൾ ഡിഫോൾട്ട് വേരിയബിളുകൾക്ക് മുമ്പോ ശേഷമോ വരാം. എന്നിരുന്നാലും, Sass ഫയലുകളിൽ ഉടനീളം അസാധുവാക്കുമ്പോൾ, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ Sass ഫയലുകൾ ഇറക്കുമതി ചെയ്യുന്നതിന് മുമ്പ് നിങ്ങളുടെ ഓവർറൈഡുകൾ വന്നിരിക്കണം.

npm വഴി ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇറക്കുമതി ചെയ്യുമ്പോഴും കംപൈൽ ചെയ്യുമ്പോഴും background-colorമാറ്റുന്ന colorഒരു ഉദാഹരണം ഇതാ :<body>

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

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

ചുവടെയുള്ള ഗ്ലോബൽ ഓപ്‌ഷനുകൾ ഉൾപ്പെടെ, ബൂട്ട്‌സ്‌ട്രാപ്പിലെ ഏത് വേരിയബിളിനും ആവശ്യാനുസരണം ആവർത്തിക്കുക.

മാപ്പുകളും ലൂപ്പുകളും

ബൂട്ട്‌സ്‌ട്രാപ്പ് 4-ൽ ഒരുപിടി സാസ് മാപ്പുകൾ ഉൾപ്പെടുന്നു, ബന്ധപ്പെട്ട CSS-ന്റെ ഫാമിലികൾ ജനറേറ്റുചെയ്യുന്നത് എളുപ്പമാക്കുന്ന പ്രധാന മൂല്യ ജോഡികൾ. ഞങ്ങളുടെ നിറങ്ങൾ, ഗ്രിഡ് ബ്രേക്ക്‌പോയിന്റുകൾ എന്നിവയ്‌ക്കും മറ്റും ഞങ്ങൾ സാസ് മാപ്പുകൾ ഉപയോഗിക്കുന്നു. Sass വേരിയബിളുകൾ പോലെ, എല്ലാ Sass മാപ്പുകളിലും !defaultഫ്ലാഗ് ഉൾപ്പെടുന്നു, അത് അസാധുവാക്കാനും വിപുലീകരിക്കാനും കഴിയും.

ഞങ്ങളുടെ ചില 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 മാപ്പിന്റെ കീ ഉപയോഗിക്കുന്നിടത്ത് നിങ്ങൾക്ക് പിശകുകൾ നേരിടാം.

ഉദാഹരണത്തിന്, ലിങ്കുകൾ, ബട്ടണുകൾ, ഫോം അവസ്ഥകൾ എന്നിവയ്ക്കായി ഞങ്ങൾ 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);
}

നിങ്ങൾ 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);
}

അധിക സാസ് മാപ്പുകൾക്കായി ലെവൽ ഫംഗ്‌ഷനുകൾ സൃഷ്‌ടിക്കുന്നതിന് ഭാവിയിൽ അധിക ഫംഗ്‌ഷനുകൾ അല്ലെങ്കിൽ നിങ്ങളുടെ സ്വന്തം ഇഷ്‌ടാനുസൃത സാസ് ചേർക്കാം, അല്ലെങ്കിൽ നിങ്ങൾക്ക് കൂടുതൽ വാചാലനാകണമെങ്കിൽ പൊതുവായ ഒന്ന്.

വർണ്ണ വൈരുദ്ധ്യം

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഞങ്ങൾ ഉൾപ്പെടുത്തുന്ന ഒരു അധിക ഫംഗ്‌ഷൻ വർണ്ണ കോൺട്രാസ്റ്റ് ഫംഗ്‌ഷനാണ്, 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`
}

എസ്‌കേപ്പ് എസ്‌വിജി

എസ്‌വി‌ജി പശ്ചാത്തല ചിത്രങ്ങളിൽ 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);
}

സാസ് ഓപ്ഷനുകൾ

ഞങ്ങളുടെ ബിൽറ്റ്-ഇൻ ഇഷ്‌ടാനുസൃത വേരിയബിൾ ഫയൽ ഉപയോഗിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് 4 ഇഷ്‌ടാനുസൃതമാക്കുകയും പുതിയ $enable-*സാസ് വേരിയബിളുകൾ ഉപയോഗിച്ച് ആഗോള CSS മുൻഗണനകൾ എളുപ്പത്തിൽ മാറ്റുകയും ചെയ്യുക. ഒരു വേരിയബിളിന്റെ മൂല്യം അസാധുവാക്കുകയും npm run testആവശ്യാനുസരണം വീണ്ടും കമ്പൈൽ ചെയ്യുകയും ചെയ്യുക.

scss/_variables.scssബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഫയലിലെ പ്രധാന ആഗോള ഓപ്ഷനുകൾക്കായി നിങ്ങൾക്ക് ഈ വേരിയബിളുകൾ കണ്ടെത്താനും ഇഷ്ടാനുസൃതമാക്കാനും കഴിയും .

നിറം

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പല ഘടകങ്ങളും യൂട്ടിലിറ്റികളും ഒരു സാസ് മാപ്പിൽ നിർവചിച്ചിരിക്കുന്ന നിറങ്ങളുടെ ഒരു ശ്രേണിയിലൂടെയാണ് നിർമ്മിച്ചിരിക്കുന്നത്. റൂൾസെറ്റുകളുടെ ഒരു ശ്രേണി വേഗത്തിൽ സൃഷ്ടിക്കാൻ ഈ മാപ്പ് സാസിൽ ലൂപ്പ് ചെയ്യാൻ കഴിയും.

എല്ലാ നിറങ്ങളും

ബൂട്ട്‌സ്‌ട്രാപ്പ് 4-ൽ ലഭ്യമായ എല്ലാ നിറങ്ങളും Sass വേരിയബിളായും scss/_variables.scssഫയലിൽ ഒരു 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 വേരിയബിളുകളും ഒരു സാസ് മാപ്പും ലഭ്യമാണ് .

ചാരനിറം

scss/_variables.scssനിങ്ങളുടെ പ്രോജക്‌റ്റിൽ ഉടനീളം ചാരനിറത്തിലുള്ള സ്ഥിരതയുള്ള ഷേഡുകൾക്കായി ഗ്രേ വേരിയബിളുകളുടെ വിപുലമായ ഒരു കൂട്ടവും സാസ് മാപ്പും . ഇവ "തണുത്ത ചാരനിറങ്ങൾ" ആണെന്ന് ശ്രദ്ധിക്കുക, ഇത് ന്യൂട്രൽ ഗ്രേകളേക്കാൾ സൂക്ഷ്മമായ നീല ടോണിലേക്ക് ചായുന്നു.

ഉള്ളിൽ scss/_variables.scss, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ കളർ വേരിയബിളുകളും സാസ് മാപ്പും നിങ്ങൾ കണ്ടെത്തും. $colorsസാസ് മാപ്പിന്റെ ഒരു ഉദാഹരണം ഇതാ :

$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;

മ��്റ് പല ഘടകങ്ങളിലും അവ എങ്ങനെ ഉപയോഗിക്കുന്നു എന്നത് അപ്‌ഡേറ്റ് ചെയ്യുന്നതിന് മാപ്പിനുള്ളിൽ മൂല്യങ്ങൾ ചേർക്കുക, നീക്കം ചെയ്യുക അല്ലെങ്കിൽ പരിഷ്‌ക്കരിക്കുക. നിർഭാഗ്യവശാൽ ഈ സമയത്ത്, എല്ലാ ഘടകങ്ങളും ഈ സാസ് മാപ്പ് ഉപയോഗിക്കുന്നില്ല. ഭാവിയിലെ അപ്‌ഡേറ്റുകൾ ഇത് മെച്ചപ്പെടുത്താൻ ശ്രമിക്കും. അതുവരെ, ${color}വേരിയബിളുകളും ഈ സാസ് മാപ്പും ഉപയോഗിക്കാൻ പ്ലാൻ ചെയ്യുക.

ഘടകങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പല ഘടകങ്ങളും യൂട്ടിലിറ്റികളും @eachഒരു സാസ് മാപ്പിൽ ആവർത്തിക്കുന്ന ലൂപ്പുകൾ ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്. $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);
}

പ്രതികരണശേഷിയുള്ള

ഈ സാസ് ലൂപ്പുകൾ വർണ്ണ മാപ്പുകളിൽ മാത്രമായി പരിമിതപ്പെടുത്തിയിട്ടില്ല. നിങ്ങളുടെ ഘടകങ്ങളുടെയോ യൂട്ടിലിറ്റികളുടെയോ പ്രതികരിക്കുന്ന വ്യതിയാനങ്ങൾ നിങ്ങൾക്ക് സൃഷ്ടിക്കാനും കഴിയും. ഉദാഹരണത്തിന്, ഞങ്ങളുടെ പ്രതികരണാത്മക ടെക്സ്റ്റ് അലൈൻമെന്റ് യൂട്ടിലിറ്റികൾ എടുക്കുക, അവിടെ ഞങ്ങൾ മീഡിയാ അന്വേഷണത്തിൽ സാസ് മാപ്പിനായി ഒരു @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", 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);
  }
}