Sass

Diriša difaele tša rena tša mohlodi tša Sass go diriša diphetogo, dimmapa, di-mixin, le mešomo go go thuša go aga ka lebelo le go tlwaetša porojeke ya gago.

Letlakaleng le

Diriša difaele tša rena tša mohlodi tša Sass go diriša diphetogo, mebapa, mixins, le tše dingwe.

Sebopego sa faele

Nako le nako ge go kgonega, phema go fetoša difaele tša motheo tša Bootstrap. Go Sass, seo se ra gore o hlama letlakala la gago la setaele leo le tsenyago Bootstrap ka ntle gore o kgone go le fetoša le go le katološa. Ge re tšea gore o šomiša molaodi wa sephuthelwana go swana le npm, o tla ba le sebopego sa faele seo se swanago le se:

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

Ge e ba o taoneloute difaele tša rena tša mothopo gomme o sa šomiše molaodi wa sephuthelwana, o tla nyaka go hlama ka seatla selo se sengwe se se swanago le sebopego seo, o boloka difaele tša mothopo tša Bootstrap di arogile go tša gago.

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

Go tsenya ka ntle

Ka go ya gago custom.scss, o tla import Bootstrap ya mohlodi Sass difaele. O na le dikgetho tše pedi: akaretša ka moka ga Bootstrap, goba o kgethe dikarolo tšeo o di hlokago. Re hlohleletša tša mafelelo, le ge e le gore ela hloko gore go na le dinyakwa tše dingwe le go ithekga go ralala le dikarolo tša rena. Gape o tla swanelwa ke go akaretša JavaScript e itšego bakeng sa di-plugin tša rena.

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

Ka peakanyo yeo e le gona, o ka thoma go fetoša efe goba efe ya diphetogo tša Sass le dimmapa ka go custom.scss. O ka thoma gape go oketša dikarolo tša Bootstrap ka fase ga // Optionalkarolo ge go nyakega. Re šišinya go šomiša mokgobo wa go tsenya ka botlalo go tšwa go bootstrap.scssfaele ya rena bjalo ka ntlha ya gago ya mathomo.

Di-default tše di fetogago

Phetogo ye nngwe le ye nngwe ya Sass ka go Bootstrap e akaretša !defaultfolaga yeo e go dumelelago go tloša boleng bja go se fetoge bja phetogo ka go Sass ya gago ntle le go fetoša khoutu ya mohlodi ya Bootstrap. Kopiša le go kgomaretša diphetogo ka moo go nyakegago, fetoša boleng bja tšona, gomme o tloše !defaultfolaga. Ge e le gore phetogo e šetše e abetšwe, gona e ka se abelwe gape ke dikelo tša go se fetoge ka go Bootstrap.

O tla hwetša lenaneo le le feletšego la diphetogo tša Bootstrap go scss/_variables.scss. Diphetogo tše dingwe di beakantšwe go null, diphetogo tše ga di ntšha thepa ntle le ge di tlošitšwe ka go peakanyo ya gago.

Diphetogo tša go tlošwa di swanetše go tla ka morago ga ge mešomo ya rena e tsentšwe ka ntle, eupša pele ga ditšweletšwa tše dingwe ka moka tša ka ntle.

Mona ke mohlala wo o fetošago background-colorle colorbakeng sa <body>ge o tsenya ka ntle le go kgoboketša Bootstrap ka 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

Boeletša ka moo go nyakegago bakeng sa phetogo efe goba efe go Bootstrap, go akaretša le dikgetho tša lefase ka bophara ka mo tlase.

Thoma ka Bootstrap ka npm ka projeke ya rena ya go thoma! Hlogo ya polokelo ya thempleite ya twbs/bootstrap-npm-starter go bona ka moo o ka aga le go tlwaetša Bootstrap mo protšekeng ya gago ya npm. E akaretša mokgoboketši wa Sass, Sehlongwa sa go itiriša, Stylelint, PurgeCSS, le Diaekhone tša Bootstrap.

Dimmapa le diloupu

Bootstrap e akaretša dimmapa tše mmalwa tša Sass, dipara tša boleng bja senotlelo tšeo di dirago gore go be bonolo go tšweletša malapa a CSS ye e amanago. Re šomiša dimmapa tša Sass bakeng sa mebala ya rena, mafelo a go kgaotša keriti, le tše dingwe. Go swana le diphetogo tša Sass, dimmapa ka moka tša Sass di akaretša !defaultfolaga gomme di ka tlošwa le go katološwa.

Tše dingwe tša dimmapa tša rena tša Sass di kopantšwe go ba tše di se nago selo ka go ikemela. Se se dirwa go dumelela katološo ye bonolo ya mmapa wa Sass wo o filwego, eupša se tla ka ditshenyagalelo tša go dira gore go tloša dilo mmapeng go be thata go se nene.

Fetoša mmapa

Diphetogo ka moka mo $theme-colorsmmapeng di hlalošwa bjalo ka diphetogo tše di ikemetšego. Go fetoša mmala wo o lego gona $theme-colorsmmapeng wa rena, oketša tše di latelago go faele ya gago ya tlwaelo ya Sass:

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

