Sass

Uzu niajn fontajn dosierojn Sass por utiligi variablojn, mapojn, miksaĵojn kaj funkciojn por helpi vin konstrui pli rapide kaj personecigi vian projekton.

Sur ĉi tiu paĝo

Uzu niajn fontajn Sass-dosierojn por utiligi variablojn, mapojn, miksaĵojn kaj pli.

Dosiera strukturo

Kiam ajn eblas, evitu modifi la kernajn dosierojn de Bootstrap. Por Sass, tio signifas krei vian propran stilfolion, kiu importas Bootstrap, por ke vi povu modifi kaj etendi ĝin. Supozante, ke vi uzas pakaĵadministrilon kiel npm, vi havos dosierstrukturon kiu aspektas jene:

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

Se vi elŝutis niajn fontdosierojn kaj ne uzas pakaĵadministrilon, vi volos permane krei ion similan al tiu strukturo, konservante la fontdosierojn de Bootstrap apartaj de viaj propraj.

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

Importado

En via custom.scss, vi importos la fontajn Sass-dosierojn de Bootstrap. Vi havas du eblojn: inkluzivi ĉion el Bootstrap, aŭ elektu la partojn, kiujn vi bezonas. Ni kuraĝigas ĉi-lastan, kvankam konsciu, ke ekzistas iuj postuloj kaj dependecoj tra niaj komponantoj. Vi ankaŭ devos inkluzivi iom da JavaScript por niaj kromaĵoj.

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

Kun tiu aranĝo, vi povas komenci modifi iun ajn el la Sass-variabloj kaj mapoj en via custom.scss. Vi ankaŭ povas komenci aldoni partojn de Bootstrap sub la // Optionalsekcio laŭbezone. Ni sugestas uzi la plenan importan stakon de nia bootstrap.scssdosiero kiel via deirpunkto.

Variaj defaŭltoj

Ĉiu Sass-variablo en Bootstrap inkluzivas la !defaultflagon ebligante vin superregi la defaŭltan valoron de la variablo en via propra Sass sen modifi la fontkodon de Bootstrap. Kopiu kaj algluu variablojn laŭbezone, modifi iliajn valorojn kaj forigu la !defaultflagon. Se variablo jam estis asignita, tiam ĝi ne estos reasignita per la defaŭltaj valoroj en Bootstrap.

Vi trovos la kompletan liston de la variabloj de Bootstrap en scss/_variables.scss. Iuj variabloj estas agordita al null, ĉi tiuj variabloj ne eligas la posedaĵon krom se ili estas anstataŭitaj en via agordo.

Variaj anstataŭoj devas veni post kiam niaj funkcioj estas importitaj, sed antaŭ la ceteraj importadoj.

Jen ekzemplo, kiu ŝanĝas la background-colorkaj colorpor la <body>dum importado kaj kompilado de Bootstrap per 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

Ripetu laŭbezone por iu ajn variablo en Bootstrap, inkluzive de la tutmondaj elektoj sube.

Komencu kun Bootstrap per npm kun nia komenca projekto! Iru al la twbs/bootstrap-npm-starter- ŝablona deponejo por vidi kiel konstrui kaj personecigi Bootstrap en via propra npm-projekto. Inkluzivas Sass-kompililon, Autoprefixer, Stylelint, PurgeCSS kaj Bootstrap-Ikonojn.

Mapoj kaj bukloj

Bootstrap inkluzivas kelkajn Sass-mapojn, ŝlosilajn valorparojn, kiuj faciligas generi familiojn de rilataj CSS. Ni uzas Sass-mapojn por niaj koloroj, kradaj rompopunktoj kaj pli. Same kiel Sass-variabloj, ĉiuj Sass-mapoj inkluzivas la !defaultflagon kaj povas esti anstataŭitaj kaj etenditaj.

Kelkaj el niaj Sass-mapoj estas kunfanditaj en malplenajn defaŭlte. Ĉi tio estas farita por permesi facilan vastiĝon de antaŭfiksita Sass-mapo, sed kostas fari forigi erojn de mapo iomete pli malfacila.

Modifi mapon

Ĉiuj variabloj en la $theme-colorsmapo estas difinitaj kiel memstaraj variabloj. Por modifi ekzistantan koloron en nia $theme-colorsmapo, aldonu la jenon al via kutima Sass-dosiero:

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

Pli poste, ĉi tiuj variabloj estas fiksitaj en la $theme-colorsmapo de Bootstrap:

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

Aldoni al mapo

