in English

Sass

Utilise fonte nostro files Sass utantur variabiles, mappas, mixins, et functiones ut adiuvet te citius aedificare et project domicilii tui.

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 nostras fonte receptas et villico sarcina non utens, manually simile illi structurae vis ponere, 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";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 4. Include any optional Bootstrap CSS 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";

// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 6. Add additional custom code here

Cum illo loco constituto, potes aliquem ex Sassi variabilium et mappis in tuis mutandis mutare custom.scss. Etiam incipere potes partes Bootstrap sub // Optionalsectione addere prout opus est. Monemus utendo plenam importare acervum ex tabella nostra bootstrap.scssut 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 crustulum ut opus est, bona sua mutare, !defaultvexillum remove. 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/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 exsistentem in nostra $theme-colorsmapa mutandum, 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. Scire te oportet inserere inter nostras exigentias et optiones;

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

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

Ad WCAG 2.0 signa accessibilitatis colori opponendi , auctores discrepantiam saltem 4.5:1 praebere debent , paucis admodum exceptis.

Munus additum quod includimus in Bootstrap munus est color antithesis, color-contrast. Utitur algorithmo WCAG 2.0 ad calculandum liminum antithesium secundum luminantia relativa in color sRGBspatio ut sponte reddere lucem ( #fff) obscuram ( #212529) vel nigrum ( #000) colorem discrepantem secundum speciem basim coloris. 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`
}

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