ሳስ

ንፕሮጀክትካ ብቕልጡፍ ንምህናጽን ንምምዕርራይን ዝሕግዙኻ ተለዋዋጢ ረቛሒታት፡ ካርታታት፡ ሚክሲናትን ተግባራትን ንምጥቃም ምንጪ ሳስ ፋይላትና ተጠቐም።

ኣብዚ ገጽ

ንተለዋዋጢ ረቛሒታት፣ ካርታታት፣ ሚክሲንን ካልእን ንምጥቃም ምንጪ ሳስ ፋይላትና ተጠቐም።

ኣቃውማ ፋይል

ብዝተኻእለ መጠን ናይ ቡትስትራፕ ቀንዲ ፋይላት ካብ ምቕያር ተቖጠብ። ንሳስ ማለት ንቡትስትራፕ ዘእቱ ናይ ገዛእ ርእስኻ ቅዲ ጽሑፍ ምፍጣር ማለት እዩ ምእንቲ ክትቅይሮን ከተናውሖን ትኽእል። ከም 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/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

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

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

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

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

ተለዋዋጢ ምግዳፍ ድሕሪ ተግባራትና ምእታው ክመጽእ ኣለዎ፣ ግን ቅድሚ እቶም ዝተረፉ ኣእትዎት።

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

// Required
@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 ዘጠቓልል እዩ።

ካርታታትን ሉፕን

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

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

ካርታ ምቕያር

ኩሎም ኣብቲ $theme-colorsካርታ ዘለዉ ተለዋዋጢ ረቛሒታት ከም ንበይኖም ዝቕየሩ ተለዋዋጢ ይግለጹ። ኣብ ካርታና ንዘሎ ሕብሪ ንምቕያር $theme-colors፡ ኣብቲ ብሕታዊ ሳስ ፋይልካ ነዚ ዝስዕብ ወስኸሉ፤

$primary: #0074d9;
$danger: #ff4136;

ድሒሮም እዞም ተለዋዋጢ ረቛሒታት ኣብ $theme-colorsካርታ ቡትስትራፕ ይቕመጡ፤

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

ኣብ ካርታ ወስኹ

ሓድሽ ሕብርታት ናብ $theme-colors፣ ወይ ዝኾነ ካልእ ካርታ ወስኸሉ፣ ሓድሽ ናይ ሳስ ካርታ ምስ ብሕታዊ ክብርታትካ ብምፍጣርን ምስቲ መበቆላዊ ካርታ ብምውህሃድን እዩ። ኣብ ከምዚ ኩነታት ሓድሽ ካርታ ፈጢርና $custom-colorsምስ $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

ካብ ካርታ ኣውጽእዎ።

$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";
// etc

ዘድልዩ መፍትሕታት

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

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

ተግባራት

ሕብርታት

ኣብ ጎኒ እቶም ዘለዉና ካርታታት ሳስ ፡ ሕብርታት ቴማ ከም ንበይኖም ዝቕየሩ ተለዋዋጢ ዋጋታት እውን ክንጥቀመሎም ንኽእል ኢና፡ ከም $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

tint-color()ሕብርታት ብ Bootstrap's ን shade-color()ተግባራትን ከተብርህ ወይ ከተጸልምት ትኽእል ኢኻ ። እዞም ተግባራት ሕብርታት ምስ ጸሊም ወይ ጻዕዳ ክሕውሱ እዮም፣ ዘይከምቲ ናይ ሳስ ተወላዲን lighten()ተግባራትን darken()ንቐሊልነት ብውሱን መጠን ዝቕይሩ፣ እዚ መብዛሕትኡ ግዜ ናብቲ ዝድለ ውጽኢት ኣይመርሕን እዩ።

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

ብተግባር ነቲ ፋንክሽን ጸዊዕካ ኣብቲ ናይ ሕብርን ክብደትን መለክዒታት ምሓለፍካዮ።

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

ንጽጽር ሕብሪ

ንጽጽር ሕብሪ ዝምልከት ናይ WCAG 2.0 ተበጻሕነት ደረጃታት ንምምላእ ፡ ጸሓፍቲ ብዘይካ ኣዝዮም ውሑዳት ፡ እንተወሓደ 4.5:1 ዝኾነ ንጽጽር ሬሽዮ ከቕርቡ ኣለዎም ።

ኣብ ቡትስትራፕ እነካትቶ ተወሳኺ ተግባር ድማ ናይ ሕብሪ ንጽጽር ተግባር እዩ፣ color-contrast። ኣብ ሓደ ናይ ሕብሪ ቦታ ኣብ ኣንጻራዊ ብርሃን ዝተመርኮሰ ናይ ንጽጽር ደረት ንምሕሳብ WCAG 2.0 ኣልጎሪዝም ብምጥቃም ኣብቲ ዝተወሰነ መሰረታዊ ሕብሪ ዝተመርኮሰ ብርሃን ( )፣ ጸሊም ( ) ወይ ጸሊም ( ) ንጽጽር ሕብሪ ብኣውቶማቲክ ንምምላስ ይጥቀመሉ ። እዚ ተግባር ብፍላይ ንሚክሲን ወይ ሉፕስ ብዙሓት ክፍልታት ትፈጥር ዘለኻ ጠቓሚ እዩ።sRGB#fff#212529#000

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

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

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

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

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

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

ካብ SVG ምህዳም

ነቲ escape-svgፋንክሽን ካብቲ <, >ከምኡ’ውን #ንSVG ድሕረ ባይታ ምስልታት ዝኸውን ፊደላት ንምህዳም ንጥቀመሉ። ነቲ ተግባር ኣብ እንጥቀመሉ 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);
}

ሚክሲን ዝበሃሉ ምዃኖም ይፍለጥ

ማህደርና ንክፋላት ቡትስትራፕ ሓይሊ ዝህቡ ቶን ሚክሲን scss/mixins/ኣለዉዎን ኣብ መላእ ናይ ገዛእ ርእስኻ ፕሮጀክት እውን ክትጥቀመሉ ትኽእል ኢኻ።

ሕብራዊ ስርዓታት

prefers-color-schemeናይ ሚድያ ሕቶ ኣቋራጭ ምትሕውዋስ ምስ ደገፍ ን light, dark, ከምኡውን ብሕታዊ ሕብራዊ ስርዓታት ይርከብ።

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}