in English

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

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

ആമുഖം

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

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

സാസ്

നിങ്ങളുടെ സ്വന്തം അസറ്റ് പൈപ്പ്‌ലൈൻ ഉപയോഗിച്ച് Sass കംപൈൽ ചെയ്യുമ്പോൾ വേരിയബിളുകൾ, മാപ്പുകൾ, മിക്‌സിനുകൾ എന്നിവയും മറ്റും പ്രയോജനപ്പെടുത്താൻ ഞങ്ങളുടെ സോഴ്‌സ് 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

// 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";

// 4. Include any optional Bootstrap components as you like
@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നിങ്ങളുടെ ആരംഭ പോയിന്റായി ഉപയോഗിക്കാൻ ഞങ്ങൾ നിർദ്ദേശിക്കുന്നു.

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

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

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

ഞങ്ങളുടെ ഫംഗ്‌ഷനുകൾ, വേരിയബിളുകൾ, മിക്‌സിനുകൾ എന്നിവ ഇറക്കുമതി ചെയ്‌തതിന് ശേഷം വേരിയബിൾ ഓവർറൈഡുകൾ വരണം, എന്നാൽ ബാക്കിയുള്ള ഇറക്കുമതികൾക്ക് മുമ്പ്.

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

@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";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

ഞങ്ങളുടെ സ്റ്റാർട്ടർ പ്രോജക്‌റ്റ് ഉപയോഗിച്ച് npm വഴി ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് ആരംഭിക്കുക! നിങ്ങളുടെ സ്വന്തം npm പ്രോജക്റ്റിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് എങ്ങനെ നിർമ്മിക്കാമെന്നും ഇഷ്ടാനുസൃതമാക്കാമെന്നും കാണുന്നതിന് twbs/bootstrap-npm-starter ടെംപ്ലേറ്റ് ശേഖരത്തിലേക്ക് പോകുക . Sass compiler, Autoprefixer, Stylelint, PurgeCSS, 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നിന്ന് രക്ഷപ്പെടാൻ ഞങ്ങൾ ഫംഗ്‌ഷൻ ഉപയോഗിക്കുന്നു <, >കൂടാതെ പ്രതീകങ്ങൾ. #ഐഇയിൽ പശ്ചാത്തല ചിത്രങ്ങൾ ശരിയായി റെൻഡർ ചെയ്യുന്നതിന് ഈ പ്രതീകങ്ങൾ ഒഴിവാക്കേണ്ടതുണ്ട്. 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ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഫയലിലെ പ്രധാന ആഗോള ഓപ്ഷനുകൾക്കായി നിങ്ങൾക്ക് ഈ വേരിയബിളുകൾ കണ്ടെത്താനും ഇഷ്ടാനുസൃതമാക്കാനും കഴിയും .

