തീമിംഗ് ബൂട്ട്സ്ട്രാപ്പ്
എളുപ്പമുള്ള തീമിംഗിനും ഘടകങ്ങൾ മാറ്റുന്നതിനുമുള്ള ആഗോള ശൈലി മുൻഗണനകൾക്കായി ഞങ്ങളുടെ പുതിയ ബിൽറ്റ്-ഇൻ സാസ് വേരിയബിളുകൾ ഉപയോഗിച്ച് ബൂട്ട്സ്ട്രാപ്പ് 4 ഇഷ്‌ടാനുസൃതമാക്കുക.
distബൂട്ട്സ്ട്രാപ്പ് 3-ൽ, തീമിംഗ് പ്രധാനമായും നയിക്കുന്നത് കുറവ്, ഇഷ്‌ടാനുസൃത CSS, ഞങ്ങളുടെ ഫയലുകളിൽ ഞങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുള്ള ഒരു പ്രത്യേക തീം സ്റ്റൈൽഷീറ്റ് എന്നിവയിലെ വേരിയബിൾ ഓവർറൈഡുകളാണ് . കുറച്ച് പ്രയത്നത്തിലൂടെ, കോർ ഫയലുകളിൽ സ്പർശിക്കാതെ തന്നെ ബൂട്ട്സ്ട്രാപ്പ് 3-ന്റെ രൂപം പൂർണ്ണമായും പുനർരൂപകൽപ്പന ചെയ്യാൻ കഴിയും. ബൂട്ട്സ്ട്രാപ്പ് 4 പരിചിതമായ, എന്നാൽ അല്പം വ്യത്യസ്തമായ ഒരു സമീപനം നൽകുന്നു.
ഇപ്പോൾ, സാസ് വേരിയബിളുകൾ, സാസ് മാപ്പുകൾ, ഇഷ്‌ടാനുസൃത CSS എന്നിവയാൽ തീമിംഗ് നിർവ്വഹിക്കുന്നു. കൂടുതൽ സമർപ്പിത തീം സ്റ്റൈൽഷീറ്റ് ഇല്ല; പകരം, ഗ്രേഡിയന്റുകളും ഷാഡോകളും മറ്റും ചേർക്കുന്നതിന് നിങ്ങൾക്ക് അന്തർനിർമ്മിത തീം പ്രവർത്തനക്ഷമമാക്കാം.
വേരിയബിളുകൾ, മാപ്പുകൾ, മിക്‌സിനുകൾ എന്നിവയും മറ്റും പ്രയോജനപ്പെടുത്താൻ ഞങ്ങളുടെ സോഴ്‌സ് Sass ഫയലുകൾ ഉപയോഗിക്കുക.
സാധ്യമാകുമ്പോഴെല്ലാം, ബൂട്ട്സ്ട്രാപ്പിന്റെ പ്രധാന ഫയലുകൾ പരിഷ്‌ക്കരിക്കുന്നത് ഒഴിവാക്കുക. 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ഫ്ലാഗ് നീക്കം ചെയ്യുക. ഒരു വേരിയബിൾ ഇതിനകം അസൈൻ ചെയ്‌തിട്ടുണ്ടെങ്കിൽ, ബൂട്ട്‌സ്‌ട്രാപ്പിലെ ഡിഫോൾട്ട് മൂല്യങ്ങൾ അത് വീണ്ടും അസൈൻ ചെയ്യില്ല.
ഒരേ 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:
$theme-colors: map-remove($theme-colors, "success", "info", "danger");ബൂട്ട്സ്ട്രാപ്പ് സാസ് മാപ്പുകളിൽ ചില പ്രത്യേക കീകളുടെ സാന്നിധ്യം ഞങ്ങൾ അനുമാനിക്കുകയും അവ സ്വയം വിപുലീകരിക്കുകയും ചെയ്യുന്നു. നിങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുള്ള മാപ്പുകൾ ഇഷ്‌ടാനുസൃതമാക്കുമ്പോൾ, ഒരു നിർദ്ദിഷ്ട 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`
}ഞങ്ങളുടെ ബിൽറ്റ്-ഇൻ ഇഷ്‌ടാനുസൃത വേരിയബിൾ ഫയൽ ഉപയോഗിച്ച് ബൂട്ട്സ്ട്രാപ്പ് 4 ഇഷ്ടാനുസൃതമാക്കുകയും പുതിയ $enable-*സാസ് വേരിയബിളുകൾ ഉപയോഗിച്ച് ആഗോള CSS മുൻഗണനകൾ എളുപ്പത്തിൽ മാറ്റുകയും ചെയ്യുക. ഒരു വേരിയബിളിന്റെ മൂല്യം അസാധുവാക്കുകയും npm run testആവശ്യാനുസരണം വീണ്ടും കമ്പൈൽ ചെയ്യുകയും ചെയ്യുക.
ഞങ്ങളുടെ _variables.scssഫയലിലെ പ്രധാന ആഗോള ഓപ്ഷനുകൾക്കായി നിങ്ങൾക്ക് ഈ വേരിയബിളുകൾ കണ്ടെത്താനും ഇഷ്ടാനുസൃതമാക്കാനും കഴിയും.
| വേരിയബിൾ | മൂല്യങ്ങൾ | വിവരണം |
|---|---|---|
$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 |
പ്രിന്റിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ശൈലികൾ പ്രവർത്തനക്ഷമമാക്കുന്നു. |
ബൂട്ട്സ്ട്രാപ്പിന്റെ പല ഘടകങ്ങളും യൂട്ടിലിറ്റികളും ഒരു സാസ് മാപ്പിൽ നിർവചിച്ചിരിക്കുന്ന നിറങ്ങളുടെ ഒരു ശ്രേണിയിലൂടെയാണ് നിർമ്മിച്ചിരിക്കുന്നത്. റൂൾസെറ്റുകളുടെ ഒരു ശ്രേണി വേഗത്തിൽ സൃഷ്ടിക്കാൻ ഈ മാപ്പ് സാസിൽ ലൂപ്പ് ചെയ്യാൻ കഴിയും.
ബൂട്ട്സ്ട്രാപ്പ് 4-ൽ ലഭ്യമായ എല്ലാ നിറങ്ങളും സാസ് വേരിയബിളായും ഞങ്ങളുടെ scss/_variables.scssഫയലിൽ ഒരു സാസ് മാപ്പായും ലഭ്യമാണ്. ഞങ്ങൾ ഇതിനകം ഉൾപ്പെടുത്തിയിരിക്കുന്ന ഗ്രേസ്‌കെയിൽ പാലറ്റ് പോലെ, അധിക ഷേഡുകൾ ചേർക്കുന്നതിന് തുടർന്നുള്ള ചെറിയ റിലീസുകളിൽ ഇത് വിപുലീകരിക്കും .
നിങ്ങളുടെ സാസിൽ ഇവ എങ്ങനെ ഉപയോഗിക്കാമെന്നത് ഇതാ:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }colorക്രമീകരണത്തിനും ഒപ്പം വർണ്ണ യൂട്ടിലിറ്റി ക്ലാസുകളും ലഭ്യമാണ് background-color.
ഭാവിയിൽ, ചുവടെയുള്ള ഗ്രേസ്‌കെയിൽ നിറങ്ങൾ ഉപയോഗിച്ച് ഞങ്ങൾ ചെയ്‌തിരിക്കുന്നതുപോലെ ഓരോ നിറത്തിന്റെയും ഷേഡുകൾക്ക് സാസ് മാപ്പുകളും വേരിയബിളുകളും നൽകാൻ ഞങ്ങൾ ലക്ഷ്യമിടുന്നു.
വർണ്ണ സ്കീമുകൾ സൃഷ്ടിക്കുന്നതിന് ഒരു ചെറിയ വർണ്ണ പാലറ്റ് സൃഷ്ടിക്കാൻ ഞങ്ങൾ എല്ലാ നിറങ്ങളുടെയും ഒരു ഉപവിഭാഗം ഉപയോഗിക്കുന്നു, ഇത് ഞങ്ങളുടെ scss/_variables.scssഫയലിൽ Sass വേരിയബിളുകളും ഒരു Sass മാപ്പും ആയി ലഭ്യമാണ്.
scss/_variables.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, ആ മാപ്പിൽ ആവർത്തിക്കുന്ന എല്ലാ ലൂപ്പുകളിലും നിങ്ങളുടെ മാറ്റങ്ങൾ ബാധകമാകും.
ബൂട്ട്സ്ട്രാപ്പ് 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);
}നിങ്ങളുടെ മീഡിയ ചോദ്യങ്ങളിൽ ഞങ്ങളുടെ ബ്രേക്ക്‌പോയിന്റ് വേരിയബിളുകളും നിങ്ങൾക്ക് ഉപയോഗിക്കാം:
.content-secondary {
display: none;
}
@media (min-width(var(--breakpoint-sm))) {
.content-secondary {
display: block;
}
}