ቴሚንግ ቡትስትራፕ

ንቐሊል ቴማን ለውጢ ኣካላትን ንዓለማዊ ቅዲ ምርጫታት ብሓደስቲ ኣብ ውሽጢ ዝተሃንጸ ናይ Sass ተለዋዋጢታትና Bootstrap 4 ኣመዓራርዮ።

መእተዊ

ኣብ ቡትስትራፕ 3፡ ቴሚንግ ብዓቢኡ ብተለዋዋጢ ምግዳፍ ኣብ LESS፡ ብሕታዊ CSS፡ ከምኡ’ውን ኣብ distፋይላትና ዘእተናዮ ፍሉይ ቴማ ቅዲ ጽሑፍ እዩ ዝድረኽ ነይሩ። ብገለ ጻዕሪ፡ ሓደ ሰብ ነቶም ቀንዲ ፋይላት ከይተንከፈ ንመልክዕ ቡትስትራፕ 3 ምሉእ ብምሉእ ዳግማይ ክነድፎ ይኽእል ነይሩ። ቡትስትራፕ 4 ፍሉጥ፡ ግን ቁሩብ ዝተፈልየ ኣገባብ ይህብ።

ሕጂ፡ ቴሚንግ ብ Sass variables, Sass maps, ከምኡ ውን custom CSS ይፍጸም። ካብዚ ንላዕሊ ውፉይ ቴማ ቅዲ ጽሑፍ የለን፤ ኣብ ክንድኡስ፡ ነቲ ኣብ ውሽጡ ዘሎ ቴማ፡ ምዕባለታት፡ ጽላሎትን ካልእን ንምውሳኽ ከተኽእሎ ትኽእል ኢኻ።

ሳስ

ንተለዋዋጢ ረቛሒታት፣ ካርታታት፣ ሚክሲንን ካልእን ንምጥቃም ምንጪ ሳስ ፋይላትና ተጠቐም። ኣብ ህንጻና ንናይ Sass rounding precision ናብ 6 (ብነባሪ 5 እዩ) ኣዕቢናዮ ኣለና፡ እዚ ድማ ኣብ browser rounding ንዘጋጥም ጸገማት ከይፍጠር።

ኣቃውማ ፋይል

ብዝተኻእለ መጠን ናይ ቡትስትራፕ ቀንዲ ፋይላት ካብ ምቕያር ተቖጠብ። ንሳስ ማለት ንቡትስትራፕ ዘእቱ ናይ ገዛእ ርእስኻ ቅዲ ጽሑፍ ምፍጣር ማለት እዩ ምእንቲ ክትቅይሮን ከተናውሖን ትኽእል። ከም npm ዝኣመሰለ ፓኬጅ ማናጀር ትጥቀም ኣለኻ ኢልና እንተወሰድናዮ፡ ከምዚ ዝመስል ኣቃውማ ፋይል ክህልወካ እዩ፤

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

ምንጪ ፋይላትና ኣውሪድኩምን ፓኬጅ ማናጀር ዘይትጥቀሙን እንተኾይንኩም፡ ምንጪ ፋይላት ቡትስትራፕ ካብ ናትኩም ፍሉያት ብምግባር፡ ምስቲ ኣቃውማ ዝመሳሰል ነገር ብኢድኩም ከተዳልዉ ትደልዩ።

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

ካብ ወጻኢ ምእታው

ኣብ ናትካ ፡ ናይ custom.scssBootstrap ምንጪ Sass ፋይላት ከተእቱ ኢኻ። ክልተ ኣማራጺታት ኣለዉኻ፡ ንኹሉ ናይ Bootstrap ኣካትትዎ፡ ወይ ድማ ዘድልዩኻ ክፍልታት ምረጽ። ነዚ ዳሕረዋይ ነተባብዕ፣ ዋላ እኳ ኣብ መላእ ኣካላትና ገለ ጠለባትን ጽግዕተኛታትን ከምዘሎ ኣስተውዕሉ። ከምኡ ውን ገለ ጃቫስክሪፕት ንፕላጊናትና ከተእትዉ ከድልየኩም እዩ።

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