വേരിയബിൾ മൂല്യങ്ങൾ വിവരണം
$spacer 1rem(സ്ഥിരസ്ഥിതി), അല്ലെങ്കിൽ ഏതെങ്കിലും മൂല്യം > 0 ഞങ്ങളുടെ സ്‌പെയ്‌സർ യൂട്ടിലിറ്റികൾ പ്രോഗ്രമാറ്റിക്കായി ജനറേറ്റുചെയ്യുന്നതിന് ഡിഫോൾട്ട് സ്‌പെയ്‌സർ മൂല്യം വ്യക്തമാക്കുന്നു .
$enable-rounded true(സ്ഥിരസ്ഥിതി) അല്ലെങ്കിൽfalse border-radiusവിവിധ ഘടകങ്ങളിൽ മുൻകൂട്ടി നിശ്ചയിച്ച ശൈലികൾ പ്രവർത്തനക്ഷമമാക്കുന്നു.
$enable-shadows trueഅല്ലെങ്കിൽ false(സ്ഥിരസ്ഥിതി) box-shadowവിവിധ ഘടകങ്ങളിൽ മുൻകൂട്ടി നിശ്ചയിച്ചിട്ടുള്ള അലങ്കാര ശൈലികൾ പ്രാപ്തമാക്കുന്നു . box-shadowഫോക്കസ് സ്റ്റേറ്റുകൾക്ക് ഉപയോഗിക്കുന്നതിനെ ബാധിക്കില്ല .
$enable-gradients trueഅല്ലെങ്കിൽ false(സ്ഥിരസ്ഥിതി) background-imageവിവിധ ഘടകങ്ങളിൽ ശൈലികൾ വഴി മുൻകൂട്ടി നിശ്ചയിച്ച ഗ്രേഡിയന്റുകൾ പ്രവർത്തനക്ഷമമാക്കുന്നു.
$enable-transitions true(സ്ഥിരസ്ഥിതി) അല്ലെങ്കിൽfalse transitionവിവിധ ഘടകങ്ങളിൽ മുൻകൂട്ടി നിശ്ചയിച്ച s പ്രവർത്തനക്ഷമമാക്കുന്നു.
$enable-prefers-reduced-motion-media-query true(സ്ഥിരസ്ഥിതി) അല്ലെങ്കിൽfalse ഉപയോക്താക്കളുടെ ബ്രൗസർ/ഓപ്പറേറ്റിംഗ് സിസ്റ്റം മുൻഗണനകൾ അടിസ്ഥാനമാക്കിയുള്ള ചില ആനിമേഷനുകൾ/സംക്രമണങ്ങൾ അടിച്ചമർത്തുന്ന മീഡിയ prefers-reduced-motionഅന്വേഷണം പ്രവർത്തനക്ഷമമാക്കുന്നു.
$enable-hover-media-query trueഅല്ലെങ്കിൽ false(സ്ഥിരസ്ഥിതി) ഒഴിവാക്കി
$enable-grid-classes true(സ്ഥിരസ്ഥിതി) അല്ലെങ്കിൽfalse ഗ്രിഡ് സിസ്റ്റത്തിനായി CSS ക്ലാസുകളുടെ ജനറേഷൻ പ്രവർത്തനക്ഷമമാക്കുന്നു (ഉദാ, .container, .row, .col-md-1, മുതലായവ).
$enable-caret true(സ്ഥിരസ്ഥിതി) അല്ലെങ്കിൽfalse എന്നതിൽ കപട എലമെന്റ് കെയർ പ്രവർത്തനക്ഷമമാക്കുന്നു .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(സ്ഥിരസ്ഥിതി) അല്ലെങ്കിൽfalse പ്രവർത്തനരഹിതമാക്കാത്ത ബട്ടൺ ഘടകങ്ങളിലേക്ക് "കൈ" കഴ്സർ ചേർക്കുക.
$enable-print-styles true(സ്ഥിരസ്ഥിതി) അല്ലെങ്കിൽfalse പ്രിന്റിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ശൈലികൾ പ്രവർത്തനക്ഷമമാക്കുന്നു.
$enable-responsive-font-sizes trueഅല്ലെങ്കിൽ false(സ്ഥിരസ്ഥിതി) പ്രതികരിക്കുന്ന ഫോണ്ട് വലുപ്പങ്ങൾ പ്രവർത്തനക്ഷമമാക്കുന്നു .
$enable-validation-icons true(സ്ഥിരസ്ഥിതി) അല്ലെങ്കിൽfalse വാചക ഇൻപുട്ടുകൾക്കുള്ളിലെ background-imageഐക്കണുകളും മൂല്യനിർണ്ണയ അവസ്ഥകൾക്കായി ചില ഇഷ്‌ടാനുസൃത ഫോമുകളും പ്രവർത്തനക്ഷമമാക്കുന്നു.
$enable-deprecation-messages true(സ്ഥിരസ്ഥിതി) അല്ലെങ്കിൽfalse falseഎന്നതിൽ നീക്കം ചെയ്യാൻ പദ്ധതിയിട്ടിരിക്കുന്ന ഏതെങ്കിലും ഒഴിവാക്കപ്പെട്ട മിക്‌സിനുകളും ഫംഗ്‌ഷനുകളും ഉപയോഗിക്കുമ്പോൾ മുന്നറിയിപ്പുകൾ മറയ്‌ക്കാൻ സജ്ജമാക്കുക v5.

