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-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 மாறிகளை எப்படிப் பயன்படுத்துகிறோம் என்பது பற்றிய சில நுண்ணறிவுக்கு எங்கள் அட்டவணை ஆவணங்களைப் பாருங்கள் . எங்கள் navbarகள் v5.2.0 இன் CSS மாறிகளையும் பயன்படுத்துகின்றன . நாங்கள் எங்கள் கட்டங்கள் முழுவதும் CSS மாறிகளைப் பயன்படுத்துகிறோம்—முதன்மையாக புதிய விருப்பத்தேர்வு CSS கட்டம் - எதிர்காலத்தில் கூடுதல் கூறு பயன்பாடுகளுடன்.

முடிந்தவரை, அடிப்படை கூறு மட்டத்தில் CSS மாறிகளை ஒதுக்குவோம் (எ.கா., .navbarnavbar மற்றும் அதன் துணைக் கூறுகளுக்கு). இது எங்கு, எப்படி தனிப்பயனாக்குவது என்ற யூகத்தை குறைக்கிறது, மேலும் எதிர்கால புதுப்பிப்புகளில் எங்கள் குழுவால் எளிதாக மாற்றங்களை அனுமதிக்கிறது.

முன்னொட்டு

பெரும்பாலான CSS மாறிகள் உங்கள் சொந்த கோட்பேஸுடன் மோதல்களைத் தவிர்க்க முன்னொட்டைப் பயன்படுத்துகின்றன. இந்த முன்னொட்டு --ஒவ்வொரு CSS மாறியிலும் தேவைப்படும் கூடுதலாகும்.

$prefixSass மாறி மூலம் முன்னொட்டைத் தனிப்பயனாக்கவும் . முன்னிருப்பாக, இது அமைக்கப்பட்டுள்ளது 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()