እቲ ኣወዳድባ ኣብ ቦታኡ ምስ ኣተወ፡ ዝኾነ ካብቶም ናይ ሳስ ተለዋዋጢ ረቛሒታትን ካርታታትን ኣብ ናትካ ክትቅይር ክትጅምር ትኽእል ኢኻ custom.scss። // Optionalከምኡ ውን ከም ኣድላይነቱ ኣብ ትሕቲ እቲ ክፍሊ ገለ ክፋል ናይ Bootstrap ምውሳኽ ክትጅምር ትኽእል ኢኻ ። bootstrap.scssካብ ፋይልና ምሉእ ናይ ምእታው ስታክ ከም መበገሲኹም ክትጥቀሙ ንመክር ።

ተለዋዋጢ ነባሪ ነገራት

ኩሉ ናይ Sass ተለዋዋጢ ኣብ Bootstrap 4 ነቲ !defaultናይ Bootstrap ምንጪ ኮድ ከይቀየርካ ኣብ ናይ ገዛእ ርእስኻ Sass ናይቲ ተለዋዋጢ ነባሪ ዋጋ ክትሽፍኖ ዘኽእለካ ባንዴራ የጠቓልል። ተለዋዋጢ ረቛሒታት ከም ኣድላይነቱ ቅዳሕን ምልጣፍን፣ ክብርታቶም ምቕያርን !defaultባንዴራ ምእላይን። ሓደ ተለዋዋጢ ድሮ ተመዲቡ እንተኾይኑ፡ ሽዑ በቶም ኣብ Bootstrap ዘለዉ ነባሪ ክብርታት ዳግማይ ኣይምደብን እዩ።

ምሉእ ዝርዝር ናይ ቡትስትራፕ ተለዋዋጢ ረቛሒታት ኣብ scss/_variables.scss. ገለ ተለዋዋጢ ናብ null, ይቕመጡ፣ እዞም ተለዋዋጢ ረቛሒታት ኣብ ውቅርኻ እንተዘይተገሊፎም ነቲ ንብረት ኣየውጽእዎን እዮም።

ኣብ ውሽጢ ሓደ ዓይነት ሳስ ፋይል ዝርከቡ ተለዋዋጢ ምግዳፍ ቅድሚ ወይ ድሕሪ እቶም ነባሪ ተለዋዋጢ ክመጹ ይኽእሉ። ይኹን እምበር፡ ኣብ መላእ ፋይላት ሳስ ክትግለጽ ከለኻ፡ ቅድሚ ናይ ቡትስትራፕ ሳስ ፋይላት ምእታውካ፡ ምግዳፍካ ክመጽእ ኣለዎ።

Bootstrap ብመንገዲ npm ክትኣቱን ክትጥርንፍን ከለኻ ነቲ background-colorand ዝቕይር ኣብነት ኣብዚ ኣሎ ፤color<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

ንዝኾነ ተለዋዋጢ ኣብ Bootstrap ከም ኣድላይነቱ ደጋግሞ፡ እንተላይ ኣብ ታሕቲ ዘለዉ ዓለማዊ ኣማራጺታት።

ካርታታትን ሉፕን

ቡትስትራፕ 4 ብኣጻብዕ ዝቑጸሩ ካርታታት ሳስ ዘጠቓልል ኮይኑ፡ ስድራቤታት ተዛመድቲ ሲኤስኤስ ንምፍጣር ዝቐለለ ዝገብሩ ቁልፊ ጽምዲ ክብርታት እዮም። ንሕብርታትና፣ ንናይ ሽቦ ምብታኽ ነጥብታትናን ካልእን ሳስ ካርታታት ንጥቀም። ልክዕ ከም ተለዋዋጢ ሳስ ኩሎም ካርታታት ሳስ !defaultባንዴራ ዘጠቓልሉ ኮይኖም ክግለፉን ክናዋሑን ይኽእሉ።