നിറം

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

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

ബൂട്ട്‌സ്‌ട്രാപ്പ് 4-ൽ ലഭ്യമായ എല്ലാ നിറങ്ങളും Sass വേരിയബിളായും scss/_variables.scssഫയലിൽ ഒരു Sass മാപ്പായും ലഭ്യമാണ്. ഞങ്ങൾ ഇതിനകം ഉൾപ്പെടുത്തിയിരിക്കുന്ന ഗ്രേസ്‌കെയിൽ പാലറ്റ് പോലെ, അധിക ഷേഡുകൾ ചേർക്കുന്നതിന് തുടർന്നുള്ള ചെറിയ റിലീസുകളിൽ ഇത് വിപുലീകരിക്കും .

$നീല #007bff
$ഇൻഡിഗോ #6610f2
$പർപ്പിൾ #6f42c1
$പിങ്ക് #e83e8c
$ചുവപ്പ് #dc3545
$ഓറഞ്ച് #fd7e14
$മഞ്ഞ #ffc107
$പച്ച #28a745
$ടീൽ #20c997
$സിയാൻ #17a2b8

നിങ്ങളുടെ സാസിൽ ഇവ എങ്ങനെ ഉപയോഗിക്കാമെന്നത് ഇതാ:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

colorക്രമീകരണത്തിനും ഒപ്പം വർണ്ണ യൂട്ടിലിറ്റി ക്ലാസുകളും ലഭ്യമാണ് background-color.

ഭാവിയിൽ, ചുവടെയുള്ള ഗ്രേസ്‌കെയിൽ നിറങ്ങൾ ഉപയോഗിച്ച് ഞങ്ങൾ ചെയ്‌തിരിക്കുന്നതുപോലെ ഓരോ നിറത്തിന്റെയും ഷേഡുകൾക്ക് സാസ് മാപ്പുകളും വേരിയബിളുകളും നൽകാൻ ഞങ്ങൾ ലക്ഷ്യമിടുന്നു.

തീം നിറങ്ങൾ

scss/_variables.scssവർണ്ണ സ്കീമുകൾ സൃഷ്ടിക്കുന്നതിന് ഒരു ചെറിയ വർണ്ണ പാലറ്റ് സൃഷ്ടിക്കാൻ ഞങ്ങൾ എല്ലാ വർണ്ണങ്ങളുടെയും ഒരു ഉപവിഭാഗം ഉപയോഗിക്കുന്നു, ബൂട്ട്സ്ട്രാപ്പിന്റെ ഫയലിൽ Sass വേരിയബിളുകളും ഒരു സാസ് മാപ്പും ലഭ്യമാണ് .

$പ്രൈമറി #007bff
$സെക്കൻഡറി #6c757d
$വിജയം #28a745
$അപകടം #dc3545
$മുന്നറിയിപ്പ് #ffc107
$വിവരങ്ങൾ #17a2b8
$ലൈറ്റ് #f8f9fa
$ഇരുട്ട് #343a40

ചാരനിറം

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

$ ഗ്രേ-100 #f8f9fa
$ ഗ്രേ-200 #e9ecef
$ ഗ്രേ-300 #dee2e6
$ ഗ്രേ-400 #ced4da
$ ഗ്രേ-500 #adb5bd
$ ഗ്രേ-600 #6c757d
$ ഗ്രേ-700 #495057
$ ഗ്രേ-800 #343a40
$ ഗ്രേ-900 #212529

ഉള്ളിൽ 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", "Liberation 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);
  }
}