የሲኤስኤስ ተለዋዋጮች
ለፈጣን እና ወደፊት ለሚታይ ንድፍ እና ልማት የ Bootstrap's CSS ብጁ ባህሪያትን ይጠቀሙ።
ቡትስትራፕ Sassን እንደገና ማጠናቀር ሳያስፈልገው በቅጽበት ለማበጀት በተዘጋጀው 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-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 ን እንቀንሳለን፣ ቅጦች እንደ ጎጆ ጠረጴዛዎች ባሉ ቦታዎች ላይ እንደማይወርሱ እናረጋግጣለን እና ከሳስ ከተጠናቀረ በኋላ አንዳንድ መሰረታዊ የቡትስትራፕ ክፍሎችን እንደገና ማስተካከል እና ማራዘም እንችላለን።
የሲኤስኤስ ተለዋዋጮችን እንዴት እንደምንጠቀም አንዳንድ ግንዛቤ ለማግኘት የኛን የሰንጠረዥ ሰነድ ይመልከቱ ።
በተጨማሪም የCSS ተለዋዋጮችን በፍርግግባችን ላይ እየተጠቀምን ነው—በዋነኛነት ለጎተራዎች—ለወደፊቱ ተጨማሪ አካላት አጠቃቀም።
ምሳሌዎች
የሲኤስኤስ ተለዋዋጮች ከ Sass ተለዋዋጮች ጋር ተመሳሳይ የሆነ ተለዋዋጭነት ይሰጣሉ፣ ነገር ግን ወደ አሳሹ ከመቅረቡ በፊት ማጠናቀር ሳያስፈልግ። ለምሳሌ፣ እዚህ የገጻችንን ቅርጸ-ቁምፊ እና የአገናኝ ስልቶችን ከCSS ተለዋዋጮች ጋር ዳግም እያስጀመርን ነው።
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
የፍርግርግ መግቻ ነጥቦች
የፍርግርግ መግቻ ነጥቦችን እንደ ሲኤስኤስ ተለዋዋጮች (ከ በስተቀር xs
) ብንጨምርም፣ የ CSS ተለዋዋጮች በሚዲያ መጠይቆች ላይ እንደማይሰሩ ይወቁ ። ይህ በCSS ዝርዝር ውስጥ ለተለዋዋጮች ዲዛይን ነው፣ነገር ግን በሚቀጥሉት አመታት ለተለዋዋጮች ድጋፍ ሊለወጥ ይችላል env()
። ለአንዳንድ አጋዥ አገናኞች ይህንን የቁልል ፍሰት መልስ ይመልከቱ ። እስከዚያ ድረስ፣ እነዚህን ተለዋዋጮች በሌሎች የሲኤስኤስ ሁኔታዎች፣ እንዲሁም በእርስዎ ጃቫስክሪፕት ውስጥ መጠቀም ይችላሉ።