થીમિંગ બુટસ્ટ્રેપ

સરળ થીમિંગ અને ઘટક ફેરફારો માટે વૈશ્વિક શૈલી પસંદગીઓ માટે અમારા નવા બિલ્ટ-ઇન Sass વેરીએબલ્સ સાથે બુટસ્ટ્રેપ 4 ને કસ્ટમાઇઝ કરો.

પરિચય

બુટસ્ટ્રેપ 3 માં, થીમિંગ મોટે ભાગે LESS, કસ્ટમ CSS અને એક અલગ થીમ સ્ટાઈલશીટમાં વેરીએબલ ઓવરરાઈડ્સ દ્વારા સંચાલિત હતું જે અમે અમારી distફાઈલોમાં શામેલ કર્યું છે. કેટલાક પ્રયત્નો સાથે, કોઈ પણ મુખ્ય ફાઇલોને સ્પર્શ કર્યા વિના બુટસ્ટ્રેપ 3 ના દેખાવને સંપૂર્ણપણે ફરીથી ડિઝાઇન કરી શકે છે. બુટસ્ટ્રેપ 4 એક પરિચિત, પરંતુ થોડો અલગ અભિગમ પૂરો પાડે છે.

હવે, થીમિંગ Sass ચલ, Sass નકશા અને કસ્ટમ CSS દ્વારા પરિપૂર્ણ થાય છે. ત્યાં કોઈ વધુ સમર્પિત થીમ સ્ટાઇલશીટ નથી; તેના બદલે, તમે ગ્રેડિએન્ટ્સ, પડછાયાઓ અને વધુ ઉમેરવા માટે બિલ્ટ-ઇન થીમને સક્ષમ કરી શકો છો.

સસ

ચલ, નકશા, મિક્સિન્સ અને વધુનો લાભ લેવા માટે અમારી સ્રોત Sass ફાઇલોનો ઉપયોગ કરો.

ફાઇલ માળખું

જ્યારે પણ શક્ય હોય ત્યારે, બુટસ્ટ્રેપની મુખ્ય ફાઇલોમાં ફેરફાર કરવાનું ટાળો. સાસ માટે, તેનો અર્થ એ છે કે તમારી પોતાની સ્ટાઈલશીટ બનાવવી જે બુટસ્ટ્રેપને આયાત કરે છે જેથી કરીને તમે તેને સંશોધિત અને વિસ્તૃત કરી શકો. ધારી રહ્યા છીએ કે તમે npm જેવા પેકેજ મેનેજરનો ઉપયોગ કરી રહ્યાં છો, તમારી પાસે એક ફાઇલ માળખું હશે જે આના જેવું દેખાય છે:

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

જો તમે અમારી સોર્સ ફાઇલો ડાઉનલોડ કરી છે અને પેકેજ મેનેજરનો ઉપયોગ કરી રહ્યાં નથી, તો તમે બુટસ્ટ્રેપની સ્રોત ફાઇલોને તમારા પોતાનાથી અલગ રાખીને, તે બંધારણ જેવું કંઈક મેન્યુઅલી સેટઅપ કરવા માગો છો.

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

આયાત કરી રહ્યું છે

તમારા custom.scss, તમે બુટસ્ટ્રેપના સ્ત્રોત Sass ફાઇલોને આયાત કરશો. તમારી પાસે બે વિકલ્પો છે: તમામ બુટસ્ટ્રેપનો સમાવેશ કરો અથવા તમને જોઈતા ભાગો પસંદ કરો. અમે બાદમાંને પ્રોત્સાહિત કરીએ છીએ, જોકે ધ્યાન રાખો કે અમારા ઘટકોમાં કેટલીક જરૂરિયાતો અને નિર્ભરતા છે. તમારે અમારા પ્લગિન્સ માટે કેટલીક JavaScript પણ સામેલ કરવાની જરૂર પડશે.

// 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 માં દરેક Sass વેરીએબલમાં !defaultફ્લેગનો સમાવેશ થાય છે જે તમને બુટસ્ટ્રેપના સોર્સ કોડમાં ફેરફાર કર્યા વિના તમારા પોતાના Sass માં વેરીએબલના ડિફોલ્ટ મૂલ્યને ઓવરરાઇડ કરવાની મંજૂરી આપે છે. ચલોને જરૂર મુજબ કોપી અને પેસ્ટ કરો, તેમના મૂલ્યોમાં ફેરફાર કરો અને !defaultધ્વજને દૂર કરો. જો વેરીએબલ પહેલેથી જ અસાઇન કરવામાં આવ્યું હોય, તો તેને બુટસ્ટ્રેપમાં ડિફોલ્ટ મૂલ્યો દ્વારા ફરીથી સોંપવામાં આવશે નહીં.

