നിറം

തീം നിറങ്ങൾ

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

ഈ നിറങ്ങളെല്ലാം ഒരു സാസ് മാപ്പായി ലഭ്യമാണ്, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

ഈ നിറങ്ങൾ എങ്ങനെ പരിഷ്ക്കരിക്കാം എന്നറിയാൻ ഞങ്ങളുടെ Sass മാപ്പുകളും ലൂപ്പ് ഡോക്‌സും പരിശോധിക്കുക .

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

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

നിങ്ങൾ നിറങ്ങൾ ഇഷ്ടാനുസൃതമാക്കുമ്പോൾ കോൺട്രാസ്റ്റ് അനുപാതങ്ങൾ നിരീക്ഷിക്കുന്നത് ഉറപ്പാക്കുക. ചുവടെ കാണിച്ചിരിക്കുന്നതുപോലെ, ഓരോ പ്രധാന വർണ്ണങ്ങൾക്കും ഞങ്ങൾ മൂന്ന് കോൺട്രാസ്റ്റ് അനുപാതങ്ങൾ ചേർത്തിട്ടുണ്ട്-ഒന്ന് സ്വച്ചിന്റെ നിലവിലെ നിറങ്ങൾക്ക്, ഒന്ന് വെളുപ്പിന് എതിരായി, ഒന്ന് കറുപ്പിന് എതിരായി.

സാസിനെ കുറിച്ചുള്ള കുറിപ്പുകൾ

സാസിന് പ്രോഗ്രമാറ്റിക്കായി വേരിയബിളുകൾ സൃഷ്ടിക്കാൻ കഴിയില്ല, അതിനാൽ ഓരോ ടിന്റിനും ഷേഡിനും വേണ്ടി ഞങ്ങൾ സ്വയം വേരിയബിളുകൾ സൃഷ്ടിച്ചു. ഞങ്ങൾ മിഡ്‌പോയിന്റ് മൂല്യം (ഉദാ, $blue-500) വ്യക്തമാക്കുകയും Sass-ന്റെ വർണ്ണ ഫംഗ്‌ഷൻ വഴി ഞങ്ങളുടെ വർണ്ണങ്ങൾക്ക് നിറം നൽകുന്നതിനും (ഇളക്കമാക്കുന്നതിനും) ഷേഡ് (കറുക്കുന്നതിനും) ഇഷ്‌ടാനുസൃത വർണ്ണ ഫംഗ്‌ഷനുകൾ ഉപയോഗിക്കുന്നു mix().

ഉപയോഗിക്കുന്നത് mix()സമാനമല്ല lighten()കൂടാതെ darken()— ആദ്യത്തേത് നിർദ്ദിഷ്ട വർണ്ണത്തെ വെള്ളയോ കറുപ്പോ ഉപയോഗിച്ച് ലയിപ്പിക്കുന്നു, രണ്ടാമത്തേത് ഓരോ നിറത്തിന്റെയും പ്രകാശ മൂല്യം മാത്രം ക്രമീകരിക്കുന്നു. ഈ CodePen ഡെമോയിൽ കാണിച്ചിരിക്കുന്നതുപോലെ , കൂടുതൽ പൂർണ്ണമായ നിറങ്ങളുടെ സ്യൂട്ടാണ് ഫലം .

ഞങ്ങളുടെ വേരിയബിളിനൊപ്പം ഞങ്ങളും tint-color()ഫംഗ്‌ഷനുകളും shade-color()ഉപയോഗിക്കുന്നു , ഇത് ഞങ്ങൾ ഉൽ‌പാദിപ്പിക്കുന്ന ഓരോ മിക്സഡ് നിറത്തിനും ഒരു സ്റ്റെപ്പ് ശതമാനം മൂല്യം വ്യക്തമാക്കുന്നു. മുഴുവൻ സോഴ്സ് കോഡിനായി ഫയലുകളും കാണുക .mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

