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 ಅನ್ನು ಕಡಿಮೆಗೊಳಿಸುತ್ತೇವೆ, ನೆಸ್ಟೆಡ್ ಟೇಬಲ್‌ಗಳಂತಹ ಸ್ಥಳಗಳಲ್ಲಿ ಶೈಲಿಗಳು ಆನುವಂಶಿಕವಾಗಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುತ್ತೇವೆ ಮತ್ತು ಸಾಸ್ ಸಂಕಲನದ ನಂತರ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕಗಳ ಕೆಲವು ಮೂಲಭೂತ ಮರುಹೊಂದಿಸಲು ಮತ್ತು ವಿಸ್ತರಣೆಯನ್ನು ಅನುಮತಿಸುತ್ತೇವೆ.

ನಾವು CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಹೇಗೆ ಬಳಸುತ್ತಿದ್ದೇವೆ ಎಂಬುದರ ಕುರಿತು ಕೆಲವು ಒಳನೋಟಕ್ಕಾಗಿ ನಮ್ಮ ಟೇಬಲ್ ದಸ್ತಾವೇಜನ್ನು ನೋಡಿ . ನಮ್ಮ ನ್ಯಾವ್‌ಬಾರ್‌ಗಳು v5.2.0 ರಂತೆ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಸಹ ಬಳಸುತ್ತವೆ . ನಾವು ನಮ್ಮ ಗ್ರಿಡ್‌ಗಳಾದ್ಯಂತ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಸಹ ಬಳಸುತ್ತಿದ್ದೇವೆ—ಪ್ರಾಥಮಿಕವಾಗಿ ಹೊಸ ಆಯ್ಕೆಯ CSS ಗ್ರಿಡ್ ಗಟರ್‌ಗಳಿಗಾಗಿ— ಭವಿಷ್ಯದಲ್ಲಿ ಹೆಚ್ಚಿನ ಘಟಕ ಬಳಕೆಯೊಂದಿಗೆ.

ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ನಾವು ಮೂಲ ಘಟಕ ಮಟ್ಟದಲ್ಲಿ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ನಿಯೋಜಿಸುತ್ತೇವೆ (ಉದಾ, .navbarnavbar ಮತ್ತು ಅದರ ಉಪ-ಘಟಕಗಳಿಗಾಗಿ). ಇದು ಎಲ್ಲಿ ಮತ್ತು ಹೇಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ಎಂಬುದರ ಕುರಿತು ಊಹಿಸುವುದನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಭವಿಷ್ಯದ ನವೀಕರಣಗಳಲ್ಲಿ ನಮ್ಮ ತಂಡದಿಂದ ಸುಲಭವಾದ ಮಾರ್ಪಾಡುಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ಪೂರ್ವಪ್ರತ್ಯಯ

ಹೆಚ್ಚಿನ CSS ವೇರಿಯೇಬಲ್‌ಗಳು ನಿಮ್ಮ ಸ್ವಂತ ಕೋಡ್‌ಬೇಸ್‌ನೊಂದಿಗೆ ಘರ್ಷಣೆಯನ್ನು ತಪ್ಪಿಸಲು ಪೂರ್ವಪ್ರತ್ಯಯವನ್ನು ಬಳಸುತ್ತವೆ. ಈ ಪೂರ್ವಪ್ರತ್ಯಯವು --ಪ್ರತಿ CSS ವೇರಿಯೇಬಲ್‌ನಲ್ಲಿ ಅಗತ್ಯವಿರುವುದಕ್ಕೆ ಹೆಚ್ಚುವರಿಯಾಗಿದೆ.

$prefixಸಾಸ್ ವೇರಿಯೇಬಲ್ ಮೂಲಕ ಪೂರ್ವಪ್ರತ್ಯಯವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ . ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಇದನ್ನು ಹೊಂದಿಸಲಾಗಿದೆ bs-(ಟ್ರೇಲಿಂಗ್ ಡ್ಯಾಶ್ ಅನ್ನು ಗಮನಿಸಿ).

ಉದಾಹರಣೆಗಳು

CSS ಅಸ್ಥಿರಗಳು Sass ನ ವೇರಿಯೇಬಲ್‌ಗಳಿಗೆ ಒಂದೇ ರೀತಿಯ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತವೆ, ಆದರೆ ಬ್ರೌಸರ್‌ಗೆ ಸೇವೆ ಸಲ್ಲಿಸುವ ಮೊದಲು ಸಂಕಲನದ ಅಗತ್ಯವಿಲ್ಲ. ಉದಾಹರಣೆಗೆ, ಇಲ್ಲಿ ನಾವು ನಮ್ಮ ಪುಟದ ಫಾಂಟ್ ಮತ್ತು ಲಿಂಕ್ ಶೈಲಿಗಳನ್ನು CSS ವೇರಿಯೇಬಲ್‌ಗಳೊಂದಿಗೆ ಮರುಹೊಂದಿಸುತ್ತಿದ್ದೇವೆ.

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

ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು

ನಾವು ನಮ್ಮ ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು CSS ವೇರಿಯೇಬಲ್‌ಗಳಾಗಿ ಸೇರಿಸುವಾಗ (ಅದನ್ನು ಹೊರತುಪಡಿಸಿ ), ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ CSS ವೇರಿಯೇಬಲ್‌ಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲxs ಎಂದು ತಿಳಿದಿರಲಿ . ಇದು ವೇರಿಯೇಬಲ್‌ಗಳಿಗಾಗಿ CSS ಸ್ಪೆಕ್‌ನಲ್ಲಿನ ವಿನ್ಯಾಸದ ಮೂಲಕ, ಆದರೆ ವೇರಿಯೇಬಲ್‌ಗಳಿಗೆ ಬೆಂಬಲದೊಂದಿಗೆ ಮುಂಬರುವ ವರ್ಷಗಳಲ್ಲಿ ಬದಲಾಗಬಹುದು . ಕೆಲವು ಉಪಯುಕ್ತ ಲಿಂಕ್‌ಗಳಿಗಾಗಿ ಈ ಸ್ಟಾಕ್ ಓವರ್‌ಫ್ಲೋ ಉತ್ತರವನ್ನು ಪರಿಶೀಲಿಸಿ . ಈ ಮಧ್ಯೆ, ನೀವು ಈ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಇತರ CSS ಸಂದರ್ಭಗಳಲ್ಲಿ ಮತ್ತು ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಬಳಸಬಹುದು.env()