Source

థీమ్ బూట్స్ట్రాప్

సులభమైన థీమ్ మరియు కాంపోనెంట్ మార్పుల కోసం గ్లోబల్ స్టైల్ ప్రాధాన్యతల కోసం మా కొత్త అంతర్నిర్మిత సాస్ వేరియబుల్స్‌తో బూట్‌స్ట్రాప్ 4ని అనుకూలీకరించండి.

పరిచయం

distబూట్‌స్ట్రాప్ 3లో, తక్కువ, కస్టమ్ CSS మరియు మేము మా ఫైల్‌లలో చేర్చిన ప్రత్యేక థీమ్ స్టైల్‌షీట్‌లో వేరియబుల్ ఓవర్‌రైడ్‌ల ద్వారా థీమింగ్ ఎక్కువగా నడపబడుతుంది . కొంత ప్రయత్నంతో, కోర్ ఫైల్‌లను తాకకుండానే బూట్‌స్ట్రాప్ 3 రూపాన్ని పూర్తిగా రీడిజైన్ చేయవచ్చు. బూట్‌స్ట్రాప్ 4 సుపరిచితమైన, కానీ కొద్దిగా భిన్నమైన విధానాన్ని అందిస్తుంది.

ఇప్పుడు, థీమింగ్ సాస్ వేరియబుల్స్, సాస్ మ్యాప్స్ మరియు కస్టమ్ CSS ద్వారా సాధించబడుతుంది. అంకితమైన థీమ్ స్టైల్‌షీట్ లేదు; బదులుగా, మీరు గ్రేడియంట్లు, నీడలు మరియు మరిన్నింటిని జోడించడానికి అంతర్నిర్మిత థీమ్‌ను ప్రారంభించవచ్చు.

సాస్

వేరియబుల్స్, మ్యాప్‌లు, మిక్సిన్‌లు మరియు మరిన్నింటి ప్రయోజనాన్ని పొందడానికి మా సోర్స్ Sass ఫైల్‌లను ఉపయోగించండి. మా బిల్డ్‌లో బ్రౌజర్ రౌండింగ్‌తో సమస్యలను నివారించడానికి మేము Sass రౌండింగ్ ఖచ్చితత్వాన్ని 6కి (డిఫాల్ట్‌గా ఇది 5) పెంచాము.

ఫైల్ నిర్మాణం

సాధ్యమైనప్పుడల్లా, బూట్‌స్ట్రాప్ యొక్క ప్రధాన ఫైల్‌లను సవరించడాన్ని నివారించండి. Sass కోసం, అంటే బూట్‌స్ట్రాప్‌ను దిగుమతి చేసే మీ స్వంత స్టైల్‌షీట్‌ని సృష్టించడం అంటే మీరు దానిని సవరించవచ్చు మరియు పొడిగించవచ్చు. మీరు npm వంటి ప్యాకేజీ నిర్వాహికిని ఉపయోగిస్తున్నారని ఊహిస్తే, మీరు ఇలా కనిపించే ఫైల్ నిర్మాణాన్ని కలిగి ఉంటారు:

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

మీరు మా సోర్స్ ఫైల్‌లను డౌన్‌లోడ్ చేసి, ప్యాకేజీ నిర్వాహికిని ఉపయోగించకుంటే, మీరు బూట్‌స్ట్రాప్ యొక్క సోర్స్ ఫైల్‌లను మీ స్వంత ఫైల్‌ల నుండి వేరుగా ఉంచుతూ, ఆ నిర్మాణాన్ని పోలి ఉండే ఏదైనా మాన్యువల్‌గా సెటప్ చేయాలనుకుంటున్నారు.

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

దిగుమతి చేస్తోంది

మీ లో custom.scss, మీరు బూట్‌స్ట్రాప్ యొక్క సోర్స్ Sass ఫైల్‌లను దిగుమతి చేస్తారు. మీకు రెండు ఎంపికలు ఉన్నాయి: బూట్‌స్ట్రాప్ మొత్తాన్ని చేర్చండి లేదా మీకు అవసరమైన భాగాలను ఎంచుకోండి. మేము రెండవదాన్ని ప్రోత్సహిస్తాము, అయినప్పటికీ మా భాగాలలో కొన్ని అవసరాలు మరియు డిపెండెన్సీలు ఉన్నాయని గుర్తుంచుకోండి. మీరు మా ప్లగిన్‌ల కోసం కొన్ని జావాస్క్రిప్ట్‌లను కూడా చేర్చాలి.

// 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.scssమీ ప్రారంభ బిందువుగా ఉపయోగించమని మేము సూచిస్తున్నాము.

వేరియబుల్ డిఫాల్ట్‌లు

