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

ቡትስትራፕ ኣብቲ ዝተጠርነፈ CSS ኣስታት ክልተ ደርዘን ዝኾኑ ናይ CSS ብሕታዊ ባህርያት (ተለዋዋጢ ባህርያት) ዘጠቓልል ኮይኑ፡ ዓሰርተታት ካልኦት ኣብ መንገዲ ንዝተመሓየሸ ምምዕርራይ ብመሰረት ነፍሲ ወከፍ ኣካል ኣለዉ። እዚኦም ኣብ ተቖጻጻሪ መርበብ ሓበሬታኻ፡ ሳንድቦክስ ኮድ፡ ወይ ሓፈሻዊ ፕሮቶታይፒንግ ክትሰርሕ ከለኻ፡ ከም ሕብርታት ቴማና፡ ምብታኽ ነጥብታት፡ ከምኡ’ውን ቀዳሞት ቁጽሪ ቁጽሪ ቅርጺ ፊደላት ዝኣመሰሉ ልሙዳት ዝጥቀሙሉ ክብርታት ብቐሊሉ ክትረኽቦም ትኽእል ኢኻ።

ኩሎም ብሕታዊ ንብረታትና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-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ና ክንቅንስ ንኽእል፣ ቅዲታት ኣብ ከም 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);
}