Ka morago, diphetogo tše di bewa ka $theme-colorsmmapeng wa Bootstrap:

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

Oketša go mmapa

Oketša mebala ye mefsa go $theme-colors, goba mmapa ofe goba ofe wo mongwe, ka go hlama mmapa wo mofsa wa Sass ka dikelo tša gago tša tlwaelo le go o kopanya le mmapa wa mathomo. Tabeng ye, re tla hlama $custom-colorsmmapa wo mofsa gomme ra o kopanya le $theme-colors.

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

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

Tlosa go tšwa mmapeng

Go tloša mebala go tšwa go $theme-colors, goba mmapa ofe goba ofe o mongwe, diriša map-remove. Hlokomela o swanetše go tsenya $theme-colorsmagareng ga dinyakwa tša rena feela ka morago ga tlhalošo ya yona ka gare variablesle pele ga tšhomišo ya yona ka 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

Dinotlelo tše di nyakegago

Bootstrap e tšea go ba gona ga dinotlelo tše dingwe tše di itšego ka gare ga dimmapa tša Sass ge re dutše re diriša le go katološa tše ka borena. Ge o dutše o tlwaetša dimmapa tše di akareditšwego, o ka kopana le diphošo moo senotlelo se itšego sa mmapa wa Sass se dirišwago gona.

Go fa mohlala, re šomiša primary, success, le dangerdinotlelo go tšwa $theme-colorsgo dikgokagano, dikonope, le maemo a foromo. Go tšeela legato dikelo tša dinotlelo tše ga se gwa swanela go tšweletša ditaba, eupša go di tloša go ka hlola ditaba tša kgoboketšo ya Sass. Maemong a, o tla swanelwa ke go fetoša khoutu ya Sass yeo e dirišago dikelo tšeo.

Mešomo

Mebala

Go bapa le dimmapa tša Sass tšeo re nago le tšona, mebala ya sehlogo e ka šomišwa gape bjalo ka diphetogo tše di ikemetšego, go swana le $primary.

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

O ka bofefofatša goba wa fifatša mebala ka Bootstrap's tint-color()le shade-color()mešomo. Mešomo ye e tla kopanya mebala le boso goba bošweu, go fapana le Sass’ setlogo lighten()le darken()mešomo yeo e tlago fetoša go ba bofefo ka palo ye e sa fetogego, yeo gantši e sa lebišego go phello ye e nyakegago.

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

Ka go diragatša, o be o tla bitša mošomo gomme wa feta ka gare ga ditekanyetšo tša mmala le boima.

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

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

Phapano ya mebala

Gore go kgonege go fihlelela dinyakwa tša phapano ya Ditlhahlo tša Phihlelelo ya Diteng tša Wepesaete (WCAG) , bangwadi ba swanetše go fa phapano ya mmala wa sengwalwa wa fasefase wa 4.5:1 le phapano ya mmala wa fasefase wo e sego wa sengwalwa wa 3:1 , ka mekgekolo ye mmalwa kudu.

Go thuša ka se, re ile ra akaretša color-contrastmošomo ka go Bootstrap. E diriša algorithm ya tekanyo ya phapano ya WCAG bakeng sa go bala meelo ya phapano yeo e theilwego godimo ga go phadima mo go lekanyeditšwego sebakeng sa sRGBmmala go bušetša ka go iketla mmala wa phapano wa seetša ( #fff), lefsifsi ( #212529) goba o motsothwa ( #000) wo o theilwego godimo ga mmala wa motheo wo o laeditšwego. Mošomo wo o na le mohola kudu go di-mixin goba diloupu moo o tšweletšago diklase tše dintši.

Ka mohlala, go tšweletša di-swatch tša mebala go tšwa $theme-colorsmmapeng wa rena:

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

E ka dirišwa gape bakeng sa dinyakwa tša go fapana tša gatee:

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

O ka laetša gape mmala wa motheo ka mešomo ya rena ya mmapa wa mebala:

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

Pholoha SVG

Re šomiša escape-svgmošomo go tšhaba <, >le #ditlhaka tša diswantšho tša morago tša SVG. Ge o šomiša escape-svgmošomo, di-URI tša datha di swanetše go tsopolwa.

Mešomo ya Oketša le go Ntšha

Re šomiša mešomo ya addle subtractgo phuthela mošomo wa CSS calc. Morero o mogolo wa mešomo ye ke go efoga diphošo ge boleng bjo bo “se nago yuniti” 0bo fetišetšwa ka gare ga calcpolelo. Dipolelo tša go swana le calc(10px - 0)di tla bušetša phošo go diphensele ka moka, go sa šetšwe gore di nepagetše ka dipalo.

Mohlala moo calc e šomago:

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

Mohlala moo calc e sa šomego:

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

Ditswaki

Tlhahlo ya rena scss/mixins/e na le tone ya mixins yeo e fago maatla dikarolo tša Bootstrap gomme e ka šomišwa gape go ralala le projeke ya gago.

Dikema tša mebala

Motswako wa mongwalokopana wa prefers-color-schemepotšišo ya boraditaba e hwetšagala ka thekgo ya light, dark, le dikema tša mebala ya tlwaelo.

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