Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
in English

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 in-downloadmo dagiti taudan a filemi ken saanmo nga agus-usar iti manager ti pakete, kayatmo a manual nga i-setup ti maysa a banag a kapada dayta nga estruktura, a pagtalinaeden dagiti taudan a file 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";
@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

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/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.

Rugian ti Bootstrap babaen ti npm babaen ti starter project mi! Agturong iti pagidulinan ti plantilia ti twbs/bootstrap-npm-starter tapno makita no kasano ti mangbangon ken mangpasayaat ti Bootstrap iti bukodmo a proyekto ti npm. Iramanna ti Sass a kompiler, Autoprefixer, Stylelint, PurgeCSS, ken dagiti Ikono ti Bootstrap.

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 dayta iti nagbaetan dagiti kasapulan ken pagpilianmi:

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

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 nga ipasayaatmo dagiti 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 makasangpet kadagiti pagalagadan ti pannakagun-od ti WCAG 2.0 para iti panagdumaduma ti kolor , dagiti mannurat ket masapul a mangipaayda ti ratio ti panagdumaduma iti saan a basbassit ngem 4.5:1 , nga adda dagiti manmano unay a pannakailaksid.

Ti kanayonan a function nga iramanmi iti Bootstrap ket ti color contrast function, color-contrast. Daytoy ket agus-usar ti WCAG 2.0 nga algoritmo para iti panagkarkulo kadagiti pagrukodan ti panagdumaduma a naibatay iti relatibo a kinaraniag iti maysa nga espasio ti sRGBkolor tapno automatiko nga agsubli ti maysa a 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
  }
}