ገለ ካብ ካርታታት ሳስና ብነባሪ ናብ ባዶ ይወሃሃዱ። እዚ ንሓደ ዝተዋህበ ካርታ ሳስ ብቐሊሉ ንምስፋሕ ንምፍቃድ ዝግበር ኮይኑ፡ ካብ ካርታ ኣቑሑት ምእላይ ቁሩብ ኣጸጋሚ ንምግባር ግን ብዋጋ ዝመጽእ እዩ ።

ካርታ ምቕያር

ኣብ ካርታና ንዘሎ ሕብሪ ንምቕያር $theme-colors፡ ኣብቲ ብሕታዊ ሳስ ፋይልካ ነዚ ዝስዕብ ወስኸሉ፤

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

ኣብ ካርታ ወስኹ

ናብ ሓድሽ ሕብሪ $theme-colorsንምውሳኽ፡ ሓድሽ መፍትሕን ዋጋን ወስኸሉ፤

$theme-colors: (
  "custom-color": #900
);

ካብ ካርታ ኣውጽእዎ።

$theme-colorsካብ ፣ ወይ ካብ ዝኾነ ካልእ ካርታ ሕብርታት ንምእላይ ፣ ን ተጠቐም map-remove። ኣብ መንጎ ጠለባትናን ኣማራጺታትናን ከተእትውዎ ኣለኩም ኣስተውዕሉ፤

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

ዘድልዩ መፍትሕታት

ቡትስትራፕ ከምቲ ዝተጠቐምናሉ ኣብ ውሽጢ ካርታታት ሳስ ገለ ፍሉያት መፍትሕታት ከምዘለዉ ይግምትን ነዚኦም ባዕልና ነስፍሖምን። ነቶም ዝተሓወሱ ካርታታት ክትጥዕሞም ከለኻ፡ ሓደ ፍሉይ ናይ ሳስ ካርታ መፍትሕ ኣብ ዝጥቀመሉ ቦታ ጌጋታት ከጋጥመካ ይኽእል እዩ።

ንኣብነት ፡ ንመላግቦታት፡ መጠወቒታትን ኩነታት ቅጥዕታትን፡ , primary, successከምኡ’ውን dangerመፍትሕታት ካብ ንጥቀም። $theme-colorsናይዞም መፍትሕታት ክብርታት ምትካእ ዝኾነ ጸገም ከቕርብ የብሉን፣ ምእላይ ግን ናይ ሳስ ምትእኽኻብ ጸገማት ከስዕብ ይኽእል። ኣብዞም ኣጋጣሚታት እዚኦም፡ ነቲ ነቶም ክብርታት ዝጥቀም ናይ ሳስ ኮድ ክትቅይሮ ከድልየካ እዩ።

ተግባራት

ቡትስትራፕ ሓያሎ ናይ ሳስ ተግባራት ይጥቀም፣ ግን ንሓፈሻዊ ቴማ ዝምልከት ንኡስ ስብስብ ጥራይ እዩ። ካብ ሕብራዊ ካርታታት ክብርታት ንምርካብ ሰለስተ ተግባራት ኣካቲትና ኣለና፤

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

እዚኦም ካብ ካርታ ሳስ ሓደ ሕብሪ ክትመርጽ የኽእሉኻ ልክዕ ከምቲ ከመይ ጌርካ ካብ v3 ናይ ሕብሪ ተለዋዋጢ ትጥቀመሉ።

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

ካብቲ ካርታ ፍሉይ ደረጃ ሕብሪ ንምርካብ ካልእ ተግባር እውን ኣለና ። $theme-colorsኣሉታዊ ደረጃ ክብርታት ነቲ ሕብሪ ከብርህዎ እንከለዉ፡ ዝለዓለ ደረጃታት ድማ ከጸልምቱ እዮም።

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

ብተግባር፡ ነቲ ፋንክሽን ጸዊዕካ ኣብ ክልተ መለክዒታት ምሓለፍካዮ፡ ስም ናይቲ ሕብሪ ካብ $theme-colors(ንኣብነት፡ ቀዳማይ ወይ ሓደጋ)ን ቁጽራዊ ደረጃን።

