સસ

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

// 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અમે તમારા પ્રારંભિક બિંદુ તરીકે અમારી ફાઇલમાંથી સંપૂર્ણ આયાત સ્ટેકનો ઉપયોગ કરવાનું સૂચન કરીએ છીએ .

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

બુટસ્ટ્રેપમાં દરેક 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/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 અને બુટસ્ટ્રેપ આઇકન્સનો સમાવેશ થાય છે.

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

બુટસ્ટ્રેપમાં મુઠ્ઠીભર 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. ધ્યાન રાખો કે તમારે $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આ કીઓના મૂલ્યોને બદલવાથી કોઈ સમસ્યા ન હોવી જોઈએ, પરંતુ તેમને દૂર કરવાથી 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) કોન્ટ્રાસ્ટ જરૂરિયાતોને પહોંચી વળવા માટે , લેખકોએ બહુ ઓછા અપવાદો સાથે લઘુત્તમ ટેક્સ્ટ કલર કોન્ટ્રાસ્ટ 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`
}

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