મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
in English

CSS ચલો

ઝડપી અને આગળ દેખાતી ડિઝાઇન અને વિકાસ માટે બુટસ્ટ્રેપની 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ને ઘટાડી શકીએ છીએ, નેસ્ટેડ કોષ્ટકો જેવા સ્થળોએ શૈલીઓ વારસાગત નથી તેની ખાતરી કરી શકીએ છીએ, અને Sass સંકલન પછી બુટસ્ટ્રેપ ઘટકોના કેટલાક મૂળભૂત પુનઃસ્થાપિત અને વિસ્તરણને મંજૂરી આપી શકીએ છીએ.

અમે CSS વેરિયેબલ્સનો ઉપયોગ કેવી રીતે કરી રહ્યા છીએ તેની થોડી સમજ માટે અમારા કોષ્ટક દસ્તાવેજીકરણ પર એક નજર નાખો .

અમે અમારા ગ્રીડમાં CSS વેરિયેબલ્સનો પણ ઉપયોગ કરી રહ્યાં છીએ-મુખ્યત્વે ગટર માટે-ભવિષ્યમાં વધુ ઘટક વપરાશ સાથે.

ઉદાહરણો

CSS ચલો સાસના ચલો માટે સમાન સુગમતા પ્રદાન કરે છે, પરંતુ બ્રાઉઝરને સેવા આપતા પહેલા સંકલનની જરૂર વગર. ઉદાહરણ તરીકે, અહીં અમે અમારા પેજના ફોન્ટ અને લિંક સ્ટાઈલને CSS વેરીએબલ સાથે રીસેટ કરી રહ્યાં છીએ.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}