സാസ്

നിങ്ങളുടെ പ്രോജക്റ്റ് വേഗത്തിൽ നിർമ്മിക്കാനും ഇഷ്ടാനുസൃതമാക്കാനും സഹായിക്കുന്നതിന് വേരിയബിളുകൾ, മാപ്പുകൾ, മിക്‌സിനുകൾ, ഫംഗ്‌ഷനുകൾ എന്നിവ പ്രയോജനപ്പെടുത്തുന്നതിന് ഞങ്ങളുടെ സോഴ്‌സ് 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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts 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";

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

// 8. Add additional custom code here

ആ സജ്ജീകരണത്തോടെ, നിങ്ങളുടെ custom.scss. // Optionalനിങ്ങൾക്ക് ആവശ്യാനുസരണം വിഭാഗത്തിന് കീഴിൽ ബൂട്ട്സ്ട്രാപ്പിന്റെ ഭാഗങ്ങൾ ചേർക്കാനും തുടങ്ങാം . ഞങ്ങളുടെ ഫയലിൽ നിന്നുള്ള മുഴുവൻ ഇറക്കുമതി സ്റ്റാക്കും bootstrap.scssനിങ്ങളുടെ ആരംഭ പോയിന്റായി ഉപയോഗിക്കാൻ ഞങ്ങൾ നിർദ്ദേശിക്കുന്നു.

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

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

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

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

npm വഴി ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇറക്കുമതി ചെയ്യുമ്പോഴും കംപൈൽ ചെയ്യുമ്പോഴും 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/maps";
@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

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

ഞങ്ങളുടെ സ്റ്റാർട്ടർ പ്രോജക്‌റ്റ് ഉപയോഗിച്ച് npm വഴി ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് ആരംഭിക്കുക! നിങ്ങളുടെ സ്വന്തം എൻ‌പി‌എം പ്രോജക്റ്റിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് എങ്ങനെ നിർമ്മിക്കാമെന്നും ഇഷ്‌ടാനുസൃതമാക്കാമെന്നും കാണാൻ twbs/bootstrap-npm-starter ടെംപ്ലേറ്റ് ശേഖരണത്തിലേക്ക് പോകുക . Sass compiler, Autoprefixer, Stylelint, PurgeCSS, Bootstrap ഐക്കണുകൾ എന്നിവ ഉൾപ്പെടുന്നു.

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

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

ഞങ്ങളുടെ ചില Sass മാപ്പുകൾ സ്ഥിരസ്ഥിതിയായി ശൂന്യമായവയിലേക്ക് ലയിപ്പിച്ചിരിക്കുന്നു. തന്നിരിക്കുന്ന സാസ് മാപ്പിന്റെ എളുപ്പത്തിൽ വിപുലീകരിക്കാൻ അനുവദിക്കുന്നതിനാണ് ഇത് ചെയ്യുന്നത്, എന്നാൽ ഒരു മാപ്പിൽ നിന്ന് ഇനങ്ങൾ നീക്കംചെയ്യുന്നത് അൽപ്പം ബുദ്ധിമുട്ടുള്ളതാക്കുന്നു.

മാപ്പ് പരിഷ്ക്കരിക്കുക

മാപ്പിലെ എല്ലാ വേരിയബിളുകളും $theme-colorsഒറ്റപ്പെട്ട വേരിയബിളുകളായി നിർവചിച്ചിരിക്കുന്നു. ഞങ്ങളുടെ മാപ്പിൽ നിലവിലുള്ള ഒരു നിറം പരിഷ്കരിക്കുന്നതിന് $theme-colors, നിങ്ങളുടെ ഇഷ്‌ടാനുസൃത Sass ഫയലിലേക്ക് ഇനിപ്പറയുന്നവ ചേർക്കുക:

$primary: #0074d9;
$danger: #ff4136;

പിന്നീട്, ഈ വേരിയബിളുകൾ ബൂട്ട്സ്ട്രാപ്പിന്റെ $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. $theme-colorsഞങ്ങളുടെ ആവശ്യകതകൾക്കിടയിൽ അതിന്റെ നിർവചനത്തിന് ശേഷവും variablesഅതിന്റെ ഉപയോഗത്തിന് മുമ്പും നിങ്ങൾ ഉൾപ്പെടുത്തണം maps:

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

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

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

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

ആവശ്യമായ കീകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് സാസ് മാപ്പുകളിൽ ചില പ്രത്യേക കീകളുടെ സാന്നിദ്ധ്യം ഞങ്ങൾ അനുമാനിക്കുകയും അവ സ്വയം വിപുലീകരിക്കുകയും ചെയ്യുന്നു. നിങ്ങൾ ഉൾപ്പെടുത്തിയിരിക്കുന്ന മാപ്പുകൾ ഇച്ഛാനുസൃതമാക്കുമ്പോൾ, ഒരു നിർദ്ദിഷ്ട Sass മാപ്പിന്റെ കീ ഉപയോഗിക്കുന്നിടത്ത് നിങ്ങൾക്ക് പിശകുകൾ നേരിടാം.

