Sass

Uża l-fajls Sass tas-sors tagħna biex tieħu vantaġġ minn varjabbli, mapep, mixins, u funzjonijiet biex jgħinuk tibni aktar malajr u tippersonalizza l-proġett tiegħek.

Fuq din il-paġna

Uża l-fajls Sass tas-sors tagħna biex tieħu vantaġġ minn varjabbli, mapep, mixins, u aktar.

Struttura tal-fajl

Kull meta jkun possibbli, evita li timmodifika l-fajls ewlenin tal-Bootstrap. Għal Sass, dan ifisser li toħloq stylesheet tiegħek stess li timporta Bootstrap sabiex tkun tista' timmodifikaha u testendiha. Jekk wieħed jassumi li qed tuża maniġer tal-pakketti bħal npm, ser ikollok struttura tal-fajls li tidher bħal din:

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

Jekk niżżilt il-fajls tas-sors tagħna u m'intix qed tuża maniġer tal-pakketti, tkun trid toħloq manwalment xi ħaġa simili għal dik l-istruttura, u żżomm il-fajls tas-sors ta' Bootstrap separati minn tiegħek.

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

L-importazzjoni

Fil- custom.scss, int ser timporta l-fajls Sass sors ta' Bootstrap. Għandek żewġ għażliet: inkludi Bootstrap kollu, jew agħżel il-partijiet li għandek bżonn. Inħeġġu lil dawn tal-aħħar, għalkemm kun konxju li hemm xi rekwiżiti u dipendenzi madwar il-komponenti tagħna. Ikollok bżonn ukoll tinkludi xi JavaScript għall-plugins tagħna.

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

B'dik is-setup fis-seħħ, tista 'tibda timmodifika kwalunkwe waħda mill-varjabbli u l-mapep Sass fil- custom.scss. Tista 'wkoll tibda żżid partijiet ta' Bootstrap taħt it- // Optionaltaqsima kif meħtieġ. Nissuġġerixxu li tuża l-munzell sħiħ ta 'importazzjoni mill- bootstrap.scssfajl tagħna bħala l-punt tat-tluq tiegħek.

Inadempjenzi varjabbli

Kull varjabbli Sass f'Bootstrap tinkludi l- !defaultbandiera li tippermettilek tegħleb il-valur default tal-varjabbli fis-Sass tiegħek stess mingħajr ma timmodifika l-kodiċi tas-sors tal-Bootstrap. Ikkopja u waħħal il-varjabbli kif meħtieġ, immodifika l-valuri tagħhom, u neħħi l- !defaultbandiera. Jekk varjabbli tkun diġà ġiet assenjata, allura ma tkunx assenjata mill-ġdid mill-valuri awtomatiċi f'Bootstrap.

Issib il-lista kompleta tal-varjabbli ta' Bootstrap f' scss/_variables.scss. Xi varjabbli huma ssettjati għal null, dawn il-varjabbli ma joħorġux il-proprjetà sakemm ma jiġux sostitwiti fil-konfigurazzjoni tiegħek.

L-overrides varjabbli għandhom jiġu wara li l-funzjonijiet tagħna jiġu importati, iżda qabel il-bqija tal-importazzjonijiet.

Hawn eżempju li jibdel l- background-coloru colorgħall- <body>meta jimporta u jikkompila Bootstrap permezz ta' 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

Irrepeti kif meħtieġ għal kwalunkwe varjabbli f'Bootstrap, inklużi l-għażliet globali hawn taħt.

Ibda b'Bootstrap permezz ta' npm mal-proġett tal-bidu tagħna! Ras għar- repożitorju tal- mudelli twbs/bootstrap-npm-starter biex tara kif tibni u tippersonalizza Bootstrap fil-proġett npm tiegħek stess. Jinkludi kompilatur Sass, Autoprefixer, Stylelint, PurgeCSS, u Ikoni Bootstrap.

Mapep u loops

Bootstrap jinkludi numru żgħir ta 'mapep Sass, pari ta' valur ewlenin li jagħmluha aktar faċli biex tiġġenera familji ta 'CSS relatati. Aħna nużaw il-mapep Sass għall-kuluri tagħna, il-punti ta 'waqfien tal-grilja, u aktar. Eżatt bħall-varjabbli Sass, il-mapep kollha Sass jinkludu l- !defaultbandiera u jistgħu jiġu sostitwiti u estiżi.

Uħud mill-mapep Sass tagħna huma magħquda f'dawk vojta awtomatikament. Dan isir biex jippermetti espansjoni faċli ta 'mappa Sass partikolari, iżda jiġi għall-ispiża li tagħmel it- tneħħija ta ' oġġetti minn mappa kemmxejn aktar diffiċli.

Ibdel il-mappa

Il-varjabbli kollha fil- $theme-colorsmappa huma definiti bħala varjabbli waħedhom. Biex timmodifika kulur eżistenti fil- $theme-colorsmappa tagħna, żid dan li ġej mal-fajl Sass tad-dwana tiegħek:

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

Aktar tard, dawn il-varjabbli huma stabbiliti fil- $theme-colorsmappa ta 'Bootstrap:

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

