Theming Bootstrap

ለቀላል ጭብጦች እና አካላት ለውጦች ለአለምአቀፍ የቅጥ ምርጫዎች ቡትስትራፕ 4ን በአዲሱ አብሮገነብ Sass ተለዋዋጮች ያብጁ።

መግቢያ

በBootstrap 3 ውስጥ፣ ጭብጥ በአብዛኛው የሚነዳው በተለዋዋጭ መሻሮች በ LESS፣ በብጁ CSS እና በፋይሎቻችን ውስጥ ባካተትነው የተለየ ጭብጥ የቅጥ ሉህ ነው dist። በተወሰነ ጥረት አንድ ሰው የ Bootstrap 3 ዋና ፋይሎቹን ሳይነኩ ሙሉ ለሙሉ እንደገና ሊነድፍ ይችላል. Bootstrap 4 የሚታወቅ፣ ግን ትንሽ የተለየ አቀራረብ ያቀርባል።

አሁን፣ ጭብጥ በ Sass ተለዋዋጮች፣ Sass ካርታዎች እና በብጁ ሲኤስኤስ ተከናውኗል። ከአሁን በኋላ የተለየ ገጽታ የቅጥ ሉህ የለም፤ በምትኩ፣ አብሮ የተሰራውን ቅልመት፣ ጥላዎችን እና ሌሎችንም ለመጨመር ማንቃት ይችላሉ።

ሳስ

የእራስዎን የንብረት ቧንቧ መስመር ተጠቅመው Sass ሲያጠናቅቁ ከተለዋዋጮች፣ ካርታዎች፣ ድብልቅ ነገሮች እና ሌሎችም ለመጠቀም የኛን የ Sass ፋይሎችን ይጠቀሙ።

የፋይል መዋቅር

በሚቻልበት ጊዜ የBootstrapን ዋና ፋይሎችን ከመቀየር ይቆጠቡ። ለ Sass፣ ያ ማለት እርስዎ እንዲያስተካክሉት እና እንዲራዘሙት ቡትስትራፕን የሚያስመጣ የራስዎን የቅጥ ሉህ መፍጠር ማለት ነው። እንደ npm ያለ የጥቅል አስተዳዳሪን እየተጠቀምክ እንደሆነ ካሰብክ፣ ይህን የሚመስል የፋይል መዋቅር ይኖርሃል፡-

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

የምንጭ ፋይሎቻችንን ካወረዱ እና የጥቅል አስተዳዳሪን እየተጠቀሙ ካልሆኑ፣ የBootstrap የምንጭ ፋይሎችን ከራስዎ በመለየት ተመሳሳይ የሆነ ነገር እራስዎ ማዋቀር ይፈልጋሉ።

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

በማስመጣት ላይ

በእርስዎ custom.scssውስጥ የ Bootstrap ምንጭ 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";

ያንን ማዋቀር በቦታዎ ውስጥ ያሉትን የ Sass ተለዋዋጮችን እና ካርታዎችን ማሻሻል መጀመር ይችላሉ custom.scss። // Optionalእንዲሁም እንደ አስፈላጊነቱ በክፍሉ ስር የ Bootstrap ክፍሎችን ማከል መጀመር ይችላሉ ። bootstrap.scssከፋይላችን የሚገኘውን ሙሉ የማስመጣት ቁልል እንደ መነሻ እንድትጠቀሙበት እንመክራለን ።

ተለዋዋጭ ነባሪዎች

በBootstrap ውስጥ ያለው እያንዳንዱ የሳስ ተለዋዋጭ የቡትስትራፕን !defaultየምንጭ ኮድ ሳይቀይሩ የተለዋዋጭውን ነባሪ እሴት በራስዎ Sass እንዲሽሩ የሚያስችልዎትን ባንዲራ ያካትታል። እንደ አስፈላጊነቱ ተለዋዋጮችን ይቅዱ እና ይለጥፉ፣ እሴቶቻቸውን ያሻሽሉ እና !defaultባንዲራውን ያስወግዱ። አንድ ተለዋዋጭ አስቀድሞ ከተመደበ፣ ከዚያ በቡትስትራፕ ውስጥ ባሉ ነባሪ እሴቶች እንደገና አይመደብም።

