CSS വേരിയബിളുകൾ

Sass വീണ്ടും കംപൈൽ ചെയ്യാതെ തന്നെ തത്സമയ ഇഷ്‌ടാനുസൃതമാക്കലിനായി ബൂട്ട്‌സ്‌ട്രാപ്പ് അതിന്റെ സമാഹരിച്ച CSS-ൽ നിരവധി CSS ഇഷ്‌ടാനുസൃത പ്രോപ്പർട്ടികൾ (വേരിയബിളുകൾ) ഉൾക്കൊള്ളുന്നു. നിങ്ങളുടെ ബ്രൗസറിന്റെ ഇൻസ്പെക്ടർ, ഒരു കോഡ് സാൻഡ്‌ബോക്‌സ് അല്ലെങ്കിൽ പൊതുവായ പ്രോട്ടോടൈപ്പിംഗ് എന്നിവയിൽ പ്രവർത്തിക്കുമ്പോൾ ഞങ്ങളുടെ തീം വർണ്ണങ്ങൾ, ബ്രേക്ക്‌പോയിന്റുകൾ, പ്രാഥമിക ഫോണ്ട് സ്റ്റാക്കുകൾ എന്നിവ പോലുള്ള സാധാരണ ഉപയോഗിക്കുന്ന മൂല്യങ്ങളിലേക്ക് ഇവ എളുപ്പത്തിൽ ആക്‌സസ് നൽകുന്നു.

ഞങ്ങളുടെ എല്ലാ ഇഷ്‌ടാനുസൃത പ്രോപ്പർട്ടികളുംbs- മൂന്നാം കക്ഷി CSS-യുമായുള്ള വൈരുദ്ധ്യങ്ങൾ ഒഴിവാക്കാൻ പ്രിഫിക്‌സ് ചെയ്‌തിരിക്കുന്നു.

റൂട്ട് വേരിയബിളുകൾ

:rootബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS ലോഡ് ചെയ്‌താൽ എവിടെയും ആക്‌സസ് ചെയ്യാൻ കഴിയുന്ന വേരിയബിളുകൾ ഇവിടെയുണ്ട് (ആവശ്യമാണെന്ന് ശ്രദ്ധിക്കുക ). അവ ഞങ്ങളുടെ _root.scssഫയലിൽ സ്ഥിതിചെയ്യുന്നു, ഞങ്ങളുടെ കംപൈൽ ചെയ്ത ഡിസ്റ്റ് ഫയലുകളിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

ഘടകം വേരിയബിളുകൾ

ബൂട്ട്സ്ട്രാപ്പ് 5 വിവിധ ഘടകങ്ങൾക്കായി പ്രാദേശിക വേരിയബിളുകളായി ഇഷ്‌ടാനുസൃത പ്രോപ്പർട്ടികൾ കൂടുതലായി ഉപയോഗിക്കുന്നു. ഇതുവഴി ഞങ്ങൾ സമാഹരിച്ച CSS കുറയ്ക്കുകയും, നെസ്റ്റഡ് ടേബിളുകൾ പോലെയുള്ള സ്ഥലങ്ങളിൽ ശൈലികൾ പാരമ്പര്യമായി ലഭിക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുകയും, Sass കംപൈലേഷനുശേഷം ബൂട്ട്‌സ്‌ട്രാപ്പ് ഘടകങ്ങളുടെ അടിസ്ഥാന പുനർക്രമീകരണവും വിപുലീകരണവും അനുവദിക്കുകയും ചെയ്യുന്നു.

ഞങ്ങൾ എങ്ങനെ CSS വേരിയബിളുകൾ ഉപയോഗിക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള ചില ഉൾക്കാഴ്ചയ്ക്കായി ഞങ്ങളുടെ പട്ടിക ഡോക്യുമെന്റേഷൻ നോക്കുക . ഞങ്ങളുടെ navbars v5.2.0-ലെ CSS വേരിയബിളുകളും ഉപയോഗിക്കുന്നു . ഞങ്ങളുടെ ഗ്രിഡുകളിലുടനീളം ഞങ്ങൾ CSS വേരിയബിളുകളും ഉപയോഗിക്കുന്നു—പ്രാഥമികമായി പുതിയ ഓപ്റ്റ്-ഇൻ CSS ഗ്രിഡ് ഗട്ടറുകൾക്കായി—ഭാവിയിൽ കൂടുതൽ ഘടക ഉപയോഗത്തോടെ.

