Jya ku bintu nyamukuru Jya kuri docs
Check
in English

Sass

Koresha isoko yacu Sass dosiye kugirango ukoreshe impinduka, amakarita, ivanga, nibikorwa kugirango bigufashe kubaka byihuse no gutunganya umushinga wawe.

Kuriyi page

Koresha inkomoko yacu Sass dosiye kugirango ukoreshe impinduka, ikarita, ivanga, nibindi byinshi.

Imiterere ya dosiye

Igihe cyose bishoboka, irinde guhindura dosiye yibanze ya Bootstrap. Kuri Sass, bivuze gukora urupapuro rwawe bwite rutumiza Bootstrap kugirango ubashe guhindura no kuyagura. Dufate ko ukoresha paketi umuyobozi nka npm, uzagira imiterere ya dosiye isa nkiyi:

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

Niba warakuyeho amadosiye yinkomoko kandi ukaba udakoresha pake yubuyobozi, uzakenera gukora intoki gukora ikintu gisa nkiyo miterere, ukagumana dosiye yinkomoko ya Bootstrap itandukanye niyanyu.

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

Kuzana ibicuruzwa

Muriwe custom.scss, uzatumiza inkomoko ya Bootstrap ya Sass dosiye. Ufite amahitamo abiri: shyiramo Bootstrap yose, cyangwa hitamo ibice ukeneye. Turashishikariza aba nyuma, nubwo mumenye ko hari ibyo dusabwa hamwe nubwishingizi mubice byacu. Uzakenera kandi gushyiramo JavaScript ya plugins zacu.

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

Hamwe nuburyo bwashyizweho, urashobora gutangira guhindura icyaricyo cyose cya Sass hamwe namakarita yawe custom.scss. Urashobora kandi gutangira kongeramo ibice bya Bootstrap munsi yicyiciro // Optionalnkuko bikenewe. Turasaba gukoresha ibicuruzwa byuzuye biva muri bootstrap.scssdosiye yacu aho utangirira.

Impinduka zisanzwe

Buri Sass ihindagurika muri Bootstrap ikubiyemo !defaultibendera ryemerera kurenga agaciro gasanzwe kahinduwe muri Sass yawe bwite udahinduye code ya Bootstrap. Gukoporora no gukata impinduka nkuko bikenewe, uhindure indangagaciro, kandi ukureho !defaultibendera. Niba impinduka zimaze gutangwa, ntabwo izongera kugenwa nagaciro gasanzwe muri Bootstrap.

Uzasangamo urutonde rwuzuye rwa Bootstrap ihinduka muri scss/_variables.scss. Impinduka zimwe zashyizweho null, izi mpinduka ntizisohora umutungo keretse iyo zirengeje urugero muburyo bwawe.

Impinduka zinyuranye zigomba kuza nyuma yimikorere yacu yatumijwe hanze, ariko mbere yandi yatumijwe hanze.

Dore urugero ruhindura i background-colorna colorkuri <body>iyo mugihe cyo gutumiza no gukusanya Bootstrap ukoresheje npm:

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

Subiramo nkibikenewe kubihinduka byose muri Bootstrap, harimo amahitamo yisi yose hepfo.

Tangira na Bootstrap ukoresheje npm hamwe numushinga utangira! Kujya kuri twbs / bootstrap-npm-itangira inyandikorugero yububiko kugirango urebe uko wubaka no gutunganya Bootstrap mumushinga wawe bwite wa npm. Harimo icyegeranyo cya Sass, Autoprefixer, Stylelint, PurgeCSS, na Bootstrap Udushushondanga.

Ikarita

Bootstrap ikubiyemo amakarita ya Sass, amakarita yingenzi yingirakamaro yorohereza kubyara imiryango ya CSS ifitanye isano. Dukoresha amakarita ya Sass kumabara yacu, grid yacitse, nibindi byinshi. Nka Sass ihinduka, amakarita yose ya Sass arimo !defaultibendera kandi arashobora kurengerwa no kwagurwa.

Amwe mu makarita yacu ya Sass yahujwe nubusa kubusa. Ibi bikorwa kugirango yemere kwaguka byoroshye ikarita ya Sass yatanzwe, ariko iza ku kiguzi cyo gukora ibintu ku ikarita bigoye cyane.

Hindura ikarita

Ibihinduka byose ku $theme-colorsikarita bisobanurwa nkibihinduka byihariye. Guhindura ibara risanzwe kurikarita yacu $theme-colors, ongeraho ibikurikira muri dosiye yawe ya Sass:

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