ሙሉውን የBootstrap ተለዋዋጮች ዝርዝር ውስጥ ያገኛሉ scss/_variables.scss። አንዳንድ ተለዋዋጮች ተቀናብረዋል null፣ እነዚህ ተለዋዋጮች በእርስዎ ውቅር ውስጥ ካልተሻሩ በስተቀር ንብረቱን አያወጡም።

ተለዋዋጭ መሻሮች የእኛ ተግባራቶች፣ ተለዋዋጮች እና ድብልቅ ነገሮች ከመጡ በኋላ መምጣት አለባቸው፣ ነገር ግን ከውጪ ከሚመጡት ቀሪዎቹ በፊት።

Bootstrapን በ npm ሲያስገቡ እና ሲያጠናቅቁ background-colorእና 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 ውስጥ ላለ ማንኛውም ተለዋዋጭ እንደ አስፈላጊነቱ ይድገሙት።

በጀማሪ ፕሮጄክታችን በ npm በኩል በ Bootstrap ይጀምሩ! Bootstrapን በራስዎ npm ፕሮጀክት እንዴት መገንባት እና ማበጀት እንደሚችሉ ለማየት ወደ twbs /bootstrap-npm-starter አብነት ማከማቻ ይሂዱ። Sass compiler፣ Autoprefixer፣ Stylelint፣ PurgeCSS እና Bootstrap አዶዎችን ያካትታል።

ካርታዎች እና ቀለበቶች

ቡትስትራፕ 4 በጣት የሚቆጠሩ የ Sass ካርታዎች፣ ተዛማጅ የCSS ቤተሰቦችን ማፍራት ቀላል የሚያደርጉ ቁልፍ እሴት ጥንዶችን ያካትታል። ለቀለሞቻችን፣ የፍርግርግ መግቻ ነጥቦች እና ሌሎችም የ Sass ካርታዎችን እንጠቀማለን። ልክ እንደ Sass ተለዋዋጮች፣ ሁሉም የ Sass ካርታዎች !defaultባንዲራውን ያካተቱ እና ሊሻሩ እና ሊራዘሙ ይችላሉ።

አንዳንድ የ Sass ካርታዎቻችን በነባሪ ወደ ባዶዎች ተዋህደዋል። ይህ የሚደረገው የSass ካርታን በቀላሉ ለማስፋፋት ነው፣ ነገር ግን እቃዎችን ከካርታው ላይ ትንሽ የበለጠ አስቸጋሪ ለማድረግ በሚያስችለው ወጪ ነው።

ካርታ ቀይር

በእኛ ካርታ ላይ ያለውን ቀለም ለመቀየር $theme-colors፣ ወደ ብጁ Sass ፋይልዎ የሚከተለውን ያክሉ።

$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";
...

አስፈላጊ ቁልፎች

ቡትስትራፕ በ Sass ካርታዎች ውስጥ አንዳንድ የተወሰኑ ቁልፎች እንዳሉ የሚገምተው እኛ በተጠቀምንበት ጊዜ እና እነዚህን እራሳችን ማራዘም ነው። የተካተቱትን ካርታዎች ሲያበጁ፣ የተወሰነ የሳስ ካርታ ቁልፍ ጥቅም ላይ በሚውልበት ጊዜ ስህተቶች ሊያጋጥሙዎት ይችላሉ።

ለምሳሌ፣ የ primary፣፣ successእና dangerቁልፎችን $theme-colorsለአገናኞች፣ አዝራሮች እና ለቅጽ ግዛቶች እንጠቀማለን። የእነዚህ ቁልፎች እሴቶች መተካት ምንም አይነት ችግር ሊኖርበት አይገባም፣ ነገር ግን እነሱን ማስወገድ የ Sass ስብስብ ችግሮችን ሊያስከትል ይችላል። በእነዚህ አጋጣሚዎች እነዚያን እሴቶች የሚጠቀመውን የ Sass ኮድ ማሻሻል ያስፈልግዎታል።

