సాస్

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

ఈ పేజీలో

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

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

సాధ్యమైనప్పుడల్లా, బూట్‌స్ట్రాప్ యొక్క ప్రధాన ఫైల్‌లను సవరించడాన్ని నివారించండి. 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

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

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@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";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

ఆ సెటప్‌తో, మీరు మీలోని సాస్ వేరియబుల్స్ మరియు మ్యాప్‌లలో దేనినైనా సవరించడం ప్రారంభించవచ్చు custom.scss. // Optionalమీరు అవసరమైన విధంగా విభాగం కింద బూట్‌స్ట్రాప్ భాగాలను జోడించడం కూడా ప్రారంభించవచ్చు . మా ఫైల్ నుండి పూర్తి దిగుమతి స్టాక్‌ను bootstrap.scssమీ ప్రారంభ బిందువుగా ఉపయోగించమని మేము సూచిస్తున్నాము.

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

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

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

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

npm ద్వారా బూట్‌స్ట్రాప్‌ను దిగుమతి చేసేటప్పుడు మరియు కంపైల్ చేసేటప్పుడు background-colorమార్చే ఉదాహరణ ఇక్కడ ఉంది 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/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

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

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

మా స్టార్టర్ ప్రాజెక్ట్‌తో npm ద్వారా బూట్‌స్ట్రాప్‌తో ప్రారంభించండి! మీ స్వంత npm ప్రాజెక్ట్‌లో బూట్‌స్ట్రాప్‌ను ఎలా నిర్మించాలో మరియు అనుకూలీకరించాలో చూడటానికి twbs/bootstrap-npm-starter టెంప్లేట్ రిపోజిటరీకి వెళ్లండి . Sass కంపైలర్, ఆటోప్రెఫిక్సర్, స్టైలింట్, PurgeCSS మరియు బూట్‌స్ట్రాప్ చిహ్నాలను కలిగి ఉంటుంది.

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

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

మా Sass మ్యాప్‌లలో కొన్ని డిఫాల్ట్‌గా ఖాళీగా విలీనం చేయబడ్డాయి. ఇచ్చిన సాస్ మ్యాప్‌ను సులభంగా విస్తరించేందుకు ఇది జరుగుతుంది, అయితే మ్యాప్ నుండి ఐటెమ్‌లను తీసివేయడం కొంచెం కష్టతరం అవుతుంది.

మ్యాప్‌ని సవరించండి

మ్యాప్‌లోని అన్ని వేరియబుల్స్ $theme-colorsస్వతంత్ర వేరియబుల్స్‌గా నిర్వచించబడ్డాయి. మా మ్యాప్‌లో ఇప్పటికే ఉన్న రంగును సవరించడానికి $theme-colors, మీ అనుకూల Sass ఫైల్‌కు క్రింది వాటిని జోడించండి:

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

తరువాత, ఈ వేరియబుల్స్ బూట్‌స్ట్రాప్ $theme-colorsమ్యాప్‌లో సెట్ చేయబడ్డాయి:

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

మ్యాప్‌కు జోడించండి

$theme-colorsమీ అనుకూల విలువలతో కొత్త Sass మ్యాప్‌ని సృష్టించి, అసలు మ్యాప్‌తో విలీనం చేయడం ద్వారా కొత్త రంగులను లేదా ఏదైనా ఇతర మ్యాప్‌కు జోడించండి . ఈ సందర్భంలో, మేము కొత్త $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. మీరు $theme-colorsదాని నిర్వచనం తర్వాత variablesమరియు దాని వినియోగానికి ముందు మా అవసరాల మధ్య తప్పనిసరిగా చొప్పించాలని గుర్తుంచుకోండి maps:

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

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

అవసరమైన కీలు

