Sass nga
Usaren dagiti taudan a Sass a papelesmi tapno gundawayan dagiti variable, mapa, mixin, ken dagiti panagandar tapno matulongannaka a mangbangon iti naparpartak ken mangpasayaat iti proyektom.
Usaren dagiti taudan a Sass a file-tayo tapno magundawayan dagiti variable, mapa, mixin, ken dadduma pay.
Estruktura ti file
No mabalin, liklikan ti panangbalbaliw kadagiti kangrunaan a file ti Bootstrap. Para iti Sass, kayatna a sawen ti panagpartuat ti bukodmo nga stylesheet a mangi-import ti Bootstrap tapno mabalinmo a baliwan ken palawaen daytoy. No ipapanmo nga agus-usar ka ti manager ti pakete a kas ti npm, maaddaanka ti estruktura ti papeles a kastoy ti langana:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
No nai-downloadmo dagiti taudan a papelesmi ken saanmo nga agus-usar ti manager ti pakete, kayatmo ti manual a mangpartuat ti maysa a banag a kapada dayta nga estruktura, a pagtalinaeden dagiti taudan a papeles ti Bootstrap a naisina manipud iti bukodmo.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Panag-import
Iti custom.scss, i-importmo dagiti taudan a Sass a file ti Bootstrap. Adda dua a pagpiliam: iraman amin ti Bootstrap, wenno piliem dagiti paset a kasapulam. Paregtaenmi ti naud-udi, nupay ammom nga adda sumagmamano a kasapulan ken panagpannuray iti ballasiw dagiti pasetmi. Masapul met nga iramanmo ti sumagmamano a JavaScript para kadagiti plugin-mi.
// 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
Iti dayta a panagisaad iti lugar, mabalinmo a rugian a baliwan ti ania man kadagiti variable ken mapa ti Sass iti custom.scss. Mabalinmo pay a rugian ti manginayon kadagiti paset ti Bootstrap iti baba ti // Optionalbenneg no kasapulan. Isingasingmi ti panagusar ti naan-anay nga import stack manipud iti bootstrap.scssfilemi a kas ti pangrugian a puntom.
Dagiti default ti variable
Tunggal Sass a variable iti Bootstrap ket mangiraman ti !defaultbandera a mangipalubos kenka a mangbalbaliw ti default a pateg ti variable iti bukodmo a Sass a saan a mangbalbaliw ti taudan a kodigo ti Bootstrap. Kopiaen ken i-paste dagiti variable no kasapulan, baliwan dagiti pategda, ken ikkaten ti !defaultbandera. No ti maysa a variable ket naitudingen, kalpasanna daytoy ket saan a maituding manen babaen dagiti kasisigud a pateg iti Bootstrap.
Masarakanmo ti kompleto a listaan dagiti variable ti Bootstrap iti scss/_variables.scss. Sumagmamano a variable ket naikeddeng iti null, dagitoy a variable ket dida iruar ti tagikua malaksid no dagitoy ket nabaliwan iti panagisaadmo.
Dagiti variable override ket masapul nga umay kalpasan ti pannakai-import dagiti function tayo, ngem sakbay dagiti nabati nga import.
Adda ditoy ti pagarigan a mangbalbaliw ti background-colorken colorpara iti <body>no ag-import ken ag-compile ti Bootstrap babaen ti 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
Uliten no kasapulan para iti ania man a variable iti Bootstrap, a mairaman dagiti sangalubongan a pagpilian iti baba.
Mapa ken loop
Ti Bootstrap ket mangiraman ti sumagmamano a mapa ti Sass, dagiti tulbek a paris ti pateg a mangpalaka ti panagpataud kadagiti pamilia dagiti mainaig a CSS. Usarenmi dagiti mapa ti Sass para kadagiti kolormi, dagiti grid breakpoint, ken dadduma pay. Kas met laeng kadagiti variable ti Sass, amin a mapa ti Sass ket mangiraman ti !defaultbandera ken mabalin a maibabawi ken mapalawa.
Dadduma kadagiti mapatayo ti Sass ket naikaykaysa kadagiti awan kargana babaen ti default. Daytoy ket naaramid tapno mangipalubos ti nalaka a panagpalawa ti naited a mapa ti Sass, ngem umay iti gastos ti panagaramid ti panangikkat kadagiti banag manipud iti mapa a narigrigat bassit.
Baliwan ti mapa
Amin a variable iti $theme-colorsmapa ket naikeddeng a kas dagiti agmaymaysa a variable. Tapno mabaliwan ti addan a kolor iti $theme-colorsmapami, inayon dagiti sumaganad iti kostumbre a Sass file-mo:
$primary: #0074d9;
$danger: #ff4136;
Idi agangay, dagitoy a variable ket naikeddeng iti $theme-colorsmapa ti Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Inayon iti mapa
Manginayon kadagiti baro a kolor iti $theme-colors, wenno ania man a sabali a mapa, babaen ti panagpartuat ti baro a mapa ti Sass nga addaan kadagiti kostumbre a pategmo ken panagtipon daytoy iti orihinal a mapa. Iti daytoy a kaso, mangaramidtayo ti baro a $custom-colorsmapa ken pagtitiponentayo daytoy iti $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Ikkaten iti mapa
Tapno maikkat dagiti kolor manipud iti $theme-colors, wenno aniaman a sabali a mapa, usaren ti map-remove. Ammuem a masapul nga ikabilmo $theme-colorsiti nagbaetan dagiti kasapulanmi kalpasan laeng ti depinasionna iti variablesken sakbay ti pannakausar daytoy iti 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
Masapul dagiti tulbek
Ti Bootstrap ket mangipapan ti kaadda dagiti sumagmamano nga espesipiko a tulbek iti uneg dagiti mapa ti Sass bayat nga inus-usarmi ken palawaenmi dagitoy a mismo. Bayat ti panangipasayaatmo kadagiti nairaman a mapa, mabalin a makasabetka kadagiti biddut no sadino a maus-usar ti espesipiko a tulbek ti mapa ti Sass.
Kas pagarigan, usarenmi ti primary, success, ken dagiti dangertulbek manipud $theme-colorspara kadagiti silpo, buton, ken estado ti porma. Ti panangsukat kadagiti pateg dagitoy a tulbek ket rumbeng a mangiparang kadagiti awan nga isyu, ngem ti panangikkat kadagitoy ket mabalin a mangpataud kadagiti isyu ti panagtipon ti Sass. Kadagitoy a pagarigan, kasapulam a baliwan ti kodigo ti Sass nga agus-usar kadagita a pateg.
Dagiti Aramid
Dagiti kolor
Iti abay dagiti mapa ti Sass nga adda kadatayo, dagiti kolor ti tema ket mabalin pay nga usaren a kas dagiti agmaymaysa a variable, a kas ti $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Mabalinmo a palag-an wenno palidem dagiti kolor babaen kadagiti Bootstrap’s tint-color()ken shade-color()functions. Dagitoy a panagandar ket manglaok kadagiti kolor iti nangisit wenno puraw, saan a kas ti katutubo ti Sass lighten()ken darken()dagiti panagandar a mangbalbaliw ti kinalag-an babaen ti naikeddeng a kaadu, a masansan a saan a mangiturong iti tarigagayan nga epekto.
// 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));
}
Iti praktis, awagam koma ti function ken ipasa dagiti parametro ti kolor ken timbang.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Panagduma ti kolor
Tapno matungpal dagiti kasapulan ti panagdumaduma ti Pagalagadan ti Panaggun-od ti Linaon ti Web (WCAG) , dagiti mannurat ket masapul a mangipaayda ti kabassitan a panagdumaduma ti kolor ti teksto iti 4.5:1 ken ti kabassitan a panagdumaduma ti kolor ti saan a teksto iti 3:1 , nga adda dagiti manmano unay a pannakailaksid.
Tapno makatulong iti daytoy, inramanmi ti color-contrastfunction iti Bootstrap. Daytoy ket agus-usar ti algoritmo ti WCAG a panagdumaduma a ratio para iti panagkarkulo kadagiti pagrukodan ti panagdumaduma a naibatay iti relatibo a kinaraniag iti maysa sRGBnga espasio ti kolor tapno automatiko nga agsubli ti lawag ( #fff), nasipnget ( #212529) wenno nangisit ( #000) a panagdumaduma a kolor a naibatay iti naikeddeng a batayan a kolor. Daytoy a panagandar ket nangruna a makatulong para kadagiti mixin wenno dagiti loop a sadiay ket mangpatpataudka kadagiti adu a klase.
Kas pagarigan, tapno makapataud kadagiti swatch ti kolor manipud iti $theme-colorsmapatayo:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Mabalin pay nga usaren daytoy para kadagiti maminsan laeng a kasapulan ti panagdumaduma:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Mabalinmo pay nga ikeddeng ti batayan a kolor babaen dagiti panagandar ti mapa ti kolormi:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Liklikan ti SVG
Usarenmi ti escape-svgfunction tapno makalisi ti <, >ken dagiti #karakter para kadagiti ladawan ti likudan ti SVG. No agus-usar ti escape-svgpanagandar, dagiti URI ti datos ket masapul a maadaw.
Dagiti function ti Add ken Subtract
Usarenmi ti addand subtractfunctions tapno mabalkot ti CSS calcfunction. Ti kangrunaan a panggep dagitoy a panagandar ket tapno maliklikan dagiti biddut no ti maysa nga “awan yunit” 0a pateg ket maipasa iti maysa nga calcebkas. Dagiti ebkas a kas calc(10px - 0)ket mangisubli ti biddut kadagiti amin a browser, iti laksid ti matematiko nga umiso.
Pagarigan no sadino a balido ti calc:
$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);
}
Pagarigan a sadiay ti calc ket saan nga umiso:
$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);
}
Dagiti Mixin
Ti scss/mixins/direktoriomi ket addaan iti tonelada a mixins a mangpabileg kadagiti paset ti Bootstrap ken mabalin met nga usaren iti ballasiw ti bukodmo a proyekto.
Dagiti eskema ti kolor
Ti maysa nga ababa a mixin para iti prefers-color-schemepanagsaludsod ti media ket magun-od nga addaan iti suporta para kadagiti light, dark, ken dagiti kostumbre nga eskema ti kolor.
@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
}
}