in English

Sass

Utile nostro fonte Sass files ad utilitatem variabilium, tabularum, mixins, et functiones ad auxilium aedificandum velocius ac domicilii tui project.

In hac pagina

Fontem nostrum Sass lima utantur variabilibus, mappis, mixinis et pluribus.

File structure

Quotiens fieri potest, vitare nucleos imaginum Bootstrap mutare. Pro Sass, id significat creans tuum stilum qui Bootstrap importat ut eam mutare et extendere possis. Si villico sarcina utens sicut npm, fasciculi structuram similem habebis:

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

Si tabulas fontales nostras detraxeris et procuratori sarcina non uteris, manually aliquid simile illi structurae voles creare, servans fontem fasciculi Bootstrap a tuo proprio separatum.

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

importat

In tuis custom.scss, fontem Sass files Bootstrap importes. Duo optiones habes: omnes Bootstrap comprehende, vel partes quas tibi necessarias colligunt. Adhortamur hos, licet conscii sint aliquas necessitates ac clientelas per partes nostras. Etiam JavaScript pro nostris plugins includere necesse erit.

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

Cum illo loco constituto, potes aliquem ex Sassi variabilium et mappis in tuis mutandis incipere custom.scss. Etiam incipere potes partes Bootstrap sub // Optionalsectione addere prout opus est. Nos suadeamus utentes plenam import ACERVUM ex bootstrap.scssfasciculo nostro ut tuum principium.

Defaltis variabilis

Omnis Sass variabilis in Bootstrap !defaultvexillum permittens ut vincat valorem default variabilis in proprio Sass sine modificato codice fonte Bootstrap. Effingo et variabilium quae opus sunt crustulum, bona sua mutare, !defaultvexillum removere. Si variabilis iam assignata est, non rursus assignata per valores default in Bootstrap erit.

Integrum album variabilium Bootstrap invenies in scss/_variables.scss. Quaedam variabiles sunt positae null, hae variabiles proprietatem non praemittunt, nisi in configuratione tua opprimantur.

Overrides variabiles venire debent post munera nostra importari, sed ante reliqua importat.

Exemplum hic mutans background-coloret colorpro <body>inferentes et componendo 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

Repetere quam necessarium est cuilibet variabili in Bootstrap, optiones globales infra.

Incipias cum Bootstrap via npm cum project nostro starter! Caput ad twbs/bootstrap-npm-starter template repositorium vide quomodo aedificare ac domitare Bootstrap in tuo proprio npm project. Includes Compilator Sass, Autoprefixer, Stylelint, PurgeCSS, et Icones Bootstrap.

Maps et ansas

Bootstrap comprehendit paucas mappas Sass, valorem clavis paria quae facilius familias cognatorum CSS generandi faciunt. Utimur mappis Sass nostris coloribus, eget breakpoints, et magis. Sicut variabiles Sass, omnes maps Sass includunt !defaultvexillum et opprimi et extendi possunt.

Quaedam e nostris mappis Sass in vacuas per defaltam merguntur. Hoc factum est ut facilem datae tabulae Sass expansionem patiatur, sed cum periculo res e tabula aliquantulum difficilius removenda venit.

Mutare map

Omnes variabiles in $theme-colorscharta definiuntur standalone variabilium. Ad colorem existentem in $theme-colorstabula nostra mitigandam, sequentia consuetudini tuae fasciculi Sass adde:

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

Postmodum hae variabiles in $theme-colorstabula geographica Bootstrap positae sunt:

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

Add to map

Novos colores addere $theme-colors, vel aliam quamlibet tabulam, novam Sass map creando cum valoribus tuis consuetudinibus et cum tabula originali mergendi. In hoc casu novam $custom-colorstabulam creabimus eamque cum iungemus $theme-colors.

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

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

Aufer a tabula

Colores ab $theme-colorsaliave tabula tollere, utere map-remove. Animadverte oportet te inserere $theme-colorsinter requisita nostra mox in definitione eius variableset ante usum eius in 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

Requiritur claves

Bootstrap assumet praesentiam quarundam clavium specificorum in mappis Sass sicut nos has nosmetipsi usi sumus et extendimus. Ut tabulas inclusas domiciliis, errores incidere potes ubi certae tabulae Sass clavis adhibetur.

Verbi gratia, utimur e clauibus primary, clavibus success, nexus, globulis et civitatibus formantibus. Reponendi valores harum clavium nullas proventus exhibere debent, sed eas removere possunt quaestiones compilation Sass causare. His in rebus, debes mutare codicem Sass qui illis bonis utitur.danger$theme-colors

Munera

Colorum

Proxima ad mappas Sass habemus, colores thema etiam pro standalone variabilium adhiberi possunt, sicut $primary.

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

tint-color()Colores cum Bootstrap's et shade-color()functionibus illustrare vel obscurare potes . Hae functiones colores miscebunt colore nigro vel albo, nativis Sass dissimilibus lighten()ac darken()functionibus, quae levitatem certa quantitate mutabunt, quae saepe ad optatum effectum non ducit.

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

Re, in colore ac pondere parametris munus appellas ac transi.

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

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

Color antithesis

Ut obviam Web Content Accessibility Guidelines (WCAG) discrepantiae requisita, auctores minimum textum colori discrepantiis 4.5:1 et minimum non-texti colori discrepantiis praebere debent of 3:1 , cum paucis admodum exceptionibus.

Ad hoc adiuvandum color-contrastmunus in Bootstrap inclusimus. Ratio antithetonis algorithmus utitur WCAG ad calculandum liminum antithesin secundum luminantia relativa in sRGBspatio colori ut automatice lumen reddat ( #fff) , obscurum ( #212529) vel nigrum ( #000) colorem antithesium innixum in colore basi determinato. Hoc munus maxime utile est ad mixinas vel ansas ubi plures classes generas.

Verbi gratia, ad generandum colorem permutat ex $theme-colorstabula nostra;

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

Potest etiam adhiberi ad contrarias necessitates una-off;

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

Specificare etiam potes turpem colorem cum functionibus chartaceis nostris coloratis;

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

fuge SVG

Munus utimur escape-svgad evadendi rationem <, >et #ingenia ad imagines background SVG. Cum functione utens escape-svg, data URIs adducenda est.

Adde et subtrahe munera

Munus CSS involvere addac functionibus utimur . Finis primarius harum functionum est vitare errores cum valor " non" in expressionem transit . Similia locutiones errorem in omnibus navigatoribus reddent, licet mathematice corrigantur.subtractcalc0calccalc(10px - 0)

Exemplum ubi calc valet;

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

Exemplum ubi calc invalidum est;

$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

Directorium nostrum scss/mixins/ton mixinm habet partes potentiae Bootstrap et etiam trans tuum propositum adhiberi potest.

Color consilia

Compendium mixin pro prefers-color-schemeinstrumentis quaesitum praesto est cum auxilio light, darket consuetudinum colorum consiliorum.

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