ተግባራት

Bootstrap በርካታ የ Sass ተግባራትን ይጠቀማል፣ ነገር ግን ለአጠቃላይ ጭብጥ የሚመለከተው ንዑስ ስብስብ ብቻ ነው። ከቀለም ካርታዎች እሴቶችን ለማግኘት ሶስት ተግባራትን አካተናል፡-

@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 የቀለም ተለዋዋጭ እንዴት እንደሚጠቀሙ አይነት ከ Sass ካርታ አንድ ቀለም እንዲመርጡ ያስችሉዎታል።

.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);
}

ለተጨማሪ የ Sass ካርታዎች ደረጃ ተግባራትን ለመፍጠር ወይም የበለጠ የቃላት አነጋገር ለመሆን ከፈለግክ ተጨማሪ ተግባራትን ወደፊት ወይም የራስህ ብጁ Sass ሊታከል ይችላል።

የቀለም ንፅፅር

በ Bootstrap ውስጥ የምናካትተው ተጨማሪ ተግባር የቀለም ንፅፅር ተግባር ነው color-yiq። በተጠቀሰው የመሠረት ቀለም ላይ በመመርኮዝ የብርሃን ( ) ወይም ጨለማ ( ) ንፅፅር ቀለም በራስ-ሰር ለመመለስ የ YIQ ቀለም ቦታን ይጠቀማል ። ይህ ተግባር በተለይ ብዙ ክፍሎችን ለሚያመነጩበት ድብልቅ ወይም loops ጠቃሚ ነው።#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 አምልጥ

ተግባሩን ከ SVG ዳራ ምስሎች ለማምለጥ escape-svgእንጠቀማለን ። በ IE ውስጥ የበስተጀርባ ምስሎችን በትክክል ለመስራት እነዚህ ቁምፊዎች ማምለጥ አለባቸው። ተግባሩን ሲጠቀሙ የውሂብ ዩአርአይዎች መጠቀስ አለባቸው።<>#escape-svg

ተግባራትን ይጨምሩ እና ይቀንሱ

የሲኤስኤስ ተግባርን ለመጠቅለል addእና ተግባራቶቹን እንጠቀማለን ። የእነዚህ ተግባራት ዋና ዓላማ "አንድ የሌለው" እሴት ወደ መግለጫው ሲተላለፍ ስህተቶችን ማስወገድ ነው. ምንም እንኳን በሂሳብ ደረጃ ትክክል ቢሆኑም እንደዚህ ያሉ አገላለጾች በሁሉም አሳሾች ላይ ስህተትን ይመልሳሉ።subtractcalc0calccalc(10px - 0)

ካልሲው የሚሰራበት ምሳሌ፡-

$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);
}

ካልሲው ትክክል ያልሆነበት ምሳሌ፡-

$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);
}

Sass አማራጮች

አብሮ በተሰራው የብጁ ተለዋዋጮች ፋይላችን Bootstrap 4ን ያብጁ እና አለምአቀፍ የሲኤስኤስ ምርጫዎችን በአዲስ $enable-*Sass ተለዋዋጮች በቀላሉ ይቀያይሩ። የተለዋዋጭ እሴትን ይሽሩ እና npm run testእንደ አስፈላጊነቱ እንደገና ያሰባስቡ።

scss/_variables.scssበBootstrap ፋይል ውስጥ እነዚህን ተለዋዋጮች ለቁልፍ ዓለም አቀፍ አማራጮች ማግኘት እና ማበጀት ይችላሉ ።