તમને માં બુટસ્ટ્રેપના ચલોની સંપૂર્ણ યાદી મળશે scss/_variables.scss.

સમાન Sass ફાઇલમાં વેરીએબલ ઓવરરાઇડ ડિફૉલ્ટ વેરિયેબલ પહેલાં અથવા પછી આવી શકે છે. જો કે, જ્યારે સમગ્ર Sass ફાઇલોને ઓવરરાઇડ કરી રહ્યાં હોય, ત્યારે તમે બુટસ્ટ્રેપની 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 માં મુઠ્ઠીભર Sass નકશા, કી વેલ્યુ પેરનો સમાવેશ થાય છે જે સંબંધિત CSS ના પરિવારો બનાવવાનું સરળ બનાવે છે. અમે અમારા રંગો, ગ્રીડ બ્રેકપોઇન્ટ્સ અને વધુ માટે સાસ નકશાનો ઉપયોગ કરીએ છીએ. Sass વેરીએબલ્સની જેમ જ, બધા Sass નકશામાં !defaultધ્વજનો સમાવેશ થાય છે અને તેને ઓવરરાઇડ અને વિસ્તૃત કરી શકાય છે.

અમારા કેટલાક સાસ નકશા મૂળભૂત રીતે ખાલી નકશામાં મર્જ કરવામાં આવ્યા છે. આ આપેલ સાસ નકશાના સરળ વિસ્તરણને મંજૂરી આપવા માટે કરવામાં આવે છે, પરંતુ નકશામાંથી આઇટમ્સને દૂર કરવાનું થોડું વધુ મુશ્કેલ બનાવવાના ખર્ચે આવે છે .

નકશામાં ફેરફાર કરો

અમારા નકશામાં હાલના રંગને સંશોધિત કરવા માટે $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 સંકલન સમસ્યાઓ થઈ શકે છે. આ કિસ્સાઓમાં, તમારે સાસ કોડને સંશોધિત કરવાની જરૂર પડશે જે તે મૂલ્યોનો ઉપયોગ કરે છે.

કાર્યો

બુટસ્��્રેપ ઘણા સાસ ફંક્શનનો ઉપયોગ કરે છે, પરંતુ સામાન્ય થીમિંગ પર માત્ર સબસેટ લાગુ પડે છે. અમે રંગ નકશામાંથી મૂલ્યો મેળવવા માટે ત્રણ કાર્યોનો સમાવેશ કર્યો છે:

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

આ તમને Sass નકશામાંથી એક રંગ પસંદ કરવાની મંજૂરી આપે છે જેમ કે તમે 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);
}

વધારાના Sass નકશા માટે લેવલ ફંક્શન્સ બનાવવા માટે ભવિષ્યમાં વધારાના ફંક્શન અથવા તમારા પોતાના કસ્ટમ Sass ઉમેરી શકાય છે, અથવા જો તમે વધુ વર્બોઝ બનવા માંગતા હોવ તો એક સામાન્ય પણ.

રંગ વિરોધાભાસ

અમે બુટસ્ટ્રેપમાં એક વધારાનું કાર્ય શામેલ કરીએ છીએ તે રંગ કોન્ટ્રાસ્ટ ફંક્શન છે 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`
}

Sass વિકલ્પો

અમારી બિલ્ટ-ઇન કસ્ટમ વેરીએબલ્સ ફાઇલ સાથે બુટસ્ટ્રેપ 4ને કસ્ટમાઇઝ કરો અને નવા $enable-*Sass વેરીએબલ્સ સાથે વૈશ્વિક 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`વિવિધ ઘટકો પર પૂર્વવ્યાખ્યાયિત s ને સક્ષમ કરે છે.
`$enable-hover-media-query`	`true`અથવા `false`(મૂળભૂત)	નાપસંદ
`$enable-grid-classes`	`true`(મૂળભૂત) અથવા`false`	`.container`ગ્રીડ સિસ્ટમ (દા.ત., , `.row`, `.col-md-1`, વગેરે) માટે CSS વર્ગોની જનરેશનને સક્ષમ કરે છે .
`$enable-caret`	`true`(મૂળભૂત) અથવા`false`	પર સ્યુડો એલિમેન્ટ કેરેટને સક્ષમ કરે છે `.dropdown-toggle`.
`$enable-print-styles`	`true`(મૂળભૂત) અથવા`false`	પ્રિન્ટિંગને ઑપ્ટિમાઇઝ કરવા માટે શૈલીઓને સક્ષમ કરે છે.

