in English

સસ

ચલ, નકશા, મિક્સિન્સ અને ફંક્શન્સનો લાભ લેવા માટે અમારી સ્રોત Sass ફાઇલોનો ઉપયોગ કરો જેથી તમને તમારા પ્રોજેક્ટને વધુ ઝડપથી બનાવવામાં અને કસ્ટમાઇઝ કરવામાં મદદ મળે.

આ પૃષ્ઠ પર

ચલ, નકશા, મિક્સિન્સ અને વધુનો લાભ લેવા માટે અમારી સ્રોત 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

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

// 5. Add additional custom code here

તે સેટઅપ સાથે, તમે તમારા custom.scss. // Optionalતમે જરૂર મુજબ વિભાગ હેઠળ બુટસ્ટ્રેપના ભાગો ઉમેરવાનું પણ શરૂ કરી શકો છો . bootstrap.scssઅમે તમારા પ્રારંભિક બિંદુ તરીકે અમારી ફાઇલમાંથી સંપૂર્ણ આયાત સ્ટેકનો ઉપયોગ કરવાનું સૂચન કરીએ છીએ .

વેરિયેબલ ડિફોલ્ટ

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

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

નીચેના વૈશ્વિક વિકલ્પો સહિત, બુટસ્ટ્રેપમાં કોઈપણ ચલ માટે જરૂરી તરીકે પુનરાવર્તન કરો.

અમારા સ્ટાર્ટર પ્રોજેક્ટ સાથે npm દ્વારા બુટસ્ટ્રેપ સાથે પ્રારંભ કરો! તમારા પોતાના npm પ્રોજેક્ટમાં બુટસ્ટ્રેપને કેવી રીતે બનાવવું અને કસ્ટમા��ઝ કરવું તે જોવા માટે twbs/bootstrap-npm-starter ટેમ્પલેટ રીપોઝીટરી પર જાઓ. Sass કમ્પાઇલર, ઑટોપ્રીફિક્સર, સ્ટાઇલિન્ટ, PurgeCSS અને બુટસ્ટ્રેપ આઇકન્સનો સમાવેશ થાય છે.

નકશા અને લૂપ્સ

બુટસ્ટ્રેપમાં મુઠ્ઠીભર Sass નકશા, કી વેલ્યુ પેરનો સમાવેશ થાય છે જે સંબંધિત CSS ના પરિવારો જનરેટ કરવાનું સરળ બનાવે છે. અમે અમારા રંગો, ગ્રીડ બ્રેકપોઇન્ટ્સ અને વધુ માટે સાસ નકશાનો ઉપયોગ કરીએ છીએ. Sass વેરીએબલ્સની જેમ જ, બધા Sass નકશામાં !defaultધ્વજનો સમાવેશ થાય છે અને તેને ઓવરરાઇડ અને વિસ્તૃત કરી શકાય છે.

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

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

નકશામાંના તમામ ચલોને $theme-colorsએકલ ચલો તરીકે વ્યાખ્યાયિત કરવામાં આવ્યા છે. અમારા નકશામાં હાલના રંગને સંશોધિત કરવા માટે $theme-colors, તમારી કસ્ટમ Sass ફાઇલમાં નીચેના ઉમેરો:

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

પછીથી, આ ચલો બુટસ્ટ્રેપના $theme-colorsનકશામાં સેટ થાય છે:

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

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

$theme-colorsતમારા વૈવિધ્યપૂર્ણ મૂલ્યો સાથે નવો સાસ નકશો બનાવીને અને તેને મૂળ નકશા સાથે મર્જ કરીને, અથવા અન્ય કોઈપણ નકશામાં નવા રંગો ઉમેરો . આ કિસ્સામાં, અમે એક નવો $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. ધ્યાન રાખો કે તમારે તેને અમારી જરૂરિયાતો અને વિકલ્પો વચ્ચે દાખલ કરવું પડશે:

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

જરૂરી કીઓ

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

ઉદાહરણ તરીકે, અમે લિંક્સ, બટન્સ અને ફોર્મ સ્ટેટ્સ માટે primary, success, અને dangerકીનો ઉપયોગ કરીએ છીએ. $theme-colorsઆ કીઓના મૂલ્યોને બદલવાથી કોઈ સમસ્યા ન હોવી જોઈએ, પરંતુ તેમને દૂર કરવાથી Sass સંકલન સમસ્યાઓ થઈ શકે છે. આ કિસ્સાઓમાં, તમારે સાસ કોડને સંશોધિત કરવાની જરૂર પડશે જે તે મૂલ્યોનો ઉપયોગ કરે છે.

કાર્યો

રંગો

અમારી પાસેના સાસ નકશાની બાજુમાં , થીમ રંગોનો ઉપયોગ એકલ ચલો તરીકે પણ થઈ શકે છે, જેમ કે $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 2.0 સુલભતા ધોરણોને પહોંચી વળવા માટે , લેખકોએ બહુ ઓછા અપવાદો સાથે ઓછામાં ઓછો 4.5:1 નો કોન્ટ્રાસ્ટ રેશિયો પ્રદાન કરવો આવશ્યક છે.

અમે બુટસ્ટ્રેપમાં એક વધારાનું કાર્ય શામેલ કરીએ છીએ તે રંગ કોન્ટ્રાસ્ટ ફંક્શન છે color-contrast. તે સ્પષ્ટ બેઝ કલર પર આધારિત પ્રકાશ ( ), શ્યામ ( ) અથવા કાળો ( ) કોન્ટ્રાસ્ટ રંગ આપમેળે પરત કરવા માટે કલરસ્પેસમાં સંબંધિત લ્યુમિનેન્સ પર આધારિત કોન્ટ્રાસ્ટ થ્રેશોલ્ડની ગણતરી કરવા માટે WCAG 2.0 અલ્ગોરિધમનો ઉપયોગ કરે છે . આ ફંક્શન ખાસ કરીને મિક્સિન્સ અથવા લૂપ્સ માટે ઉપયોગી છે જ્યાં તમે બહુવિધ વર્ગો જનરેટ કરી રહ્યાં છો.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`
}

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