Żid mal-mappa

Żid kuluri ġodda ma' $theme-colors, jew kwalunkwe mappa oħra, billi toħloq mappa Sass ġdida bil-valuri tad-dwana tiegħek u għaqqadha mal-mappa oriġinali. F'dan il-każ, aħna noħolqu $custom-colorsmappa ġdida u ngħaqqduha ma' $theme-colors.

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

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

Neħħi mill-mappa

Biex tneħħi kuluri minn $theme-colors, jew minn kwalunkwe mappa oħra, uża map-remove. Kun konxju li trid daħħal $theme-colorsbejn ir-rekwiżiti tagħna eżatt wara d-definizzjoni tagħha fi variablesu qabel l-użu tagħha fi 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

Ċwievet meħtieġa

Bootstrap jassumi l-preżenza ta 'xi ċwievet speċifiċi fi ħdan il-mapep Sass kif użajna u testendi dawn aħna stess. Hekk kif tippersonalizza l-mapep inklużi, tista’ tiltaqa’ ma’ żbalji fejn tkun qed tintuża ċavetta speċifika ta’ mappa Sass.

Pereżempju, nużaw iċ- ċwievet primary, success, u minn għal links, buttuni u stati tal-formola. Is-sostituzzjoni tal-valuri ta 'dawn iċ-ċwievet m'għandha tippreżenta l-ebda problemi, iżda t-tneħħija tagħhom tista' tikkawża problemi ta 'kumpilazzjoni ta' Sass. F'dawn il-każijiet, ikollok bżonn timmodifika l-kodiċi Sass li jagħmel użu minn dawk il-valuri.danger$theme-colors

Funzjonijiet

Kuluri

Ħdejn il- mapep Sass li għandna, il-kuluri tat-temi jistgħu jintużaw ukoll bħala varjabbli waħedhom, bħal $primary.

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

Tista 'tħaffef jew tiskura l-kuluri bil-Bootstrap's tint-color()u l- shade-color()funzjonijiet. Dawn il-funzjonijiet se jħalltu kuluri bl-iswed jew abjad, b'differenza Sass nattiv lighten()u darken()funzjonijiet li se jibdlu l-ħeffa b'ammont fiss, li ħafna drabi ma jwassalx għall-effett mixtieq.

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

Fil-prattika, inti ssejjaħ il-funzjoni u tgħaddi l-parametri tal-kulur u l-piż.

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

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

Kuntrast tal-kulur

Sabiex jissodisfaw ir- rekwiżiti tal-kuntrast tal- Linji Gwida għall-Aċċessibilità tal-Kontenut tal-Web (WCAG) , l-awturi għandhom jipprovdu kuntrast minimu tal-kulur tat-test ta’ 4.5:1 u kuntrast minimu tal-kulur mhux tat-test ta’ 3:1 , bi ftit eċċezzjonijiet.

Biex ngħinu f'dan, aħna inkludew il- color-contrastfunzjoni f'Bootstrap. Juża l- algoritmu tal-proporzjon tal-kuntrast WCAG għall-kalkolu tal-limiti tal-kuntrast ibbażati fuq luminanza relattiva fi sRGBspazju tal-kulur biex awtomatikament jirritorna kulur ta 'kuntrast ċar ( #fff), skur ( #212529) jew iswed ( #000) ibbażat fuq il-kulur bażi speċifikat. Din il-funzjoni hija speċjalment utli għal mixins jew loops fejn qed tiġġenera klassijiet multipli.

Pereżempju, biex tiġġenera kampjuni tal-kulur mill- $theme-colorsmappa tagħna:

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

Jista' jintuża wkoll għal bżonnijiet ta' kuntrast ta' darba:

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

Tista' wkoll tispeċifika kulur bażi bil-funzjonijiet tagħna tal-mappa tal-kulur:

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

Ħarab SVG

Aħna nużaw il- escape-svgfunzjoni biex naħarbu l- <, >u l- #karattri għal stampi fl-isfond SVG. Meta tuża l- escape-svgfunzjoni, l-URIs tad-dejta għandhom jiġu kkwotati.

Żid u Naqqas il-funzjonijiet

Aħna nużaw il- funzjonijiet addu subtractbiex nagħlaq il-funzjoni CSS calc. L-għan primarju ta 'dawn il-funzjonijiet huwa li jiġu evitati żbalji meta 0valur "mingħajr unità" jiġi mgħoddi calcf'espressjoni. Espressjonijiet bħal calc(10px - 0)dawn jirritornaw żball fil-browsers kollha, minkejja li huma matematikament korretti.

Eżempju fejn il-calc huwa validu:

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

Eżempju fejn il-calc huwa invalidu:

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

Mixins

Id-direttorju tagħna scss/mixins/għandu ton ta 'mixins li jħaddmu partijiet ta' Bootstrap u jistgħu jintużaw ukoll fil-proġett tiegħek stess.

Skemi tal-kulur

Mixin shorthand għall- prefers-color-schememistoqsija tal-midja hija disponibbli b'appoġġ għal light, dark, u skemi ta' kuluri tad-dwana.

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