థీమ్ బూట్స్ట్రాప్
సులభమైన థీమ్ మరియు కాంపోనెంట్ మార్పుల కోసం గ్లోబల్ స్టైల్ ప్రాధాన్యతల కోసం మా కొత్త అంతర్నిర్మిత సాస్ వేరియబుల్స్‌తో బూట్స్ట్రాప్ 4ని అనుకూలీకరించండి.
distబూట్స్ట్రాప్ 3లో, తక్కువ, కస్టమ్ CSS మరియు మేము మా ఫైల్‌లలో చేర్చిన ప్రత్యేక థీమ్ స్టైల్‌షీట్‌లో వేరియబుల్ ఓవర్‌రైడ్‌ల ద్వారా థీమింగ్ ఎక్కువగా నడపబడుతుంది . కొంత ప్రయత్నంతో, కోర్ ఫైల్‌లను తాకకుండానే బూట్స్ట్రాప్ 3 రూపాన్ని పూర్తిగా రీడిజైన్ చేయవచ్చు. బూట్స్ట్రాప్ 4 సుపరిచితమైన, కానీ కొద్దిగా భిన్నమైన విధానాన్ని అందిస్తుంది.
ఇప్పుడు, థీమింగ్ సాస్ వేరియబుల్స్, సాస్ మ్యాప్స్ మరియు కస్టమ్ CSS ద్వారా సాధించబడుతుంది. అంకితమైన థీమ్ స్టైల్‌షీట్ లేదు; బదులుగా, మీరు గ్రేడియంట్లు, నీడలు మరియు మరిన్నింటిని జోడించడానికి అంతర్నిర్మిత థీమ్‌ను ప్రారంభించవచ్చు.
వేరియబుల్స్, మ్యాప్‌లు, మిక్సిన్‌లు మరియు మరిన్నింటి ప్రయోజనాన్ని పొందడానికి మా సోర్స్ 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
@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ఫ్లాగ్‌ను తీసివేయండి. వేరియబుల్ ఇప్పటికే కేటాయించబడి ఉంటే, అది బూట్‌స్ట్రాప్‌లోని డిఫాల్ట్ విలువల ద్వారా తిరిగి కేటాయించబడదు.
అదే 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:
$theme-colors: map-remove($theme-colors, "success", "info", "danger");బూట్స్ట్రాప్ సాస్ మ్యాప్‌లలో కొన్ని నిర్దిష్ట కీల ఉనికిని ఊహిస్తుంది, వీటిని మనం ఉపయోగించాము మరియు విస్తరించాము. మీరు చేర్చబడిన మ్యాప్‌లను అనుకూలీకరించినప్పుడు, నిర్దిష్ట 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అవసరమైన విధంగా తిరిగి కంపైల్ చేయండి.
_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-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 |
ప్రింటింగ్‌ని ఆప్టిమైజ్ చేయడానికి స్టైల్‌లను ప్రారంభిస్తుంది. |
బూట్స్ట్రాప్ యొక్క అనేక భాగాలు మరియు యుటిలిటీలు సాస్ మ్యాప్‌లో నిర్వచించబడిన రంగుల శ్రేణి ద్వారా నిర్మించబడ్డాయి. నియమాల శ్రేణిని త్వరగా రూపొందించడానికి ఈ మ్యాప్‌ను సాస్‌లో లూప్ చేయవచ్చు.
బూట్స్ట్రాప్ 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మీ ప్రాజెక్ట్ అంతటా స్థిరమైన గ్రే షేడ్స్ కోసం సాస్ మ్యాప్.
లోపల _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, మీ మార్పులు ఆ మ్యాప్‌లో మళ్ళించే అన్ని లూప్‌లకు వర్తిస్తాయి.
బూట్స్ట్రాప్ 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);
}మీరు మీ మీడియా ప్రశ్నలలో మా బ్రేక్ పాయింట్ వేరియబుల్స్‌ను కూడా ఉపయోగించవచ్చు:
.content-secondary {
display: none;
}
@media (min-width(var(--breakpoint-sm))) {
.content-secondary {
display: block;
}
}