ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
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-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ና ክንቅንስ ንኽእል፣ ቅዲታት ኣብ ከም nested tables ዝኣመሰሉ ቦታታት ከምዘይውረሱ ከነረጋግጽ፣ ከምኡ’ውን ድሕሪ Sass compilation ገለ መሰረታዊ ዳግመ-ቅዲን ምንዋሕን ናይ Bootstrap components ክንፈቅድ ንኽእል።

ገለ ርድኢት ብዛዕባ ከመይ ጌርና CSS ተለዋዋጢ ንጥቀም ከም ዘለና ኣብ ናይ ሰደቓ ሰነድና ርኣዩ ።

ብተወሳኺ ኣብ መላእ ሽቦታትና ተለዋዋጢ CSS ንጥቀም ኣለና-ብቐንዱ ንጉተር-ኣብ መጻኢ ዝያዳ ኣጠቓቕማ ኣካላት ክመጽእ እዩ።

ኣብነታት

ተለዋዋጢ 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()