Sass

Ka faa'iidayso ishayada faylasha Sass si aad uga faa'iidaysato doorsoomayaasha, khariidado, isku darka, iyo hawlaha si ay kaaga caawiyaan inaad si dhakhso leh u dhisto oo aad u habayso mashruucaaga.

Boggaan

Ka faa'iidayso ishayada faylasha Sass si aad uga faa'iidaysato doorsoomayaasha, khariidado, isku darka, iyo in ka badan.

Qaab dhismeedka faylka

Mar kasta oo ay suurtagal tahay, iska ilaali inaad wax ka beddesho Bootstrap's faylasha xudunta u ah. Dhanka Sass, taasi waxay la macno tahay abuurista xaashida qaabkaaga oo soo dejisa Bootstrap si aad wax uga beddesho oo aad u kordhiso. Haddii aad u malaynayso inaad isticmaalayso maareeyaha xirmada sida npm, waxaad yeelan doontaa qaab dhismeedka faylka oo sidan u eg:

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

Haddii aad soo dejisay faylalkayaga isha oo aanad isticmaalayn maareeyaha xirmada, waxaad u baahan doontaa inaad gacanta ku abuurto wax la mid ah qaab-dhismeedkaas, adigoo ka ilaalinaya faylalka isha Bootstrap oo ka duwan kuwaaga.

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

Soo dejinta

Gudahaaga custom.scss, waxaad ku soo dejisan doontaa isha Bootstrap ee faylasha Sass. Waxaad haysataa laba ikhtiyaar: ku dar dhammaan Bootstrap, ama dooro qaybaha aad u baahan tahay. Waxaan dhiirigelineynaa kuwa dambe, inkastoo la soco inay jiraan shuruudo iyo ku-tiirsanaanta qaybahayada. Waxa kale oo aad u baahan doontaa inaad ku darto qaar ka mid ah JavaScript ee pluginsyadayada.

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

Iyada oo habayntaas meesha taal, waxaad bilaabi kartaa inaad wax ka beddesho doorsoomayaasha Sass iyo maabka kaaga custom.scss. Waxa kale oo aad bilaabi kartaa in aad ku darto qaybo ka mid ah Bootstrap // Optionalqaybta hoos timaada hadba sida loogu baahdo. Waxaan kugula talineynaa inaad isticmaasho xirmada soo dejinta ee buuxa ee galkayaga si ay uga bootstrap.scssnoqoto bartaada.

Dedaal la'aan kala duwan

Doorsoome kasta oo Sass ah oo ku jira Bootstrap waxaa ku jira !defaultcalanka kuu oggolaanaya inaad ka gudubto doorsoomaha qiimahiisa caadiga ah ee Sass-kaaga adiga oo aan wax ka beddelin koodhka isha Bootstrap. Nuqul oo dheji doorsoomayaasha hadba sida loo baahdo, wax ka beddel qiyamkooda, oo ka saar !defaultcalanka. Haddii doorsoome hore loo qoondeeyay, markaa dib looma meelayn doono qiyamka caadiga ah ee Bootstrap.

Waxaad ka heli doontaa liiska dhamaystiran ee doorsoomayaasha Bootstrap scss/_variables.scss. Doorsoomayaasha qaar ayaa loo dejiyay null, doorsoomayaashani ma soo saaraan hantida ilaa ay ku xad gudbaan qaabayntaada.

Ka-hortagga isbeddelka ah waa inay yimaadaan ka dib marka la soo dejiyo hawlahayaga, laakiin ka hor inta kale ee soo dejinta.

Waa kan tusaale beddela kan iyo background-colormarka la soo dejinayo oo la ururinayo Bootstrap iyada oo la adeegsanayo npm: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

Ku celi hadba sida lagama maarmaanka u ah doorsoome kasta oo ku jira Bootstrap, oo ay ku jiraan xulashooyinka caalamiga ah ee hoose.

Ku bilow Bootstrap adigoo isticmaalaya npm mashruuceena bilawga ah! Madaxa twbs/bootstrap-npm-starter template repository si aad u aragto sida loo dhiso oo loo habeeyo Bootstrap mashruucaaga npm. Waxaa ku jira isku-duwaha Sass, Autoprefixer, Stylelint, PurgeCSS, iyo Astaamaha Bootstrap.

Khariidado iyo wareegyo

Bootstrap waxaa ka mid ah sacab muggeed oo khariidado Sass ah, lamaane qiimaha muhiimka ah oo fududeeya soo saarista qoysaska CSS ee la xidhiidha. Waxaan u isticmaalnaa khariidadaha Sass midabadayada, meelaha jajaban ee xariiqda, iyo in ka badan. Sida doorsoomayaasha Sass, dhammaan khariidadaha Sass waxaa ku jira !defaultcalanka waana la dhaafi karaa oo la dheerayn karaa.

Qaar ka mid ah khariidadahayada Sass waxay ku milmeen kuwo madhan si caadi ah. Tan waxa loo sameeyaa si loogu oggolaado balaadhinta fudud ee khariidadda Sass ee la bixiyay, laakiin waxay ku timaadaa kharashka samaynta ka saarista walxaha khariidadda waxyar ka sii adag.

Wax ka beddel khariidada

Dhammaan doorsoomayaasha $theme-colorskhariidada waxa lagu qeexaa doorsoomayaal taagan. Si aad wax uga bedesho midabka jira ee $theme-colorskhariidaddayada, ku dar kuwan soo socda faylkaaga Sass ee caadiga ah:

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