.custom-element {
  color: theme-color-level(primary, -10);
}

ኣብ መጻኢ ተወሳኺ ተግባራት ክውሰኹ ይኽእሉ ወይ ድማ ንተወሳኺ ካርታታት ሳስ ደረጃ ተግባራት ንምፍጣር ናይ ገዛእ ርእስኻ ብሕታዊ ሳስ ክውሰኹ ይኽእሉ እዮም፣ ወይ ውን ዝያዳ ቃላት ክትዛረብ እንተደሊኻ ሓፈሻዊ ሓደ።

ንጽጽር ሕብሪ

ኣብ ቡትስትራፕ እነካትቶ ተወሳኺ ተግባር ድማ ናይ ሕብሪ ንጽጽር ተግባር እዩ፣ color-yiq። ነቲ YIQ ናይ ሕብሪ ቦታ ተጠቒሙ ኣብቲ ዝተወሰነ መሰረታዊ ሕብሪ ተመርኲሱ ብኣውቶማቲክ ብርሃን ( #fff) ወይ ጸሊም ( ) ንጽጽር ሕብሪ ይመልስ። #111እዚ ተግባር ብፍላይ ንሚክሲን ወይ ሉፕስ ብዙሓት ክፍልታት ትፈጥር ዘለኻ ጠቓሚ እዩ።

ንኣብነት ካብ $theme-colorsካርታና ሕብራዊ ስዋች ንምፍጣር፤

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

ንናይ ሓደ ግዜ ንጽጽር ድሌታት እውን ክውዕል ይኽእል እዩ፤

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

ብተወሳኺ ብናይ ሕብራዊ ካርታ ተግባራትና መሰረታዊ ሕብሪ ክትገልጽ ትኽእል ኢኻ፤

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

ካብ SVG ምህዳም

ነቲ escape-svgፋንክሽን ካብቲ <, >ከምኡ’ውን #ንSVG ድሕረ ባይታ ምስልታት ዝኸውን ፊደላት ንምህዳም ንጥቀመሉ። እዞም ፊደላት እዚኦም ነቲ ድሕረ ባይታ ምስልታት ኣብ IE ብግቡእ ንምቕራብ ምህዳም የድልዮም። ነቲ ተግባር ኣብ እንጥቀመሉ escape-svgእዋን፡ ዳታ URIs ክጥቀሱ ኣለዎም።

ናይ ምውሳኽን ምጉዳልን ተግባራት

addነቲ and functions ንጥቀም ነቲ subtractCSS calcfunction ንጠቕልሎ። ቀንዲ ዕላማ ናይዞም ተግባራት “ኣሃዱ ዘይብሉ” 0ዋጋ ናብ ሓደ calcመግለጺ ክሓልፍ ከሎ ጌጋታት ንኸይፍጠር እዩ። ከምዚ ዝኣመሰለ መግለጺታት calc(10px - 0)ብሒሳብ ቅኑዕ ክንሱ ኣብ ኩሎም ዳህሰስቲ ጌጋ ክመልስ እዩ።

ኣብነት እቲ calc ቅኑዕ ዝኾነሉ፤

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

ኣብነት እቲ calc ቅኑዕ ዘይኮነሉ፤

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

ሳስ ኣማራጺታት

Bootstrap 4 በቲ ኣብ ውሽጥና ዘሎ custom variables ፋይልና ምምዕርራይን ንዓለማዊ CSS ምርጫታት ብቐሊሉ ብሓደስቲ $enable-*Sass variables ምቕያርን። ናይ ሓደ ተለዋዋጢ ዋጋ ምግዳፍን npm run testከም ኣድላይነቱ ምስ ዳግማይ ምትእኽኻብን።

ነዞም ተለዋዋጢ ረቛሒታት ንቁልፊ ዓለማዊ ኣማራጺታት ኣብ scss/_variables.scssፋይል ቡትስትራፕ ክትረኽቦምን ክትጥዕሞምን ትኽእል ኢኻ።

ተለዋዋጢ ዝኾነ	ክብርታት	መግለፂ
`$spacer`	`1rem`(ነባሪ)፣ ወይ ዝኾነ ዋጋ > 0	ስፔሰር ዩቲሊቲታትና ብፕሮግራም ንምፍጣር ነባሪ ስፔሰር ዋጋ ይገልጽ ።
`$enable-rounded`	`true`(ነባሪ) ወይ`false`	`border-radius`ኣብ ዝተፈላለዩ ኣካላት ኣቐዲሞም ዝተነጸሩ ቅዲታት የኽእል ።
`$enable-shadows`	`true`ወይ `false`(ነባሪ) .	`box-shadow`ኣብ ዝተፈላለዩ ኣካላት ኣቐዲሞም ዝተነጸሩ ቅዲታት የኽእል ።
`$enable-gradients`	`true`ወይ `false`(ነባሪ) .	ኣቐዲሞም ዝተነጸሩ ምዕባለታት ብመንገዲ `background-image`ቅዲታት ኣብ ዝተፈላለዩ ኣካላት የኽእል።
`$enable-transitions`	`true`(ነባሪ) ወይ`false`	`transition`ኣብ ዝተፈላለዩ ኣካላት ኣቐዲሙ ዝተነጸረ s የኽእል ።
`$enable-prefers-reduced-motion-media-query`	`true`(ነባሪ) ወይ`false`	Enables the `prefers-reduced-motion`media query , እዚ ድማ ኣብ ምርጫታት ተጠቀምቲ መርበብ ሓበሬታ/ስርዓተ-ምሕደራ ተመርኲሱ ዝተወሰኑ ተንቀሳቐስቲ ስእልታት/መሰጋገሪታት ይዓብጦ።
`$enable-hover-media-query`	`true`ወይ `false`(ነባሪ) .	ካብ ስራሕ ወጻኢ ዝኾነ
`$enable-grid-classes`	`true`(ነባሪ) ወይ`false`	ንናይ ሽቦ ስርዓት ዝኸውን ናይ CSS ክፍልታት ምፍጣር የኽእል (ንኣብነት፡ , `.container`, `.row`, `.col-md-1`ወዘተ)።
`$enable-caret`	`true`(ነባሪ) ወይ`false`	ስውር ባእታ ካሬት ኣብ `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(ነባሪ) ወይ`false`	ኣብ ዘይተሰናኸሉ ናይ መጠወቒ ባእታታት “ኢድ” ዝብል መመልከቲ ምውሳኽ።
`$enable-print-styles`	`true`(ነባሪ) ወይ`false`	ንሕትመት ንምምሕያሽ ቅዲታት የኽእል።
`$enable-responsive-font-sizes`	`true`ወይ `false`(ነባሪ) .	ምላሽ ዝህቡ ዓቐናት ቅርጺ ፊደላት የኽእል ።
`$enable-validation-icons`	`true`(ነባሪ) ወይ`false`	`background-image`ኣብ ውሽጢ ጽሑፋዊ እታዎታትን ገለ ብሕታዊ ቅጥዕታትን ንናይ ምጽዳቕ ኩነታት ምልክታት የኽእል ።
`$enable-deprecation-messages`	`true`ወይ `false`(ነባሪ) .	ዝኾነ `true`ካብቶም ኣብ `v5`.

ሕብሪ

ብዙሓት ዝተፈላለዩ ኣካላትን ዩቲሊቲታትን ቡትስትራፕ ኣብ ካርታ ሳስ ብዝተገልጹ ተኸታተልቲ ሕብርታት ኣቢሎም ዝተሃንጹ እዮም። እዚ ካርታ ኣብ ሳስ ሉፕ ብምግባር ብቕልጡፍ ተኸታታሊ ሕግታት ምፍጣር ይከኣል።

ኩሉ ሕብርታት

ኩሎም ኣብ Bootstrap 4 ዝርከቡ ሕብርታት፣ ከም Sass variables ከምኡ ውን Sass map in scss/_variables.scssfile ይርከቡ። እዚ ኣብ ዝቕጽሉ ንኣሽቱ ምውጻእ ተወሳኺ ጽላሎት ንምውሳኽ ክሰፍሕ እዩ፣ ልክዕ ከምቲ ድሮ ዘእተናዮ ግራጭ ፓለቲ ።

ሰማያዊ

ኢንዲጎ

ሊሊ

ሮዛ ሕብሪ

ቀይሕ

ኣራንሺ

ብጫ

ቆፅለዋይ

ቲል ዝብል እዩ።

ሳይን ዝበሃል

ነዚኦም ኣብ ሳስካ ብኸመይ ክትጥቀመሎም ከም እትኽእል ኣብዚ ኣሎ፤

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

ናይ ሕብሪ ዩቲሊቲ ክፍልታት ንኣቀማምጣን color.background-color

ኣብ መጻኢ፡ ከምቲ ኣብ ታሕቲ ዘለዉ ግራጭ ሕብርታት ዝገበርናዮ፡ ንጽላሎት ነፍሲ ወከፍ ሕብሪ ዝኸውን ናይ ሳስ ካርታታትን ተለዋዋጥን ንምቕራብ ክንዓልም ኢና።

ቴማ ሕብርታት

ንኡስ ስብስብ ናይ ኩሎም ሕብርታት ንጥቀም ንሕብሪ ስኬማት ንምፍጣር ዝነኣሰ ሕብራዊ ፓለቲ ንፈጥር፣ ከም Sass variables ከምኡ ውን Sass map ኣብ Bootstrap’s scss/_variables.scssfile ይርከብ።

ቀዳማይ

ካልኣይ ደረጃ

ዓወት

ሓደጋ

ምኸዳን

ሓበሬታ

ብርሃን

ፀልማት

ግሬይስ ዝበሃሉ እዮም።

ሰፊሕ ስብስብ ግራጭ ተለዋዋጢ ረቛሒታትን ሳስ ካርታ ኣብ scss/_variables.scssንዘይተለዋወጡ ጽላሎት ግራጭ ኣብ መላእ ፕሮጀክትካ። እዚኦም “ዝሑላት ግራጭ” ምዃኖም ኣስተውዕል፣ ናብ ረቂቕ ሰማያዊ ቃና ዝጥምቱ፣ ኣብ ክንዲ ገለልተኛ ግራጭ።

100

200

300 ይኸውን

400 ብር እዩ።

500 ይኸውን

600 ይኸውን

700 ብር እዩ።

800 ይኸውን

900 ብር እዩ።

ኣብ ውሽጢ scss/_variables.scss፡ ናይ Bootstrap ሕብራዊ ተለዋዋጢ ረቛሒታትን Sass mapን ክትረኽቡ ኢኹም። ኣብነት ናይ $colorsሳስ ካርታ ኣብዚ ኣሎ፤

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

ኣብ ውሽጢ ካርታ ዝርከቡ ክብርታት ምውሳኽ፡ ምእላይ ወይ ምቕያር፡ ኣብ ብዙሓት ካልኦት ኣካላት ብኸመይ ከም ዝጥቀሙ ንምዕራፍ። እቲ ዘሕዝን ኣብዚ እዋን እዚ ኩሉ ኣካል ነዚ ካርታ ሳስ ዝጥቀመሉ ኣይኮነን። ኣብ መጻኢ ዝመጽእ ሓድሽ ሓበሬታ ነዚ ንምምሕያሽ ክጽዕር እዩ። ${color}ክሳብ ሽዑ ነቶም ተለዋዋጢ ረቛሒታትን ነዚ ካርታ ሳስን ንምጥቃም ውጥን ግበር።

ኣካላት

ብዙሓት ናይ ቡትስትራፕ ኣካላትን ዩቲሊቲታትን ኣብ @eachልዕሊ ካርታ ሳስ ዝደጋገሙ ሉፕስ ዘለዎም ዝተሃንጹ እዮም። እዚ ብፍላይ ብናትና ፍልልያት ናይ ሓደ ኣካል $theme-colorsንምፍጣርን ንነፍሲ ወከፍ ነጥቢ ምብታኽ ምላሽ ዝህቡ ፍልልያት ንምፍጣርን ሓጋዚ እዩ። ነዞም ናይ ሳስ ካርታታት ክትጥዕሞምን ዳግማይ ክትጥርንፎምን ከለኻ፡ ለውጥታትካ ብኣውቶማቲክ ኣብዞም ሉፕስ ክግለጹ ክትዕዘብ ኢኻ።

መቐየሪታት

ብዙሓት ናይ ቡትስትራፕ ኣካላት ብቤዝ-ሞዲፋየር ክላስ ኣቀራርባ ዝተሃንጹ እዮም። እዚ ማለት እቲ ዝዓበየ ክፋል ናይቲ ቅዲ ኣብ ሓደ መሰረታዊ ክፍሊ (ንኣብነት, .btn) ክሕዝ እንከሎ ቅዲ ፍልልያት ድማ ኣብ መቐየሪ ክፍልታት (ንኣብነት, ) ዝተሓጽረ እዩ .btn-danger። እዞም ናይ መቐየሪ ክፍልታት ካብ ካርታ ዝተሃንጹ ኮይኖም $theme-colorsቁጽርን ስምን ናይ መቐየሪ ክፍልታትና ምምዕርራይ ይገብሩ።

ኣብቲ ካርታ ከመይ ጌርና ነቲ ኣካልን ኩሎም ድሕረ ባይታ $theme-colorsዩቲሊቲታትናን መቐየሪታት ከም እንፈጥር ክልተ ኣብነታት ኣብዚ ኣለዉ ።.alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

ምላሽ ዝህብ

እዞም ናይ ሳስ ሉፕስ እውን ኣብ ሕብራዊ ካርታታት ዝተሓጽሩ ኣይኮኑን። ብተወሳኺ ናይ ኣካላትካ ወይ ዩቲሊቲታትካ ምላሽ ዝህቡ ፍልልያት ክትፈጥር ትኽእል ኢኻ። ንኣብነት ንናይ ሳስ ካርታ @eachዝኸውን ሉፕ ምስ ናይ ሚድያ ሕቶ ዘካተተሉ ምላሽ ዝህቡ ናይ ጽሑፍ ኣሰላልፋ ዩቲሊቲታትና ንውሰድ።$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

ናትካ ክትቅይር እንተድኣ ኣድልዩካ $grid-breakpoints፡ ለውጥታትካ ኣብ ኩሎም ኣብ ልዕሊ እቲ ካርታ ዝደጋገሙ ሉፕስ ክምልከቱ እዮም።

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

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

ዝርከቡ ተለዋዋጢ ረቛሒታት

:rootእቶም እነካትቶም ተለዋዋጢ ረቛሒታት ኣብዚ ኣለዉ (the is required ምዃኑ ኣስተውዕል )። ኣብ _root.scssፋይልና ይርከቡ።

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ኣብነታት

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

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

ተለዋዋጢ ነጥቢ ምብታኽ

ኣብ መጀመርታ ኣብ CSS ተለዋዋጢ ረቛሒታትና (ንኣብነት, --breakpoint-md) ነጥብታት ምብታኽ እኳ እንተኣካተትናዮም ፡ እዚኦም ኣብ ሕቶታት ሚድያ ኣይድገፉን እዮም ፣ ግን ሕጂ’ውን ኣብ ውሽጢ ስብስባት ሕግታት ኣብ ሕቶታት ሚድያ ክጥቀሙ ይኽእሉ። እዞም ናይ ምብታኽ ተለዋዋጢ ረቛሒታት ብጃቫስክሪፕት ክጥቀሙሉ ስለዝኽእሉ ኣብቲ ዝተጠርነፈ CSS ንድሕሪት ዝምጥን ምትእስሳር ይጸንሑ። ኣብ ስፔክ ዝያዳ ፍለጡ .

ዘይድገፍ ኣብነት ኣብዚ ኣሎ ፤

@media (min-width: var(--breakpoint-sm)) {
  ...
}

ከምኡ ውን ኣብነት ናይቲ ዝድገፍ እንሆ፤

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}