Aldonu novajn kolorojn al $theme-colors, aŭ al iu ajn alia mapo, kreante novan Sass-mapon kun viaj kutimaj valoroj kaj kunfandante ĝin kun la origina mapo. En ĉi tiu kazo, ni kreos novan $custom-colorsmapon kaj kunfandos ĝin kun $theme-colors.

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

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

Forigi de mapo

Por forigi kolorojn de $theme-colors, aŭ ajna alia mapo, uzu map-remove. Atentu, ke vi devas enmeti $theme-colorsinter niajn postulojn tuj post ĝia difino en variableskaj antaŭ ĝia uzo en 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

Bezonataj ŝlosiloj

Bootstrap supozas la ĉeeston de iuj specifaj ŝlosiloj ene de Sass-mapoj dum ni mem uzis kaj etendas ĉi tiujn. Dum vi agordas la inkluzivitajn mapojn, vi povas renkonti erarojn kie specifa Sass-mapo ŝlosilo estas uzata.

Ekzemple, ni uzas la klavojn primary, success, kaj de por ligiloj, butonoj kaj formoŝtatoj. Anstataŭigi la valorojn de ĉi tiuj ŝlosiloj ne devus prezenti problemojn, sed forigi ilin povas kaŭzi problemojn pri kompilo de Sass. En ĉi tiuj kazoj, vi devos modifi la Sass-kodon, kiu uzas tiujn valorojn.danger$theme-colors

Funkcioj

Koloroj

Apud la Sass-mapoj , kiujn ni havas, temokoloroj ankaŭ povas esti uzataj kiel memstaraj variabloj, kiel $primary.

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

Vi povas malpezigi aŭ mallumigi kolorojn per Bootstrap tint-color()kaj shade-color()funkcioj. Ĉi tiuj funkcioj miksos kolorojn kun nigra aŭ blanka, male al la denaska de Sass lighten()kaj darken()funkcioj, kiuj ŝanĝos la malpezecon je fiksa kvanto, kio ofte ne kondukas al la dezirata efiko.

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

En praktiko, vi vokus la funkcion kaj enigus la kolor- kaj pezparametrojn.

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

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

Kolora kontrasto

Por plenumi la kontrastajn postulojn de Retenhavo-Alirebleco-Gvidlinioj (WCAG) , aŭtoroj devas disponigi minimuman tekstan kolorkontraston de 4.5:1 kaj minimuman ne-tekstan kolorkontraston de 3:1 , kun tre malmultaj esceptoj.

Por helpi pri tio, ni inkludis la color-contrastfunkcion en Bootstrap. Ĝi uzas la algoritmon de kontrastoproporcio WCAG por kalkulado de kontrastosojloj bazitaj sur relativa lumeco en sRGBkolorspaco por aŭtomate resendi malpezan ( #fff), malhelan ( #212529) aŭ nigran ( #000) kontrastan koloron bazitan sur la specifita bazkoloro. Ĉi tiu funkcio estas precipe utila por miksaĵoj aŭ bukloj, kie vi generas plurajn klasojn.

Ekzemple, por generi kolorajn specimenojn de nia $theme-colorsmapo:

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

Ĝi ankaŭ povas esti uzata por unufojaj kontrastaj bezonoj:

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

Vi ankaŭ povas specifi bazan koloron per niaj kolormapaj funkcioj:

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

Eskapu SVG

Ni uzas la escape-svgfunkcion por eskapi la <, >kaj #signojn por SVG-fonbildoj. Dum uzado de la escape-svgfunkcio, datumoj URI-oj devas esti cititaj.

Aldonu kaj Subtrahi funkciojn

Ni uzas la funkciojn addkaj subtractpor envolvi la CSS- calcfunkcion. La ĉefa celo de ĉi tiuj funkcioj estas eviti erarojn kiam "senunuo" 0valoro estas transdonita en calcesprimon. Esprimoj kiel calc(10px - 0)resendos eraron en ĉiuj retumiloj, malgraŭ esti matematike ĝustaj.

Ekzemplo kie la kalkulo validas:

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

Ekzemplo kie la kalkulo estas nevalida:

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

Miksinoj

Nia scss/mixins/dosierujo havas multon da miksaĵoj, kiuj potencas partojn de Bootstrap kaj ankaŭ povas esti uzataj tra via propra projekto.

Koloraj skemoj

Stenografiomiksaĵo por la prefers-color-schemeamaskomunikila demando estas havebla kun subteno por light, dark, kaj kutimaj kolorskemoj.

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