കളർ സാസ് മാപ്പുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ സോഴ്‌സ് സാസ് ഫയലുകളിൽ നിറങ്ങളുടെയും അവയുടെ ഹെക്‌സ് മൂല്യങ്ങളുടെയും ലിസ്റ്റിൽ വേഗത്തിലും എളുപ്പത്തിലും ലൂപ്പ് ചെയ്യാൻ നിങ്ങളെ സഹായിക്കുന്നതിന് മൂന്ന് മാപ്പുകൾ ഉൾപ്പെടുന്നു.

• $colorsലഭ്യമായ എല്ലാ അടിസ്ഥാന ( 500) നിറങ്ങളും ലിസ്റ്റുചെയ്യുന്നു
• $theme-colorsഅർത്ഥപരമായി പേരുള്ള എല്ലാ തീം നിറങ്ങളും ലിസ്റ്റുചെയ്യുന്നു (ചുവടെ കാണിച്ചിരിക്കുന്നു)
• $graysചാരനിറത്തിലുള്ള എല്ലാ നിറങ്ങളും ഷേഡുകളും പട്ടികപ്പെടുത്തുന്നു

ഉള്ളിൽ 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,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

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

ഉദാഹരണം

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

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

വർണ്ണ മൂല്യങ്ങൾ സജ്ജീകരിക്കുന്നതിനും ഉപയോഗിക്കുന്നതിനുമായി വർണ്ണ , പശ്ചാത്തല യൂട്ടിലിറ്റി ക്ലാസുകളും ലഭ്യമാണ് .colorbackground-color500

യൂട്ടിലിറ്റികൾ സൃഷ്ടിക്കുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ എല്ലാ കളർ വേരിയബിളുകൾക്കുമുള്ള യൂട്ടിലിറ്റികളും ഉൾപ്പെടുന്നില്ല color, എന്നാൽ ഞങ്ങളുടെ യൂട്ടിലിറ്റി എപിഐയും v5.1.0-ൽ ചേർത്ത ഞങ്ങളുടെ വിപുലീകൃത സാസ് മാപ്പും background-colorഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇവ സ്വയം സൃഷ്ടിക്കാനാകും .

1. ആരംഭിക്കുന്നതിന്, നിങ്ങൾ ഞങ്ങളുടെ ഫംഗ്‌ഷനുകൾ, വേരിയബിളുകൾ, മിക്‌സിനുകൾ, യൂട്ടിലിറ്റികൾ എന്നിവ ഇറക്കുമതി ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
2. map-merge-multiple()ഒരു പുതിയ മാപ്പിൽ ഒന്നിലധികം സാസ് മാപ്പുകൾ വേഗത്തിൽ ലയിപ്പിക്കാൻ ഞങ്ങളുടെ പ്രവർത്തനം ഉപയോഗിക്കുക .
3. {color}-{level}ഏത് യൂട്ടിലിറ്റിയും ഒരു ക്ലാസ് നാമത്തിൽ വിപുലീകരിക്കാൻ ഈ പുതിയ സംയോജിത മാപ്പ് ലയിപ്പിക്കുക .

.text-purple-500മുകളിലുള്ള ഘട്ടങ്ങൾ ഉപയോഗിച്ച് ടെക്സ്റ്റ് കളർ യൂട്ടിലിറ്റികൾ (ഉദാ, ) സൃഷ്ടിക്കുന്ന ഒരു ഉദാഹരണം ഇതാ .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

ഇത് എല്ലാ നിറങ്ങൾക്കും ലെവലുകൾക്കുമായി പുതിയ .text-{color}-{level}യൂട്ടിലിറ്റികൾ സൃഷ്ടിക്കും. മറ്റേതൊരു യൂട്ടിലിറ്റിക്കും പ്രോപ്പർട്ടിക്കും നിങ്ങൾക്ക് ഇത് ചെയ്യാൻ കഴിയും.