బూట్‌స్ట్రాప్ 4లోని ప్రతి సాస్ వేరియబుల్ !defaultబూట్‌స్ట్రాప్ సోర్స్ కోడ్‌ను సవరించకుండానే మీ స్వంత సాస్‌లో వేరియబుల్ డిఫాల్ట్ విలువను భర్తీ చేయడానికి మిమ్మల్ని అనుమతించే ఫ్లాగ్‌ను కలిగి ఉంటుంది. అవసరమైన విధంగా వేరియబుల్స్‌ను కాపీ చేసి పేస్ట్ చేయండి, వాటి విలువలను సవరించండి మరియు !defaultఫ్లాగ్‌ను తీసివేయండి. వేరియబుల్ ఇప్పటికే కేటాయించబడి ఉంటే, అది బూట్‌స్ట్రాప్‌లోని డిఫాల్ట్ విలువల ద్వారా తిరిగి కేటాయించబడదు.

మీరు బూట్స్ట్రాప్ యొక్క వేరియబుల్స్ యొక్క పూర్తి జాబితాను లో కనుగొంటారు scss/_variables.scss.

అదే Sass ఫైల్‌లోని వేరియబుల్ ఓవర్‌రైడ్‌లు డిఫాల్ట్ వేరియబుల్స్‌కు ముందు లేదా తర్వాత రావచ్చు. అయితే, Sass ఫైల్‌లలో ఓవర్‌రైడ్ చేస్తున్నప్పుడు, మీరు Bootstrap యొక్క Sass ఫైల్‌లను దిగుమతి చేసే ముందు మీ ఓవర్‌రైడ్‌లు తప్పనిసరిగా వస్తాయి.

npm ద్వారా బూట్‌స్ట్రాప్‌ను దిగుమతి చేసేటప్పుడు మరియు కంపైల్ చేసేటప్పుడు background-colorమార్చే ఉదాహరణ ఇక్కడ ఉంది color:<body>

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

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

దిగువ గ్లోబల్ ఎంపికలతో సహా బూట్‌స్ట్రాప్‌లోని ఏదైనా వేరియబుల్ కోసం అవసరమైన విధంగా పునరావృతం చేయండి.

మ్యాప్‌లు మరియు లూప్‌లు

బూట్‌స్ట్రాప్ 4లో కొన్ని సాస్ మ్యాప్‌లు ఉన్నాయి, సంబంధిత CSS కుటుంబాలను రూపొందించడాన్ని సులభతరం చేసే కీలక విలువ జతల. మేము మా రంగులు, గ్రిడ్ బ్రేక్‌పాయింట్‌లు మరియు మరిన్నింటి కోసం సాస్ మ్యాప్‌లను ఉపయోగిస్తాము. Sass వేరియబుల్స్ లాగానే, అన్ని Sass మ్యాప్‌లు !defaultఫ్లాగ్‌ని కలిగి ఉంటాయి మరియు భర్తీ చేయబడతాయి మరియు పొడిగించబడతాయి.

మా 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ఈ కీల విలువలను భర్తీ చేయడం వలన ఎటువంటి సమస్యలు ఉండకూడదు, కానీ వాటిని తీసివేయడం వలన సాస్ సంకలనం సమస్యలు ఏర్పడవచ్చు. ఈ సందర్భాలలో, మీరు ఆ విలువలను ఉపయోగించుకునే సాస్ కోడ్‌ని సవరించాలి.

విధులు

బూట్‌స్ట్రాప్ అనేక సాస్ ఫంక్షన్‌లను ఉపయోగిస్తుంది, అయితే సాధారణ థీమింగ్‌కు ఉపసమితి మాత్రమే వర్తిస్తుంది. రంగు మ్యాప్‌ల నుండి విలువలను పొందడానికి మేము మూడు ఫంక్షన్‌లను చేర్చాము:

@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`
}

సాస్ ఎంపికలు

మా అంతర్నిర్మిత కస్టమ్ వేరియబుల్స్ ఫైల్‌తో బూట్‌స్ట్రాప్ 4ని అనుకూలీకరించండి మరియు కొత్త $enable-*సాస్ వేరియబుల్స్‌తో గ్లోబల్ CSS ప్రాధాన్యతలను సులభంగా టోగుల్ చేయండి. వేరియబుల్ విలువను భర్తీ చేయండి మరియు 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వివిధ భాగాలపై ముందే నిర్వచించిన లను ప్రారంభిస్తుంది .
$enable-prefers-reduced-motion-media-query true(డిఫాల్ట్) లేదాfalse prefers-reduced-motionమీడియా ప్రశ్నను ప్రారంభిస్తుంది , ఇది వినియోగదారుల బ్రౌజర్/ఆపరేటింగ్ సిస్టమ్ ప్రాధాన్యతల ఆధారంగా నిర్దిష్ట యానిమేషన్‌లు/పరివర్తనాలను అణిచివేస్తుంది.
$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 ప్రింటింగ్‌ని ఆప్టిమైజ్ చేయడానికి స్టైల్‌లను ప్రారంభిస్తుంది.
$enable-validation-icons true(డిఫాల్ట్) లేదాfalse background-imageవచన ఇన్‌పుట్‌లలోని చిహ్నాలను మరియు ధ్రువీకరణ స్థితుల కోసం కొన్ని అనుకూల ఫారమ్‌లను ప్రారంభిస్తుంది .

రంగు

బూట్‌స్ట్రాప్ యొక్క అనేక భాగాలు మరియు యుటిలిటీలు సాస్ మ్యాప్‌లో నిర్వచించబడిన రంగుల శ్రేణి ద్వారా నిర్మించబడ్డాయి. నియమాల శ్రేణిని త్వరగా రూపొందించడానికి ఈ మ్యాప్‌ను సాస్‌లో లూప్ చేయవచ్చు.

అన్ని రంగులు

బూట్‌స్ట్రాప్ 4లో అందుబాటులో ఉన్న అన్ని రంగులు సాస్ వేరియబుల్స్‌గా మరియు scss/_variables.scssఫైల్‌లో సాస్ మ్యాప్‌గా అందుబాటులో ఉంటాయి. మేము ఇప్పటికే చేర్చిన గ్రేస్కేల్ ప్యాలెట్ లాగా అదనపు షేడ్స్‌ని జోడించడానికి ఇది తదుపరి చిన్న విడుదలలలో విస్తరించబడుతుంది .

నీలం
నీలిమందు
ఊదా
పింక్
ఎరుపు
నారింజ రంగు
పసుపు
ఆకుపచ్చ
టీల్
నీలవర్ణం

మీరు మీ సాస్‌లో వీటిని ఎలా ఉపయోగించవచ్చో ఇక్కడ ఉంది:

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

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

రంగు వినియోగ తరగతులు సెట్టింగ్ colorమరియు background-color.

భవిష్యత్తులో, మేము దిగువన ఉన్న గ్రేస్కేల్ రంగులతో అందించిన విధంగా ప్రతి రంగు యొక్క షేడ్స్ కోసం Sass మ్యాప్‌లు మరియు వేరియబుల్‌లను అందించాలని లక్ష్యంగా పెట్టుకుంటాము.

థీమ్ రంగులు

scss/_variables.scssబూట్‌స్ట్రాప్‌ల ఫైల్‌లో Sass వేరియబుల్స్ మరియు Sass మ్యాప్‌గా కూడా అందుబాటులో ఉండే రంగు స్కీమ్‌లను రూపొందించడానికి చిన్న రంగుల పాలెట్‌ను రూపొందించడానికి మేము అన్ని రంగుల ఉపసమితిని ఉపయోగిస్తాము .

ప్రాథమిక
సెకండరీ
విజయం
ప్రమాదం
హెచ్చరిక
సమాచారం
కాంతి
చీకటి

గ్రేస్

గ్రే వేరియబుల్స్ యొక్క విస్తారమైన సెట్ మరియు scss/_variables.scssమీ ప్రాజెక్ట్ అంతటా స్థిరమైన గ్రే షేడ్స్ కోసం సాస్ మ్యాప్. ఇవి "కూల్ గ్రేస్" అని గమనించండి, ఇవి న్యూట్రల్ గ్రేస్ కాకుండా సూక్ష్మమైన నీలిరంగు టోన్ వైపు మొగ్గు చూపుతాయి.

100
200
300
400
500
600
700
800
900

లోపల scss/_variables.scss, మీరు బూట్‌స్ట్రాప్ యొక్క రంగు వేరియబుల్స్ మరియు సాస్ మ్యాప్‌లను కనుగొంటారు. $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మా ద్వారా ఒక కాంపోనెంట్ యొక్క వేరియంట్‌లను రూపొందించడానికి మరియు ప్రతి బ్రేక్‌పాయింట్‌కి ప్రతిస్పందించే వేరియంట్‌లను రూపొందించడానికి ఇది ప్రత్యేకంగా సహాయపడుతుంది . మీరు ఈ Sass మ్యాప్‌లను అనుకూలీకరించి, తిరిగి కంపైల్ చేస్తున్నప్పుడు, ఈ లూప్‌లలో మీ మార్పులు స్వయంచాలకంగా ప్రతిబింబించడాన్ని మీరు చూస్తారు.

సవరించేవారు

బూట్‌స్ట్రాప్ యొక్క అనేక భాగాలు బేస్-మాడిఫైయర్ క్లాస్ విధానంతో నిర్మించబడ్డాయి. దీనర్థం స్టైలింగ్‌లో ఎక్కువ భాగం బేస్ క్లాస్‌కు (ఉదా, .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 వేరియబుల్స్

బూట్‌స్ట్రాప్ 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, 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), మీడియా ప్రశ్నలలో వీటికి మద్దతు లేదు, కానీ అవి ఇప్పటికీ మీడియా ప్రశ్నలలో నియమావళిలో ఉపయోగించబడతాయి . ఈ బ్రేక్‌పాయింట్ వేరియబుల్స్ JavaScript ద్వారా ఉపయోగించబడే బ్యాక్‌వర్డ్ కంపాటబిలిటీ కోసం కంపైల్ చేయబడిన CSSలో ఉంటాయి. స్పెక్‌లో మరింత తెలుసుకోండి .

మద్దతు లేని వాటికి ఇక్కడ ఉదాహరణ ఉంది :

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

మరియు మద్దతిచ్చే వాటికి ఇక్కడ ఉదాహరణ :

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