રંગ

બુટસ્ટ્રેપના ઘણાં વિવિધ ઘટકો અને ઉપયોગિતાઓ સાસ નકશામાં વ્યાખ્યાયિત રંગોની શ્રેણી દ્વારા બનાવવામાં આવી છે. નિયમોની શ્રેણી ઝડપથી જનરેટ કરવા માટે આ નકશાને સાસમાં લૂપ કરી શકાય છે.

બધા રંગો

બુટસ્ટ્રેપ 4 માં ઉપલબ્ધ તમામ રંગો, Sass વેરીએબલ અને scss/_variables.scssફાઇલમાં Sass નકશા તરીકે ઉપલબ્ધ છે. વધારાના શેડ્સ ઉમેરવા માટે અનુગામી નાના પ્રકાશનોમાં આને વિસ્તૃત કરવામાં આવશે, જેમ કે અમે પહેલાથી જ સમાવિષ્ટ ગ્રેસ્કેલ પેલેટની જેમ.

વાદળી

ઈન્ડિગો

જાંબલી

ગુલાબી

લાલ

નારંગી

પીળો

લીલા

ટીલ

સ્યાન

તમે તમારા સાસમાં આનો ઉપયોગ કેવી રીતે કરી શકો તે અહીં છે:

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

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

રંગ ઉપયોગિતા વર્ગોcolor સેટિંગ અને માટે પણ ઉપલબ્ધ છે background-color.

ભવિષ્યમાં, અમે નીચે ગ્રેસ્કેલ રંગો સાથે કર્યું છે તેમ દરેક રંગના શેડ્સ માટે સાસ નકશા અને ચલ પ્રદાન કરવાનું લક્ષ્ય રાખીશું.

થીમ રંગો

અમે રંગ યોજનાઓ જનરેટ કરવા માટે નાની કલર પેલેટ બનાવવા માટે તમામ રંગોના સબસેટનો ઉપયોગ કરીએ છીએ, જે બૂટસ્ટ્રેપ્સની scss/_variables.scssફાઇલમાં સાસ વેરિયેબલ્સ અને સાસ મેપ તરીકે પણ ઉપલબ્ધ છે.

પ્રાથમિક

ગૌણ

સફળતા

જોખમ

ચેતવણી

માહિતી

પ્રકાશ

શ્યામ

ગ્રે

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;

અન્ય ઘણા ઘટકોમાં તેનો ઉપયોગ કેવી રીતે થાય છે તે અપડેટ કરવા માટે નકશામાં મૂલ્યો ઉમેરો, દૂર કરો અથવા સંશોધિત કરો. કમનસીબે આ સમયે, દરેક ઘટક આ Sass નકશાનો ઉપયોગ કરતું નથી. ભાવિ અપડેટ્સ આમાં સુધારો કરવાનો પ્રયત્ન કરશે. ${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 ચલો સાસના ચલો માટે સમાન સુગમતા પ્રદાન કરે છે, પરંતુ બ્રાઉઝરને સેવા આપતા પહેલા સંકલનની જરૂર વગર. ઉદાહરણ તરીકે, અહીં અમે અમારા પેજના ફોન્ટ અને લિંક સ્ટાઈલને CSS વેરીએબલ સાથે રીસેટ કરી રહ્યાં છીએ.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

બ્રેકપોઇન્ટ ચલો

જ્યારે અમે મૂળરૂપે અમારા CSS વેરીએબલ્સમાં બ્રેકપોઇન્ટ્સનો સમાવેશ કર્યો છે (દા.ત., --breakpoint-md), આ મીડિયા ક્વેરીઝમાં સપોર્ટેડ નથી , પરંતુ તેનો ઉપયોગ મીડિયા ક્વેરીઝમાં હજુ પણ નિયમોમાં થઈ શકે છે. આ બ્રેકપોઇન્ટ વેરીએબલ્સ બેકવર્ડ સુસંગતતા માટે કમ્પાઇલ CSSમાં રહે છે કારણ કે તેનો JavaScript દ્વારા ઉપયોગ કરી શકાય છે. સ્પેકમાં વધુ જાણો.

અહીં શું સમર્થિત નથી તેનું ઉદાહરણ છે:

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

અને અહીં શું સમર્થન છે તેનું ઉદાહરણ છે:

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