የሲኤስኤስ ተለዋዋጮች

ቡትስትራፕ በተጠናቀረ CSS ውስጥ ወደ ሁለት ደርዘን የሚጠጉ የ CSS ብጁ ንብረቶችን (ተለዋዋጮችን) ያካትታል ፣ በደርዘን የሚቆጠሩ ተጨማሪ ነገሮች በእያንዳንዱ አካል መሰረት ለተሻሻለ ብጁነት ይጓዛሉ። እነዚህ እንደ የእኛ ጭብጥ ቀለሞች፣ መግቻ ነጥቦች እና ዋና ቅርጸ-ቁምፊ ቁልል በአሳሽዎ ተቆጣጣሪ፣ በኮድ ማጠሪያ ሳጥን ወይም በአጠቃላይ ፕሮቶታይፕ ውስጥ ለመሳሰሉት በተለምዶ ጥቅም ላይ የዋሉ እሴቶችን በቀላሉ ማግኘት ይችላሉ።

bs-ከሦስተኛ ወገን CSS ጋር አለመግባባቶችን ለማስወገድ ሁሉም የእኛ ብጁ ንብረቶቻችን በቅድመ-ቅጥያ ተቀምጠዋል ።

የስር ተለዋዋጮች

:rootየ Bootstrap 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 ተለዋዋጮችን በፍርግግባችን ላይ እየተጠቀምን ነው—በዋነኛነት ለጎተራዎች—ለወደፊቱ ተጨማሪ አካላት አጠቃቀም።

ምሳሌዎች

የሲኤስኤስ ተለዋዋጮች ከ Sass ተለዋዋጮች ጋር ተመሳሳይ የሆነ ተለዋዋጭነት ይሰጣሉ፣ ነገር ግን ወደ አሳሹ ከመቅረቡ በፊት ማጠናቀር ሳያስፈልግ። ለምሳሌ፣ እዚህ የገጻችንን ቅርጸ-ቁምፊ እና የአገናኝ ስልቶችን ከCSS ተለዋዋጮች ጋር ዳግም እያስጀመርን ነው።

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