Nyuma, izi mpinduka zashyizwe ku $theme-colorsikarita ya Bootstrap:

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

Ongera ku ikarita

Ongeraho amabara mashya kuri $theme-colors, cyangwa indi karita iyariyo yose, mugukora ikarita nshya ya Sass hamwe nagaciro kawe gakondo hanyuma ukayihuza nikarita yumwimerere. Muri iki kibazo, tuzakora $custom-colorsikarita nshya kandi tuyihuze $theme-colors.

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

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

Kura ku ikarita

Kuraho amabara $theme-colors, cyangwa indi karita iyo ari yo yose, koresha map-remove. Menya neza ko ugomba gushyiramo $theme-colorsibyo dusabwa nyuma yubusobanuro bwayo variablesna mbere yo gukoreshwa muri 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

Urufunguzo rusabwa

Bootstrap ifata ko hari urufunguzo rwihariye mu ikarita ya Sass nkuko twakoresheje kandi twagura ubwacu. Mugihe uhinduye amakarita arimo, urashobora guhura namakosa aho urufunguzo rwikarita ya Sass rukoreshwa.

Kurugero, dukoresha i primary,, successna dangerurufunguzo kuva kumurongo $theme-colors, buto, no gushiraho leta. Gusimbuza indangagaciro zurufunguzo ntibigomba kwerekana ibibazo, ariko kubikuraho bishobora gutera ibibazo byo gukusanya Sass. Muri ibi bihe, uzakenera guhindura code ya Sass ikoresha izo ndangagaciro.

Imikorere

Amabara

Kuruhande rw'amakarita ya Sass dufite, amabara yibitekerezo arashobora no gukoreshwa nkibihinduka bihagaze, nka $primary.

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

Urashobora koroshya cyangwa kwijimisha amabara hamwe na Bootstrap tint-color()nibikorwa shade-color(). Iyi mikorere izavanga amabara numukara cyangwa umweru, bitandukanye lighten()na Sass kavukire darken()nimirimo izahindura urumuri kumafaranga yagenwe, akenshi ntabwo biganisha ku ngaruka zifuzwa.

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

Mu myitozo, wahamagara imikorere hanyuma ukanyura mubara n'ibipimo by'uburemere.

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

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

Itandukaniro ryamabara

Kugirango wuzuze ibisobanuro byurubuga rwibanze (WCAG) ibisabwa bitandukanye, abanditsi bagomba gutanga byibuze ibara ryibara ryerekana itandukaniro rya 4.5: 1 naho byibuze ibara ritari umwandiko ritandukanye na 3: 1 , usibye bake cyane.

Gufasha hamwe nibi, twashyizemo color-contrastimikorere muri Bootstrap. Ikoresha igereranya rya WCAG igereranya algorithm yo kubara ibipimo bitandukanijwe bishingiye kumurika ugereranije mumwanya sRGBwamabara kugirango uhite usubiza urumuri ( #fff), umwijima ( #212529) cyangwa umukara ( #000) ibara ritandukanye rishingiye kumabara yibanze. Iyi mikorere ni ingirakamaro cyane cyane kuvanga cyangwa kuzenguruka aho urimo kubyara ibyiciro byinshi.

Kurugero, kubyara amabara yaturutse ku $theme-colorsikarita yacu:

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

Irashobora kandi gukoreshwa muburyo bumwe butandukanye:

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

Urashobora kandi kwerekana ibara shingiro hamwe nibikorwa byikarita yamabara:

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

Hunga SVG

Dukoresha escape-svgimikorere kugirango duhunge i <, >ninyuguti #kuri SVG amashusho yinyuma. Iyo ukoresheje escape-svgimikorere, amakuru URIs agomba gusubirwamo.

Ongeraho no Gukuramo imirimo

Dukoresha i addn'imikorere subtractyo gupfunyika calcimikorere ya CSS. Intego yibanze yiyi mikorere nukwirinda amakosa mugihe agaciro "kitagira ubumwe" kanyujijwe 0mumvugo calc. Imvugo nka calc(10px - 0)izasubiza ikosa muri mushakisha zose, nubwo ari imibare.

Urugero aho kubara bifite ishingiro:

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

Urugero aho kubara bitemewe:

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

Imvange

Ububiko bwacu scss/mixins/bufite toni yimvange ibice bya Bootstrap kandi birashobora no gukoreshwa mumushinga wawe bwite.

Ibara

Amagambo magufi avanze kubibazo prefers-color-schemebyitangazamakuru arahari hamwe ninkunga ya light, darkhamwe na progaramu yamabara yihariye.

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