Ka dib, doorsoomayaashan ayaa lagu dejiyay $theme-colorskhariidada Bootstrap:

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

Kudar khariidada

Ku dar midabyo cusub $theme-colors, ama khariidad kasta, adiga oo abuuraya khariidad Sass cusub oo leh qiyamkaaga gaarka ah oo ku milmay khariidaddii asalka ahayd. Xaaladdan oo kale, waxaanu samayn doonaa $custom-colorskhariidad cusub waxaanan ku milmi doonaa $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Ka saar khariidada

Si aad midabada uga saarto $theme-colors, ama khariidad kasta, isticmaal map-remove. La soco waa inaad gelisaa $theme-colorsshuruudahayada dhexdooda ka dib qeexitaankeeda gudaha variablesiyo ka hor isticmaalka 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

Furayaasha loo baahan yahay

Bootstrap waxay u malaynaysaa joogitaanka qaar ka mid ah furayaasha gaarka ah ee ku jira khariidadaha Sass sidaan u isticmaalnay oo aan u kordhinay nafteena. Markaad habaynayso khariidadaha ku jira, waxaa laga yaabaa inaad la kulanto khaladaad halka furaha khariidadda Sass gaar ah la isticmaalayo.

Tusaale ahaan, waxaan u isticmaalnaa furayaasha primary, success, iyo dangerfurayaasha laga soo bilaabo $theme-colorsxiriirinta, badhamada, iyo qaabka foomka. Beddelka qiyamka furayaashan waa in aanay soo bandhigin wax arrimo ah, laakiin ka saaristooda waxa ay sababi kartaa arrimo la xidhiidha ururinta Sass. Xaaladahan, waxaad u baahan doontaa inaad wax ka bedesho koodka Sass ee isticmaalaya qiyamkaas.

Hawlaha

Midabada

Ku xiga khariidadaha Sass ee aan hayno, midabada mawduuca sidoo kale waxaa loo isticmaali karaa doorsoomayaal gooni ah, sida $primary.

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

Waxaad ku iftiimin kartaa ama ku madoobayn kartaa midabada Bootstrap-yada tint-color()iyo shade-color()shaqooyinka. Hawlahani waxay isku dari doonaan midabada madow ama caddaanka ah, si ka duwan Sass 'dhalashada lighten()iyo darken()shaqooyinka kuwaas oo bedeli doona iftiinka qadar go'an, taas oo inta badan aan u horseedin saameynta la rabo.

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

Ficil ahaan, waxaad wici lahayd shaqada oo aad ku gudbi lahayd cabbirka midabka iyo miisaanka.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Kala duwanaanshaha midabka

Si loo daboolo Shuruudaha isbarbardhigga ee Tilmaamaha Helitaanka Mawduuca Shabakadda (WCAG) , qorayaashu waa inay bixiyaan farqiga ugu yar ee midabka qoraalka ah ee 4.5: 1 iyo midabka ugu yar ee aan qoraalka ahayn ee 3: 1 , iyada oo laga reebo wax aad u yar.

Si taas looga caawiyo, waxaan ku darnay color-contrastshaqada Bootstrap. Waxay isticmaashaa algorithm-ka saamiga WCAG ee isbarbardhigga si ay u xisaabiso marinnada isbarbardhigga ee ku saleysan iftiinka qaraabada ee meel sRGBmidabka si ay si toos ah ugu soo celiso iftiinka ( #fff), mugdi ( #212529) ama madow ( #000) midab ka duwan oo ku saleysan midabka salka la cayimay. Shaqadani waxay si gaar ah faa'iido u leedahay isku-dhafka ama wareegyada halkaasoo aad ka soo saarayso fasallo badan.

Tusaale ahaan, si aan khariidadeena uga soo saarno $theme-colorssawiro midab leh:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Waxa kale oo loo isticmaali karaa baahiyaha isbarbardhiga hal mar:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Waxa kale oo aad qeexi kartaa midabka salka leh hawlahayaga khariidada midabka:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Ka baxso SVG

Waxaan u isticmaalnaa escape-svgshaqada si aan uga baxsadno <, >iyo #jilayaasha sawirada asalka ah ee SVG. Marka la isticmaalayo escape-svgshaqada, xogta URIs waa in la soo xigtay.

Ku dar oo kala jar hawlaha

Waxaan isticmaalnaa addiyo subtracthawlaha si aan ugu duubno calcshaqada CSS. Ujeedada ugu muhiimsan ee hawlahan waa in laga fogaado khaladaadka marka 0qiimaha "mid la'aanta" loo gudbiyo calctibaaxaha. Odhaahyada sida calc(10px - 0)waxay ku soo celin doonaan khaladka dhammaan daalacashada, inkastoo ay xisaab ahaan sax yihiin.

Tusaale halka calcku ansax yahay:

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

Tusaale halka calcku aanu shaqaynayn:

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

Isku qas

Hagahayagu scss/mixins/waxa uu leeyahay tiro badan oo isku-dhafan oo awood u leh qaybaha Bootstrap oo sidoo kale loo isticmaali karo dhammaan mashruucaaga.

Nidaamyada midabka

Farsamooyin gaaban oo isku dhafan oo loogu talagalay prefers-color-schemeweydiinta warbaahinta ayaa diyaar u ah taageerada light, dark, iyo nidaamyada midabka gaarka ah.

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