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.
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 beakanya 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";
@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
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 // Optional
karolo ge go nyakega. Re šišinya go šomiša mokgobo wa go tsenya ka botlalo go tšwa go bootstrap.scss
faele 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 !default
folaga 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 !default
folaga. 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-color
le color
bakeng 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/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.
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 !default
folaga 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-colors
mmapeng di hlalošwa bjalo ka diphetogo tše di ikemetšego. Go fetoša mmala wo o lego gona $theme-colors
mmapeng 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-colors
mmapeng 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-colors
mmapa 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 gore o swanetše go e tsenya magareng ga dinyakwa tša rena le dikgetho:
// 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
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 danger
dinotlelo go tšwa $theme-colors
go 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 maemo a phihlelelo a WCAG 2.0 bakeng sa phapano ya mebala , bangwadi ba swanetše go nea tekanyo ya phapano ya bonyenyane 4.5:1 , ka mekgekolo e sego kae kudu.
Mošomo wa tlaleletšo wo re o akaretšago go Bootstrap ke mošomo wa phapano ya mebala, color-contrast
. E diriša WCAG 2.0 algorithm bakeng sa go bala meelo ya phapano yeo e theilwego godimo ga go phadima mo go lekanyeditšwego ka sebakeng sa sRGB
mmala 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-colors
mmapeng 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-svg
mošomo go tšhaba <
, >
le #
ditlhaka tša diswantšho tša morago tša SVG. Ge o šomiša escape-svg
moš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 add
le subtract
go 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” 0
bo fetišetšwa ka gare ga calc
polelo. 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-scheme
potš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
}
}