ተለዋዋጭ	እሴቶች	መግለጫ
`$spacer`	`1rem`(ነባሪ)፣ ወይም ማንኛውም እሴት > 0	የስፔሰር መገልገያዎችን በፕሮግራም ለማመንጨት ነባሪውን የስፔሰር ዋጋ ይገልጻል ።
`$enable-rounded`	`true`(ነባሪ) ወይም`false`	`border-radius`በተለያዩ ክፍሎች ላይ አስቀድሞ የተገለጹ ቅጦችን ያነቃል ።
`$enable-shadows`	`true`ወይም `false`(ነባሪ)	`box-shadow`በተለያዩ ክፍሎች ላይ አስቀድሞ የተገለጹ የጌጣጌጥ ቅጦችን ያነቃል ። `box-shadow`ለትኩረት ግዛቶች ጥቅም ላይ የሚውሉትን አይጎዳውም .
`$enable-gradients`	`true`ወይም `false`(ነባሪ)	`background-image`በተለያዩ ክፍሎች ላይ ባሉ ቅጦች ቀድሞ የተገለጹ ቅልመትን ያነቃል ።
`$enable-transitions`	`true`(ነባሪ) ወይም`false`	`transition`በተለያዩ ክፍሎች ላይ አስቀድሞ የተገለጹትን ያነቃል ።
`$enable-prefers-reduced-motion-media-query`	`true`(ነባሪ) ወይም`false`	በተጠቃሚዎች አሳሽ/የስርዓተ ክወና ምርጫዎች መሰረት የተወሰኑ እነማዎችን/ሽግግሮችን የሚገድበው `prefers-reduced-motion`የሚዲያ ጥያቄን ያነቃል ።
`$enable-hover-media-query`	`true`ወይም `false`(ነባሪ)	ተቋርጧል
`$enable-grid-classes`	`true`(ነባሪ) ወይም`false`	ለግሪድ ሲስተም (ለምሳሌ፣፣፣፣፣ ወዘተ.) የሲኤስኤስ ክፍሎችን `.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 የተለያዩ ክፍሎች እና መገልገያዎች የተገነቡት በሳስ ካርታ ውስጥ በተገለጹ ተከታታይ ቀለሞች ነው። ተከታታይ ደንቦችን በፍጥነት ለማመንጨት ይህ ካርታ በ Sass ውስጥ መዞር ይችላል።

ሁሉም ቀለሞች

በ Bootstrap 4 ውስጥ የሚገኙ ሁሉም ቀለሞች እንደ Sass ተለዋዋጮች እና scss/_variables.scssበፋይል የ Sass ካርታ ይገኛሉ። ይህ በቀጣዮቹ ትንንሽ ልቀቶች ላይ ተጨማሪ ጥላዎችን ለመጨመር ይስፋፋል፣ ልክ አስቀድመን እንዳካተትነው የግራጫ ቤተ-ስዕል ።

$ ሰማያዊ #007ቢኤፍ

$indigo #6610f2

$ ሐምራዊ #6f42c1

$ ሮዝ #e83e8c

$ ቀይ #ዲሲ3545

$ ብርቱካን #ኤፍዲ7e14

$ ቢጫ #ffc107

$ አረንጓዴ #28a745

አምስት ብር #20c997

$ ሳይያን #17a2b8

በእርስዎ Sass ውስጥ እነዚህን እንዴት መጠቀም እንደሚችሉ እነሆ፡-

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

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

የቀለም መገልገያ ክፍሎች ለማቀናበር colorእና background-color.

ለወደፊቱ፣ ከታች ያሉትን ግራጫማ ቀለሞች እንዳደረግነው የሳስ ካርታዎችን እና ተለዋዋጮችን ለእያንዳንዱ ቀለም ጥላዎች ለማቅረብ አላማ እናደርጋለን።

የገጽታ ቀለሞች

የቀለም መርሃግብሮችን ለመፍጠር አነስ ያለ የቀለም ቤተ-ስዕል ለመፍጠር የሁሉም ቀለሞች ንዑስ ስብስብ እንጠቀማለን፣ እንዲሁም እንደ Sass ተለዋዋጭዎች እና የ Sass ካርታ በ Bootstrap scss/_variables.scssፋይል ውስጥ ይገኛል።

$ ዋና #007ቢኤፍ

$ ሁለተኛ #6c757d

$ ስኬት #28a745

አደጋ $ #ዲሲ3545

$ ማስጠንቀቂያ #ffc107

$ መረጃ #17a2b8

$ ብርሃን #f8f9fa

$ ጨለማ #343a40

ግራጫዎች

scss/_variables.scssበፕሮጀክትዎ ላይ ወጥነት ላለው ግራጫማ ጥላዎች ሰፊ የሆነ የግራጫ ተለዋዋጮች ስብስብ እና የ Sass ካርታ ። እነዚህ ከገለልተኛ ግራጫዎች ይልቅ ወደ ስውር ሰማያዊ ድምጽ የሚመሩ "ቀዝቃዛ ግራጫዎች" መሆናቸውን ልብ ይበሉ።

$ ግራጫ -100 #f8f9fa

$ ግራጫ -200 #e9ecef

ግራጫ - 300 ዶላር #dee2e6

ግራጫ - 400 ዶላር #ሲድ4ዳ

ግራጫ - 500 ዶላር # adb5bd

ግራጫ - 600 ዶላር #6c757d

ግራጫ - 700 ዶላር # 495057

ግራጫ - 800 ዶላር #343a40

ግራጫ - 900 ዶላር #212529

በ ውስጥ scss/_variables.scss፣ የ Bootstrap ቀለም ተለዋዋጮች እና የሳስ ካርታ ያገኛሉ። $colorsየ Sass ካርታ ምሳሌ ይኸውና ፡-

$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ብዙዎቹ የBootstrap ክፍሎች እና መገልገያዎች በ Sass ካርታ ላይ በሚደጋገሙ ቀለበቶች የተገነቡ ናቸው ። ይህ በተለይ በእኛ የአንድ አካል $theme-colorsልዩነቶችን ለመፍጠር እና ለእያንዳንዱ መግቻ ነጥብ ምላሽ ሰጪ ልዩነቶችን ለመፍጠር አጋዥ ነው። እነዚህን የሳስ ካርታዎች ሲያበጁ እና እንደገና ሲያጠናቅቁ፣ ለውጦችዎ በእነዚህ ዑደቶች ውስጥ ሲንፀባረቁ ያያሉ።

መቀየሪያዎች

ብዙዎቹ የ Bootstrap ክፍሎች የተገነቡት በመሠረታዊ-መቀየሪያ ክፍል አቀራረብ ነው። ይህ ማለት የአጻጻፉ አብዛኛው ክፍል ወደ ቤዝ ክፍል (ለምሳሌ .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);
}

ምላሽ ሰጪ

እነዚህ የ Sass loops በቀለም ካርታዎች ብቻ የተገደቡ አይደሉም። እንዲሁም የእርስዎን ክፍሎች ወይም መገልገያዎች ምላሽ ሰጪ ልዩነቶች ማመንጨት ይችላሉ። @eachየ $grid-breakpointsSass ካርታውን የሚዲያ መጠይቅን የምናጠቃልልበትን ምላሽ ሰጪ የጽሑፍ አሰላለፍ መገልገያዎችን እንደ ምሳሌ እንውሰድ ።

@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ለውጦችዎ በዚያ ካርታ ላይ በሚደጋገሙ ቀለበቶች ላይ ተፈጻሚ ይሆናሉ።

የሲኤስኤስ ተለዋዋጮች

Bootstrap 4 በተጠናቀረ CSS ውስጥ ወደ ሁለት ደርዘን የሚጠጉ የ CSS ብጁ ንብረቶችን (ተለዋዋጮችን) ያካትታል ። እነዚህ እንደ የእኛ ጭብጥ ቀለሞች፣ መግቻ ነጥቦች እና የመጀመሪያ ደረጃ ቅርጸ-ቁምፊ ቁልል በአሳሽዎ ኢንስፔክተር፣ ኮድ ማጠሪያ ወይም አጠቃላይ ፕሮቶታይፕ ውስጥ ያሉ በተለምዶ ጥቅም ላይ የዋሉ እሴቶችን በቀላሉ ማግኘት ይችላሉ።

የሚገኙ ተለዋዋጮች

እኛ የምናካትታቸው ተለዋዋጮች እነሆ ( :rootአስፈላጊ መሆኑን ልብ ይበሉ)። በእኛ _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;
}

ምሳሌዎች

የሲኤስኤስ ተለዋዋጮች ከ 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);
  }
}