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

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

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

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

: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-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --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));
}

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

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

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

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

ഉദാഹരണങ്ങൾ

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

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