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-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", Arial, "Noto Sans", "Liberation Sans", 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;
}

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

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

ഞങ്ങൾ എങ്ങനെ CSS വേരിയബിളുകൾ ഉപയോഗിക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള ചില ഉൾക്കാഴ്ചയ്ക്കായി ഞങ്ങളുടെ പട്ടിക ഡോക്യുമെന്റേഷൻ നോക്കുക .

ഞങ്ങളുടെ ഗ്രിഡുകളിലുടനീളം ഞങ്ങൾ CSS വേരിയബിളുകളും ഉപയോഗിക്കുന്നു—പ്രാഥമികമായി ഗട്ടറുകൾക്ക്—ഭാവിയിൽ കൂടുതൽ ഘടക ഉപയോഗവും.

ഉദാഹരണങ്ങൾ

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-ലും നിങ്ങൾക്ക് ഈ വേരിയബിളുകൾ ഉപയോഗിക്കാം.