in English

ቴሚንግ ቡትስትራፕ

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

መእተዊ

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

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

ሳስ

ናይ ገዛእ ርእስኻ ንብረት ሻምብቆ ተጠቒምካ ሳስ ክትጥርንፍ ከለኻ ንተለዋዋጢ ረቛሒታት፣ ካርታታት፣ ሚክሲንን ካልእን ንምጥቃም ምንጪ ሳስ ፋይላትና ተጠቐም ።

ኣቃውማ ፋይል

ብዝተኻእለ መጠን ናይ ቡትስትራፕ ቀንዲ ፋይላት ካብ ምቕያር ተቖጠብ። ንሳስ ማለት ንቡትስትራፕ ዘእቱ ናይ ገዛእ ርእስኻ ቅዲ ጽሑፍ ምፍጣር ማለት እዩ ምእንቲ ክትቅይሮን ከተናውሖን ትኽእል። ከም 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

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

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

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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 ዘሎ !defaultባንዴራ ዘጠቓልል ኮይኑ ነቲ ናይ ቡትስትራፕ ምንጪ ኮድ ከይቀየርካ ኣብ ናይ ገዛእ ርእስኻ Sass ናይቲ ተለዋዋጢ ነባሪ ዋጋ ክትሽፍኖ ዘኽእለካ እዩ። ተለዋዋጢ ረቛሒታት ከም ኣድላይነቱ ቅዳሕን ምልጣፍን፣ ክብርታቶም ምቕያርን !defaultባንዴራ ምእላይን። ሓደ ተለዋዋጢ ድሮ ተመዲቡ እንተኾይኑ፡ ሽዑ በቶም ኣብ Bootstrap ዘለዉ ነባሪ ክብርታት ዳግማይ ኣይምደብን እዩ።

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

ተለዋዋጢ ምግዳፍ ድሕሪ ፋንክሽንና፣ ተለዋዋጢ፣ ሚክሲንና ካብ ወጻኢ ክመጽእ ኣለዎ፣ ግን ቅድሚ እቶም ዝተረፉ ኣእትዎት።

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

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

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

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

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

ብ Bootstrap ብመንገዲ npm ምስ ጀማሪ ፕሮጀክትና ጀምር! ኣብ ናይ ገዛእ ርእስኻ npm ፕሮጀክት ከመይ ጌርካ Bootstrap ትሃንጽን ትመዓራረን ንምርኣይ ናብ twbs/bootstrap-npm-starter template repository ኣቕንዕ። Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ከምኡውን Bootstrap Icons ዘጠቓልል እዩ።

ካርታታትን ሉፕን

ቡትስትራፕ 4 ብኣጻብዕ ዝቑጸሩ ካርታታት ሳስ ዘጠቓልል ኮይኑ፡ ስድራቤታት ተዛመድቲ CSS ንምፍጣር ዝቐለለ ዝገብሩ ቁልፊ ጽምዲ ክብርታት የጠቓልል። ንሕብርታትና፣ ንናይ ሽቦ ምብታኽ ነጥብታትናን ካልእን ሳስ ካርታታት ንጥቀም። ልክዕ ከም ተለዋዋጢ ሳስ ኩሎም ካርታታት ሳስ !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ኣብ ዝተፈላለዩ ኣካላት ኣቐዲሞም ዝተነጸሩ ቅዲታት ስልማት የኽእል ። box-shadowንፎኮስ ኩነታት ዝውዕል s ኣይጸልዎን እዩ።
$enable-gradients trueወይ false(ነባሪ) . ኣቐዲሞም ዝተነጸሩ ምዕባለታት ብመንገዲ background-imageቅዲታት ኣብ ዝተፈላለዩ ኣካላት የኽእል።
$enable-transitions true(ነባሪ) ወይfalse transitionኣብ ዝተፈላለዩ ኣካላት ኣቐዲሙ ዝተነጸረ s የኽእል ።
$enable-prefers-reduced-motion-media-query true(ነባሪ) ወይfalse Enables the prefers-reduced-motionmedia 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 ዝኾነ falseካብቶም ኣብ v5.

ሕብሪ

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

ኩሉ ሕብርታት

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

$ሰማያዊ #007bff ዝብል ጽሑፍ ኣሎ።
$ኢንዲጎ #6610f2 ዝብል ጽሑፍ ኣሎ።
$ሓምላይ #6f42c1 ዝብል ጽሑፍ ኣሎ።
$ሮዛ #e83e8c ዝብል ጽሑፍ ኣሎ።
$ቀይሕ #dc3545 ዝብል ጽሑፍ ኣሎ።
$ኣራንሺ #fd7e14 ዝብል ጽሑፍ ኣሎ።
$ብጫ #ffc107 ዝብል ጽሑፍ ኣሎ።
$ቀጠልያ #28ሀ745
$ቴል ዝብል እዩ። #20ሐ997
$ሳይን ዝብል እዩ። #17ሀ2ብ8

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

// 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 ይርከብ።

$መባእታዊ #007bff ዝብል ጽሑፍ ኣሎ።
$ካልኣይ ደረጃ #6c757d ዝብል ጽሑፍ ኣሎ።
$ዓወት #28ሀ745
$ሓደጋ #dc3545 ዝብል ጽሑፍ ኣሎ።
$ መጠንቀቕታ #ffc107 ዝብል ጽሑፍ ኣሎ።
$info ዝብል ጽሑፍ ኣሎ። #17ሀ2ብ8
$ብርሃን #ፍ8ፍ9ፋ
$ጸልማት #343ሀ40

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

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

$ግራጭ-100 #ፍ8ፍ9ፋ
$ግራጭ-200 #e9ecef ዝብል ጽሑፍ ኣሎ።
$ግራጭ-300 #dee2e6 ዝብል ጽሑፍ ኣሎ።
$ግራጭ-400 #ced4da ዝብል ጽሑፍ ኣሎ።
$ግራጭ-500 #ዓድብ5ብድ
$ግራጭ-600 #6c757d ዝብል ጽሑፍ ኣሎ።
$ግራጭ-700 #495057 ዝብል ጽሑፍ ኣሎ።
$ግራጭ-800 #343ሀ40
$ግራጭ-900 #212529 ዝብል ጽሑፍ ኣሎ።

ኣብ ውሽጢ 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ዝኸውን ሉፕ ምስ ናይ ሚድያ ሕቶ include እንሓዋውሰሉ ምላሽ ዝህቡ ናይ ጽሑፍ ኣሰላልፋ ዩቲሊቲታትና ንውሰድ።$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", "Liberation 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);
  }
}