ഉദാഹരണത്തിന്, ലിങ്കുകൾ, ബട്ടണുകൾ, ഫോം അവസ്ഥകൾ എന്നിവയ്ക്കായി ഞങ്ങൾ primary, success, എന്നിവയിൽ dangerനിന്നുള്ള കീകൾ ഉപയോഗിക്കുന്നു. $theme-colorsഈ കീകളുടെ മൂല്യങ്ങൾ മാറ്റിസ്ഥാപിക്കുന്നത് പ്രശ്‌നങ്ങളൊന്നും സൃഷ്‌ടിക്കേണ്ടതില്ല, പക്ഷേ അവ നീക്കം ചെയ്യുന്നത് Sass കംപൈലേഷൻ പ്രശ്‌നങ്ങൾക്ക് കാരണമായേക്കാം. ഈ സന്ദർഭങ്ങളിൽ, ആ മൂല്യങ്ങൾ ഉപയോഗിക്കുന്ന Sass കോഡ് നിങ്ങൾ പരിഷ്ക്കരിക്കേണ്ടതുണ്ട്.

പ്രവർത്തനങ്ങൾ

നിറങ്ങൾ

ഞങ്ങളുടെ പക്കലുള്ള Sass മാപ്പുകൾക്ക് അടുത്തായി , തീം വർണ്ണങ്ങൾ സ്റ്റാൻഡ്ലോൺ വേരിയബിളുകളായി ഉപയോഗിക്കാം $primary.

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

tint-color()ബൂട്ട്‌സ്‌ട്രാപ്പുകളും ഫംഗ്‌ഷനുകളും ഉപയോഗിച്ച് നിങ്ങൾക്ക് നിറങ്ങൾ പ്രകാശിപ്പിക്കുകയോ ഇരുണ്ടതാക്കുകയോ ചെയ്യാം shade-color(). ഈ ഫംഗ്‌ഷനുകൾ സാസിന്റെ നേറ്റീവ് പോലെയല്ലാതെ കറുപ്പും വെളുപ്പും നിറങ്ങൾ മിശ്രണം ചെയ്യും, lighten()കൂടാതെ 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) കോൺട്രാസ്റ്റ് ആവശ്യകതകൾ നിറവേറ്റുന്നതിന് , രചയിതാക്കൾ 4.5:1 ന്റെ ഏറ്റവും കുറഞ്ഞ ടെക്‌സ്‌റ്റ് വർണ്ണ കോൺട്രാസ്റ്റും 3:1 ന്റെ ഏറ്റവും കുറഞ്ഞ നോൺ-ടെക്‌സ്‌റ്റ് വർണ്ണ കോൺട്രാസ്റ്റും നൽകണം .

ഇത് സഹായിക്കുന്നതിന്, ഞങ്ങൾ color-contrastബൂട്ട്സ്ട്രാപ്പിൽ ഫംഗ്ഷൻ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. നിർദ്ദിഷ്ട അടിസ്ഥാന വർണ്ണത്തെ അടിസ്ഥാനമാക്കി ഒരു പ്രകാശം ( ), ഇരുണ്ട ( ) അല്ലെങ്കിൽ കറുപ്പ് ( ) കോൺട്രാസ്റ്റ് നിറം സ്വയമേവ തിരികെ നൽകുന്നതിന് ഒരു വർണ്ണ സ്ഥലത്ത് ആപേക്ഷിക പ്രകാശത്തെ അടിസ്ഥാനമാക്കിയുള്ള കോൺട്രാസ്റ്റ് ത്രെഷോൾഡുകൾ കണക്കാക്കുന്നതിന് ഇത് WCAG കോൺട്രാസ്റ്റ് റേഷ്യോ അൽഗോരിതം ഉപയോഗിക്കുന്നു. നിങ്ങൾ ഒന്നിലധികം ക്ലാസുകൾ സൃഷ്ടിക്കുന്ന മിക്സിനുകൾക്കോ ലൂപ്പുകൾക്കോ ഈ ഫംഗ്ഷൻ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.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നിന്ന് രക്ഷപ്പെടാൻ ഞങ്ങൾ ഫംഗ്‌ഷൻ ഉപയോഗിക്കുന്നു <, >കൂടാതെ പ്രതീകങ്ങൾ. ഫംഗ്‌ഷൻ #ഉപയോഗിക്കുമ്പോൾ , ഡാറ്റ യുആർഐകൾ ഉദ്ധരിച്ചിരിക്കണം.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എന്നിവയ്‌ക്കായുള്ള പിന്തുണയോടെ മീഡിയ അന്വേഷണത്തിനുള്ള ഒരു ഷോർട്ട്‌ഹാൻഡ് മിക്‌സിൻ ലഭ്യമാണ്.lightdark

@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
  }
}