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