బూట్‌స్ట్రాప్ సాస్ మ్యాప్‌లలో కొన్ని నిర్దిష్ట కీల ఉనికిని ఊహిస్తుంది, వీటిని మనం ఉపయోగించాము మరియు విస్తరించాము. మీరు చేర్చబడిన మ్యాప్‌లను అనుకూలీకరించినప్పుడు, నిర్దిష్ట Sass మ్యాప్ యొక్క కీని ఉపయోగిస్తున్నప్పుడు మీరు ఎర్రర్‌లను ఎదుర్కోవచ్చు.

ఉదాహరణకు, మేము లింక్‌లు, బటన్‌లు మరియు ఫారమ్ స్టేట్‌ల కోసం primary, success, మరియు dangerకీలను ఉపయోగిస్తాము. $theme-colorsఈ కీల విలువలను భర్తీ చేయడం వలన ఎటువంటి సమస్యలు ఉండకూడదు, కానీ వాటిని తీసివేయడం వలన సాస్ సంకలనం సమస్యలు ఏర్పడవచ్చు. ఈ సందర్భాలలో, మీరు ఆ విలువలను ఉపయోగించుకునే సాస్ కోడ్‌ని సవరించాలి.

విధులు

రంగులు

మన దగ్గర ఉన్న సాస్ మ్యాప్‌ల పక్కన , థీమ్ రంగులను స్వతంత్ర వేరియబుల్స్‌గా కూడా ఉపయోగించవచ్చు $primary.

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

మీరు బూట్‌స్ట్రాప్‌లు tint-color()మరియు 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) కాంట్రాస్ట్ అవసరాలకు అనుగుణంగా , రచయితలు తప్పనిసరిగా 4.5:1 కనిష్ట టెక్స్ట్ కలర్ కాంట్రాస్ట్ మరియు 3:1 కనిష్ట నాన్-టెక్స్ట్ కలర్ కాంట్రాస్ట్‌ను అందించాలి , చాలా తక్కువ మినహాయింపులతో.

దీనికి సహాయం చేయడానికి, మేము color-contrastబూట్‌స్ట్రాప్‌లో ఫంక్షన్‌ని చేర్చాము. ఇది పేర్కొన్న మూల రంగు ఆధారంగా కాంతి ( ), ముదురు ( ) లేదా నలుపు ( ) కాంట్రాస్ట్ రంగును స్వయంచాలకంగా తిరిగి ఇవ్వడానికి రంగు స్థలంలో సంబంధిత ప్రకాశం ఆధారంగా కాంట్రాస్ట్ థ్రెషోల్డ్‌లను లెక్కించడానికి WCAG కాంట్రాస్ట్ రేషియో అల్గారిథమ్‌ను ఉపయోగిస్తుంది. మీరు బహుళ తరగతులను రూపొందించే మిక్సిన్‌లు లేదా లూప్‌లకు ఈ ఫంక్షన్ ప్రత్యేకంగా ఉపయోగపడుతుంది.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

SVG నేపథ్య చిత్రాల కోసం , మరియు అక్షరాలు escape-svgనుండి తప్పించుకోవడానికి మేము ఫంక్షన్‌ని ఉపయోగిస్తాము . ఫంక్షన్‌ని ఉపయోగిస్తున్నప్పుడు , డేటా URIలు తప్పనిసరిగా కోట్ చేయబడాలి.<>#escape-svg

విధులను జోడించండి మరియు తీసివేయండి

మేము CSS ఫంక్షన్‌ను చుట్టడానికి 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);
}

మిక్సిన్స్

మా scss/mixins/డైరెక్టరీలో బూట్‌స్ట్రాప్ భాగాలకు శక్తినిచ్చే టన్ను మిక్సిన్‌లు ఉన్నాయి మరియు మీ స్వంత ప్రాజెక్ట్‌లో కూడా ఉపయోగించవచ్చు.

రంగు పథకాలు

మీడియా ప్రశ్న కోసం సంక్షిప్తలిపి మిక్సిన్ , , మరియు అనుకూల రంగు పథకాలకు prefers-color-schemeమద్దతుతో అందుబాటులో ఉంది .lightdark

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