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

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

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

ઉદાહરણો

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

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

ગ્રીડ બ્રેકપોઇન્ટ્સ

જ્યારે અમે અમારા ગ્રીડ બ્રેકપોઇન્ટ્સને CSS વેરીએબલ તરીકે સમાવીએ છીએ (સિવાય xsકે), ધ્યાન રાખો કે CSS વેરિયેબલ્સ મીડિયા ક્વેરીઝમાં કામ કરતા નથી . આ વેરિયેબલ્સ માટે CSS સ્પેકમાં ડિઝાઇન દ્વારા છે, પરંતુ આગામી વર્ષોમાં env()વેરિયેબલ્સના સમર્થન સાથે બદલાઈ શકે છે. કેટલીક મદદરૂપ લિંક્સ માટે આ સ્ટેક ઓવરફ્લો જવાબ તપાસો . આ દરમિયાન, તમે અન્ય CSS પરિસ્થિતિઓમાં, તેમજ તમારી JavaScriptમાં આ ચલોનો ઉપયોગ કરી શકો છો.