Source

ቴሚንግ ቡትስትራፕ

ንቐሊል ቴማን ለውጢ ኣካላትን ንዓለማዊ ቅዲ ምርጫታት ብሓደስቲ ኣብ ውሽጢ ዝተሃንጸ ናይ 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

@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.

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

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 ብኣጻብዕ ዝቑጸሩ ካርታታት ሳስ ዘጠቓልል ኮይኑ፡ ስድራቤታት ተዛመድቲ 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`
}

ሳስ ኣማራጺታት

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-hover-media-query trueወይ false(ነባሪ) . ካብ ስራሕ ወጻኢ ዝኾነ
$enable-grid-classes true(ነባሪ) ወይfalse ንናይ ሽቦ ስርዓት ዝኸውን ናይ CSS ክፍልታት ምፍጣር የኽእል (ንኣብነት፡ , .container, .row, .col-md-1ወዘተ)።
$enable-caret true(ነባሪ) ወይfalse ስውር ባእታ ካሬት ኣብ .dropdown-toggle.
$enable-print-styles true(ነባሪ) ወይfalse ንሕትመት ንምምሕያሽ ቅዲታት የኽእል።

ሕብሪ

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

ኩሉ ሕብርታት

ኩሎም ኣብ 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 ኣብ Bootstraps’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ዝኸውን ሉፕ ምስ ናይ ሚድያ ሕቶ 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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 ንድሕሪት ዝምጥን ምትእስሳር ይጸንሑ። ኣብቲ spec ዝያዳ ፍለጡ።

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

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

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

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