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-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);
}