CSS மாறிகள்

பூட்ஸ்டார்ப் அதன் தொகுக்கப்பட்ட 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 மாறிகளாகச் சேர்க்கும் போது (தவிர ), மீடியா வினவல்களில் CSS மாறிகள் வேலை செய்யாதுxs என்பதை அறிந்து கொள்ளவும் . இது மாறிகளுக்கான CSS விவரக்குறிப்பில் உள்ள வடிவமைப்பு, ஆனால் மாறிகளுக்கான ஆதரவுடன் வரும் ஆண்டுகளில் மாறலாம் . சில பயனுள்ள இணைப்புகளுக்கு இந்த ஸ்டாக் ஓவர்ஃப்ளோ பதிலைப் பார்க்கவும் . இதற்கிடையில், நீங்கள் இந்த மாறிகளை மற்ற CSS சூழ்நிலைகளிலும், உங்கள் ஜாவாஸ்கிரிப்ட்டிலும் பயன்படுத்தலாம்.env()