ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

ናይ CSS ተለዋዋጢ ረቛሒታት

ንቕልጡፍን ንቕድሚት ዝጥምትን ዲዛይንን ምዕባለን ናይ Bootstrap ናይ CSS ብሕታዊ ባህርያት ተጠቐም።

ኣብዚ ገጽ

ቡትስትራፕ ኣብቲ ዝተጠርነፈ CSS ብዙሓት CSS custom properties (variables) ኣካቲቱ ኣሎ ንሓቀኛ ግዜ ምምዕርራይ Sass ዳግማይ ምጥርናፍ ከየድለዮ። እዚኦም ኣብ ተቖጻጻሪ መርበብ ሓበሬታኻ፡ ሳንድቦክስ ኮድ፡ ወይ ሓፈሻዊ ፕሮቶታይፒንግ ክትሰርሕ ከለኻ፡ ከም ሕብርታት ቴማና፡ ምብታኽ ነጥብታት፡ ከምኡ’ውን ቀዳሞት ቁጽሪ ቁጽሪ ቅርጺ ፊደላት ዝኣመሰሉ ልሙዳት ዝጥቀሙሉ ክብርታት ብቐሊሉ ክትረኽቦም ትኽእል ኢኻ።

ኩሎም ብሕታዊ ንብረታትናbs- ምስ ሳልሳይ ወገን CSS ንኸይጋጮ ቅድመ-ጥብቆ ኣለዎም።

ሱር ተለዋዋጢ ረቛሒታት

ኣብዚ እቶም እንካተቶም ተለዋዋጢ ረቛሒታት ኣለዉ (the is required ምዃኑ ኣስተውዕል :root) ኣብ ዝኾነ ቦታ Bootstrap's CSS ዝጽዓነሉ ቦታ ክረኽብዎም ዝኽእሉ። ኣብ _root.scssፋይልና ይርከቡ እሞ ኣብቲ ዝተጠርነፍና dist ፋይላት ተኻቲቶም ኣለዉ።

: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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

ተለዋዋጢ ባእታታት

ቡትስትራፕ 5 ንዝተፈላለዩ ኣካላት ከም ሎካል ተለዋዋጢ ዝኾኑ ብሕታዊ ባህርያት ምጥቃም እናወሰኸ ይመጽእ ኣሎ። በዚ መንገዲ እዚ ነቲ ዝተጠርነፈ CSSና ንቕንስ፣ ቅዲታት ኣብ ከም nested tables ዝኣመሰሉ ቦታታት ከምዘይውረሱ ነረጋግጽ፣ ከምኡ’ውን ድሕሪ Sass compilation ገለ መሰረታዊ ዳግመ-ቅዲን ምንዋሕን ናይ Bootstrap components ንፈቅድ።

ገለ ርድኢት ብዛዕባ ከመይ ጌርና CSS ተለዋዋጢ ንጥቀም ከም ዘለና ኣብ ናይ ሰደቓ ሰነድና ርኣዩ ። ናቭባርና እውን ካብ v5.2.0 ጀሚሩ CSS ተለዋዋጢ ይጥቀሙ። ብተወሳኺ ኣብ መላእ ሽቦታትና ተለዋዋጢ CSS ንጥቀም ኣለና-ብቐንዱ ንጉተርስ እቲ ሓድሽ opt-in CSS ሽቦ-ምስ ዝያዳ ኣጠቓቕማ ኣካላት ኣብ መጻኢ ክመጽእ እዩ።

ብዝተኻእለ መጠን፡ ተለዋዋጢ CSS ብደረጃ መሰረታዊ ኣካል ክንምድብ ኢና (ንኣብነት .navbar፡ ን navbarን ንኡሳን ኣካላቱን)። እዚ ድማ ኣበይን ብኸመይን ከም ዝጥዕም ምግማት ይንክዮ፣ ኣብ መጻኢ ዝመሓየሽ ድማ ብጋንታና ቀሊል ምምሕያሻት የኽእል።

ቅድመ-ጥብቆ

መብዛሕትኦም ተለዋዋጢ CSS ምስ ናይ ገዛእ ርእስኻ ኮድቤዝ ከይጋጨዉ ቅድመ-ጥብቆ ይጥቀሙ። እዚ ቅድመ-ጥብቆ ኣብ ርእሲ እቲ --ኣብ ነፍሲ ወከፍ CSS ተለዋዋጢ ዝድለ እዩ።

ነቲ ቅድመ-ጥብቆ ብመንገዲ $prefixሳስ ተለዋዋጢ ኣመዓራርዮ። ብነባሪ መልክዑ፡ ናብ bs-(ነቲ ድሕሪት ዘሎ ዳሽ ኣስተውዕል) ተቐሚጡ ኣሎ።

ኣብነታት

ተለዋዋጢ CSS ምስ ናይ Sass ተለዋዋጢ ረቛሒታት ተመሳሳሊ ተዓጻጻፍነት ይህቡ፣ ግን ቅድሚ ናብ መርበብ ሓበሬታ ምቕራቦም ምጥርናፍ ከየድለዩ። ንኣብነት ኣብዚ ናይ ገጽና ቅርጺ ቅርጺን ቅዲ ምትእስሳርን ብCSS ተለዋዋጢ ዳግማይ ንሰርዖ ኣለና።

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

ናይ ሽቦ ምብታኽ ነጥብታት

ንናይ ሽቦ ምብታኽ ነጥብታትና ከም ተለዋዋጢ CSS (ብዘይካ ) ከነእትዎም ከለና፡ ተለዋዋጢ CSS ኣብ ሕቶታት ሚድያ ከምዘይሰርሑxs ኣስተውዕል ። እዚ ብዲዛይን ኣብ CSS spec ንተለዋዋጢ እዩ፣ ግን ኣብ ዝመጽእ ዓመታት ምስ ደገፍ ንተለዋዋጢ ክቕየር ይኽእል። ገለ ሓገዝቲ ሊንክታት ንምርካብ ነዚ Stack Overflow መልሲ ርኣዩ ። ክሳብ ሽዑ ግን ነዞም ተለዋዋጢ ረቛሒታት ኣብ ካልእ ኩነታት ሲኤስኤስ ክትጥቀመሎም ትኽእል ኢኻ፡ ከምኡ’ውን ኣብ ጃቫስክሪፕትካ።env()