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