സാധ്യമാകുമ്പോഴെല്ലാം, അടിസ്ഥാന ഘടക തലത്തിൽ ഞങ്ങൾ CSS വേരിയബിളുകൾ അസൈൻ ചെയ്യും (ഉദാ, .navbarനവബാറിനും അതിന്റെ ഉപഘടകങ്ങൾക്കും). ഇത് എവിടെ, എങ്ങനെ ഇഷ്‌ടാനുസൃതമാക്കാം എന്നതിനെക്കുറിച്ചുള്ള ഊഹം കുറയ്ക്കുന്നു, കൂടാതെ ഭാവിയിലെ അപ്‌ഡേറ്റുകളിൽ ഞങ്ങളുടെ ടീം എളുപ്പത്തിൽ പരിഷ്‌ക്കരിക്കുന്നതിന് അനുവദിക്കുന്നു.

ഉപസർഗ്ഗം

മിക്ക CSS വേരിയബിളുകളും നിങ്ങളുടെ സ്വന്തം കോഡ്ബേസുമായി കൂട്ടിയിടിക്കാതിരിക്കാൻ ഒരു പ്രിഫിക്‌സ് ഉപയോഗിക്കുന്നു. ഈ പ്രിഫിക്‌സ് --എല്ലാ CSS വേരിയബിളിലും ആവശ്യമായതിന് പുറമേയാണ്.

$prefixSass വേരിയബിൾ വഴി പ്രിഫിക്‌സ് ഇഷ്ടാനുസൃതമാക്കുക . സ്ഥിരസ്ഥിതിയായി, ഇത് സജ്ജീകരിച്ചിരിക്കുന്നു bs-(ട്രെയിലിംഗ് ഡാഷ് ശ്രദ്ധിക്കുക).

ഉദാഹരണങ്ങൾ

CSS വേരിയബിളുകൾ Sass-ന്റെ വേരിയബിളുകൾക്ക് സമാനമായ ഫ്ലെക്സിബിലിറ്റി വാഗ്ദാനം ചെയ്യുന്നു, എന്നാൽ ബ്രൗസറിലേക്ക് നൽകുന്നതിന് മുമ്പ് കംപൈലേഷൻ ആവശ്യമില്ല. ഉദാഹരണത്തിന്, ഇവിടെ ഞങ്ങൾ ഞങ്ങളുടെ പേജിന്റെ ഫോണ്ടും ലിങ്ക് ശൈലികളും CSS വേരിയബിളുകൾ ഉപയോഗിച്ച് പുനഃസജ്ജീകരിക്കുകയാണ്.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

ഗ്രിഡ് ബ്രേക്ക്‌പോയിന്റുകൾ

ഞങ്ങളുടെ ഗ്രിഡ് ബ്രേക്ക്‌പോയിന്റുകൾ CSS വേരിയബിളുകളായി ഉൾപ്പെടുത്തുമ്പോൾ (ഒഴികെ xs), മീഡിയാ അന്വേഷണങ്ങളിൽ CSS വേരിയബിളുകൾ പ്രവർത്തിക്കില്ല എന്ന കാര്യം ശ്രദ്ധിക്കുക . ഇത് വേരിയബിളുകൾക്കായുള്ള CSS സ്പെസിഫിക്കേഷനിൽ രൂപകൽപ്പന ചെയ്തതാണ്, എന്നാൽ env()വേരിയബിളുകൾക്കുള്ള പിന്തുണയോടെ വരും വർഷങ്ങളിൽ ഇത് മാറിയേക്കാം. സഹായകരമായ ചില ലിങ്കുകൾക്കായി ഈ സ്റ്റാക്ക് ഓവർഫ്ലോ ഉത്തരം പരിശോധിക്കുക . ഇതിനിടയിൽ, നിങ്ങൾക്ക് ഈ വേരിയബിളുകൾ മറ്റ് CSS സാഹചര്യങ്ങളിലും നിങ്ങളുടെ JavaScript-ലും ഉപയോഗിക്കാം.