Sass nga bwe kiri
Kozesa fayiro zaffe eza Sass ez’ensibuko okweyambisa enkyukakyuka, maapu, mixins, n’emirimu okukuyamba okuzimba amangu n’okulongoosa pulojekiti yo.
Kozesa fayiro zaffe eza Sass ez'ensibuko okweyambisa enkyukakyuka, maapu, mixins, n'ebirala.
Ensengeka ya fayiro
Buli lwe kiba kisoboka, weewale okukyusa fayiro za Bootstrap enkulu. Ku Sass, ekyo kitegeeza okukola stylesheet yo eyingiza Bootstrap osobole okugikyusa n’okugigaziya. Nga tufudde nti okozesa package manager nga npm, ojja kuba n'ensengeka ya fayiro eringa eno:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Bw’oba owanula fayiro zaffe ez’ensibuko era nga tokozesa muddukanya package, ojja kwagala okuteekawo mu ngalo ekintu ekifaananako n’ensengeka eyo, okukuuma fayiro z’ensibuko za Bootstrap nga zaawukana ku zo.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Okuyingiza ebintu mu ggwanga
Mu custom.scss
, ojja kuyingiza fayiro za Bootstrap ez'ensibuko Sass. Olina engeri bbiri: ssaamu byonna ebya Bootstrap, oba londa ebitundu by’olina. Tukubiriza eky’oluvannyuma, wadde nga kimanye nti waliwo ebyetaago ebimu n’okwesigamira mu bitundu byaffe byonna. Era ojja kwetaaga okussaamu JavaScript ezimu ku plugins zaffe.
// 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
Nga ensengeka eyo eri mu kifo, osobola okutandika okukyusa ekintu kyonna ku nkyukakyuka za Sass ne maapu mu custom.scss
. Osobola n’okutandika okwongera ebitundu bya Bootstrap wansi // Optional
w’ekitundu nga bwe kyetaagisa. Tukuwa amagezi okukozesa omutambi gw'okuyingiza mu bujjuvu okuva mu bootstrap.scss
fayiro yaffe ng'entandikwa yo.
Enkyukakyuka ezisookerwako
Buli nkyukakyuka ya Sass mu Bootstrap erimu !default
bendera ekusobozesa okusazaamu omuwendo gw'enkyukakyuka ogusookerwako mu Sass yo nga tokyusizza nsibuko ya Bootstrap. Koppa era oteeke enkyukakyuka nga bwe kyetaagisa, kyusa emiwendo gyazo, era oggyewo !default
bendera. Singa enkyukakyuka eba yaweebwa dda, olwo tejja kuddamu kuweebwa miwendo egy'enjawulo mu Bootstrap.
Ojja kusanga olukalala lw'enkyukakyuka za Bootstrap mu bujjuvu mu scss/_variables.scss
. Enkyukakyuka ezimu ziteekebwa ku null
, enkyukakyuka zino tezifulumya kintu okuggyako nga zisuuliddwa mu nsengeka yo.
Variable overrides zirina okujja oluvannyuma lw'emirimu gyaffe okuyingizibwa, naye nga tebannaba kuyingiza bisigadde.
Wano waliwo ekyokulabirako ekikyusa background-color
ne color
for the <body>
nga oyingiza n'okukung'aanya Bootstrap okuyita mu 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
Ddamu nga bwe kyetaagisa ku nkyukakyuka yonna mu Bootstrap, nga mw'otwalidde n'enkola z'ensi yonna wansi.
Maapu ne loopu
Bootstrap erimu maapu za Sass ntono, ebisumuluzo ebibiri ebiyamba okukola amaka ga CSS ekwatagana. Tukozesa maapu za Sass ku langi zaffe, ebifo ebikutukamu giridi, n’ebirala. Nga enkyukakyuka za Sass, maapu zonna eza Sass zirimu !default
bendera era zisobola okukyusibwa n’okugaziwa.
Ezimu ku maapu zaffe eza Sass zigattibwa ne zifuuka empty by default. Kino kikolebwa okusobozesa okugaziya okwangu okwa maapu ya Sass eweereddwa, naye kijja ku muwendo gw’okufuula okuggya ebintu ku maapu okukaluba katono.
Okukyusa mu maapu
Enkyukakyuka zonna mu $theme-colors
maapu zitegeezebwa nga enkyukakyuka eziyimiridde zokka. Okukyusa langi eriwo mu $theme-colors
maapu yaffe, yongera bino wammanga ku fayiro yo eya Sass eya bulijjo:
$primary: #0074d9;
$danger: #ff4136;
Oluvannyuma, enkyukakyuka zino ziteekebwa mu $theme-colors
maapu ya Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Okwongera ku maapu
Yongera langi empya ku $theme-colors
, oba maapu endala yonna, ng’okola maapu empya eya Sass n’emiwendo gyo egy’enjawulo n’ogigatta ne maapu eyasooka. Mu mbeera eno, tujja kukola $custom-colors
maapu empya tugigatta ne $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Ggyawo ku maapu
Okuggya langi ku $theme-colors
, oba ku maapu endala yonna, kozesa map-remove
. Kimanye nti olina okugiyingiza wakati w'ebyetaago byaffe n'eby'okulonda:
// 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
Ebisumuluzo ebyetaagisa
Bootstrap etwala okubeerawo kw’ebisumuluzo ebimu ebitongole munda mu maapu za Sass nga bwe twakozesa era ne tugaziya bino ffekka. Nga bw’olongoosa maapu ezirimu, oyinza okusanga ensobi ekisumuluzo kya maapu ya Sass ekigere we kikozesebwa.
Okugeza, tukozesa primary
, success
, danger
n’ebisumuluzo okuva $theme-colors
ku ku biyungo, obutambi, n’embeera za ffoomu. Okukyusa emiwendo gy'ebisumuluzo bino tekirina kuleeta nsonga yonna, naye okubiggyawo kiyinza okuleeta ensonga z'okukung'aanya kwa Sass. Mu mbeera zino, ojja kwetaaga okukyusa mu koodi ya Sass ekozesa emiwendo egyo.
Emirimu
Langi za langi
Okumpi ne maapu za Sass ze tulina, langi z’omulamwa nazo zisobola okukozesebwa nga enkyukakyuka eziyimiriddewo, nga $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Osobola okutangaaza oba okuziba langi nga okozesa Bootstrap's tint-color()
ne shade-color()
functions. Emirimu gino gijja kutabula langi n’enjeru oba enjeru, obutafaananako native ya Sass lighten()
n’emirimu darken()
egijja okukyusa obutangaavu n’omuwendo ogugere, ekitera obutaleeta effect eyagala.
// 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 nkola, wandiyise omulimu n’oyisa mu langi n’obuzito parameters.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Okwawukana kwa langi
Okusobola okutuukiriza omutindo gwa WCAG 2.0 ogw’okutuuka ku langi ez’enjawulo , abawandiisi balina okuwa omugerageranyo gw’enjawulo waakiri 4.5:1 , okuggyako abatono ennyo.
Omulimu ogw’enjawulo gwe tussa mu Bootstrap gwe mulimu gw’okulaga enjawulo mu langi, color-contrast
. Ekozesa enkola ya WCAG 2.0 okubala ebipimo by’enjawulo nga byesigamiziddwa ku kitangaala ekikwatagana mu kifo kya sRGB
langi okusobola okuzzaawo mu ngeri ey’otoma langi y’enjawulo eyaka ( #fff
), enzirugavu ( #212529
) oba enzirugavu ( #000
) okusinziira ku langi y’omusingi eragiddwa. Omulimu guno gwa mugaso nnyo naddala ku mixins oba loops nga okola classes eziwera.
Okugeza, okukola ebifaananyi bya langi okuva ku $theme-colors
maapu yaffe:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Era esobola okukozesebwa ku byetaago by’enjawulo eby’omulundi gumu:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Osobola n'okulaga langi ey'omusingi n'emirimu gyaffe egya maapu ya langi:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Okutoloka ku SVG
Tukozesa escape-svg
omulimu okutoloka <
, >
n'ennukuta #
z'ebifaananyi eby'emabega ebya SVG. Nga okozesa escape-svg
omulimu, data URIs zirina okujulizibwa.
Emirimu gy’okugatta n’okuggyako
Tukozesa emirimu gya add
ne subtract
okuzinga omulimu gwa CSS calc
. Ekigendererwa ekikulu eky’emirimu gino kwe kwewala ensobi ng’omuwendo “ogutaliiko yuniti” 0
guyisibwa mu calc
kigambo. Ebigambo nga calc(10px - 0)
bijja kuzzaayo ensobi mu bulawuzi zonna, wadde nga bituufu mu kubala.
Okugeza awali calc entuufu:
$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);
}
Eky’okulabirako nga calc si ntuufu:
$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);
}
Ebirungo ebitabuddwa
Dayirekita yaffe scss/mixins/
erina ttani ya mixins eziwa amaanyi ebitundu bya Bootstrap era nga nazo zisobola okukozesebwa mu pulojekiti yo yonna.
Ensengeka za langi
A shorthand mixin for the prefers-color-scheme
media query eriwo n'obuwagizi bwa light
, dark
, n'ensengeka za langi ez'enjawulo.
@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
}
}