Sass oyo azali

Salelá ba fichiers na biso ya Sass ya source mpo na ko profiter na ba variables, ba cartes, ba mixins, mpe ba fonctions mpo na kosalisa yo otonga noki mpe o personnaliser projet na yo.

Na lokasa oyo

Salelá ba fichiers na biso ya Sass ya source mpo na ko profiter na ba variables, ba cartes, ba mixins, mpe mingi mosusu.

Bokeli ya fisyé

Soki likoki ezali, koboya kobongola ba fichiers ya moboko ya Bootstrap. Mpo na Sass, yango elingi koloba kosala stylesheet na yo moko oyo ekotisaka Bootstrap mpo ete okoka ko modifier mpe ko extend yango. Soki tokanisi ete ozali kosalela mokambi ya ba paquets lokola npm, okozala na ebongiseli ya fisyé oyo ezali lokola oyo:

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

Soki o téléchargé ba fichiers source na biso mpe ozali kosalela gestionnaire ya ba paquets te, okolinga kosala manuellement eloko moko ya ndenge moko na structure wana, kobatela ba fichiers source ya Bootstrap ekeseni na oyo ya yo.

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

Kokɔtisa biloko na mboka mopaya

Na custom.scss, oko kotisa ba fichiers Sass ya source ya Bootstrap. Ozali na ba options mibale: kotia nionso ya Bootstrap, to pona ba parties oyo osengeli na yango. Tolendisi oyo ya nsuka, atako yeba ete ezali na mwa masengi mpe bozangi boyokani na kati ya biteni na biso. Okozala mpe na mposa ya kotya mwa JavaScript mpo na ba plugins na biso.

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

Na setup wana na esika, okoki kobanda ko modifier moko ya ba variables ya Sass na ba cartes na yo custom.scss. Okoki mpe kobanda kobakisa biteni ya Bootstrap na nse ya // Optionaleteni soki esengeli. Tosengi kosalela stack ya importation mobimba uta na bootstrap.scssfichier na biso lokola point de départ na yo.

Ba défauts ya variable

Variable nionso ya Sass na Bootstrap ezali na !defaultdrapeau oyo epesaka yo nzela ya ko superposer valeur par défaut ya variable na Sass na yo moko sans ko modifier code source ya Bootstrap. Copier pe coller ba variables soki esengeli, modifier ba valeurs na yango, pe longola !defaultdrapeau. Soki variable moko esi epesameli, wana ekopesama lisusu te na ba valeurs par défaut na Bootstrap.

Okokuta liste mobimba ya ba variables ya Bootstrap na scss/_variables.scss. Ba variables misusu etiamaki na null, ba variables oyo ebimisaka propriété te soki te elongolami na configuration na yo.

Ba overrides variables esengeli eya sima ya ko importer ba fonctions na biso, mais avant ba importations oyo etikali.

Tala ndakisa oyo ebongoli background-colormpe colormpo na <body>ntango ya kokɔtisa mpe kosangisa Bootstrap na nzela ya 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

Zongela soki esengeli mpo na variable nyonso na Bootstrap, bakisa mpe ba options ya mokili mobimba oyo ezali awa na nse.

Bandá na Bootstrap na nzela ya npm na projet na biso ya kobanda! Motó na ebombelo ya modèle twbs/bootstrap-npm-starter mpo na komona ndenge ya kotonga mpe kobongisa Bootstrap na projet na yo moko ya npm. Ezali na compilateur ya Sass, Autoprefixer, Stylelint, PurgeCSS, mpe ba Icônes ya Bootstrap.

Bakarte mpe ba boucles

Bootstrap ezali na mwa ndambo ya ba cartes ya Sass, ba paires ya valeur clé oyo esalaka que ezala facile ya ko produire ba familles ya CSS oyo ezali na relation. Tosalelaka ba cartes ya Sass pona ba couleurs na biso, ba points de rupture ya grille, pe ebele. Kaka lokola ba variables ya Sass, ba cartes nionso ya Sass ezali na !defaultdrapeau mpe ekoki kozala surpassé mpe ko extend.

Ba cartes na biso misusu ya Sass esangani na oyo ya pamba par défaut. Yango esalemaka mpo na kopesa nzela na bopanzani ya pete ya karte ya Sass oyo epesami, kasi eyaka na ntalo ya kosala ete kolongola biloko na karte ezala mwa mpasi mingi.

Bobongola karte

Ba variables nionso na $theme-colorscarte e définir lokola ba variables autonomes. Mpo na kobongola langi oyo ezali na $theme-colorskarte na biso, bakisá makambo oyo elandi na fisyé na yo ya Sass oyo olingi:

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

Na sima, ba variables oyo etiamaki na $theme-colorscarte ya Bootstrap:

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

Bakisa na karte

Bakisa balangi ya sika na $theme-colors, to karte mosusu nyonso, na kosalaka karte ya sika ya Sass na motuya na yo ya bopesi mpe kosangisa yango na karte ya ebandeli. Na likambo oyo, tokosala $custom-colorskarte ya sika mpe tokosangisa yango na $theme-colors.

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

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

Longola yango na karte

Mpo na kolongola balangi na $theme-colors, to na karte mosusu nyonso, salelá map-remove. Yeba esengeli otia $theme-colorskati na masengi na biso kaka sima ya ndimbola na yango na variablesmpe liboso ya bosaleli na yango na 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

Bafungola oyo esengeli

Bootstrap ezuaka présence ya ba touches spécifiques mosusu na kati ya ba cartes ya Sass ndenge tosalelaki mpe to extend oyo biso moko. Ntango ozali kobongisa bakarte oyo ezali na kati, okoki kokutana na mabunga esika oyo ezali kosalela fungola ya karte ya Sass moko boye.

Na ndakisa, tosalelaka primary, success, mpe dangerbafungola uta $theme-colorsmpo na ba liens, ba boutons, mpe ba états ya formulaire. Kozongisa ba valeurs ya ba clés oyo esengeli ko présenter ba problèmes te, mais kolongola yango ekoki kosala ba problèmes ya compilation ya Sass. Na ba instances oyo, ekosenga o modifier code Sass oyo esalelaka ba valeurs wana.

Misala oyo esalaka

Balangi

Pembeni ya ba cartes ya Sass oyo tozali na yango, ba couleurs ya thème ekoki pe kosalelama lokola ba variables autonomes, lokola $primary.

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

Okoki ko éclaircir to ko éclaircir ba couleurs na ba Bootstrap's tint-color()na ba shade-color()fonctions. Ba fonctions oyo eko mélanger ba couleurs na noir to blanc, contrairement na natif ya Sass na ba lighten()fonctions darken()oyo eko changer légèreté na quantité fixe, oyo souvent ememaka te na effet oyo olingi.

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

Na pratique, olingaki o benga fonction pe o passer na ba paramètres ya couleur na poids.

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

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

Bokeseni ya langi

Mpo na kokokisa masɛngami ya bokeseni ya Mibeko ya Internet mpo na kozwa makambo na Internet (WCAG) , bakomi basengeli kopesa bokeseni ya langi ya makomi ya moke mpenza ya 4,5:1 mpe bokeseni ya langi ya moke oyo ezali ya makomi te ya 3:1 , longola kaka mwa ndambo moke mpenza.

Mpo na kosalisa na likambo yango, tokɔtisaki color-contrastmosala yango na Bootstrap. Esalelaka algorithme ya rapport ya contraste WCAG mpo na kosala calcul ya ba seuils ya contraste oyo esalemi na luminance relative na sRGBespace ya couleur mpo na kozongisa automatiquement couleur ya contraste ya lumière ( #fff), molili ( #212529) to noir ( #000) oyo esalemi na couleur ya base oyo elakisami. Fonction oyo ezali surtout utile pona ba mixins to ba boucles esika ozali ko générer ba classes ebele.

Na ndakisa, mpo na kobimisa ba swatches ya langi uta na $theme-colorskarte na biso:

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

Ekoki mpe kosalelama mpo na bamposa ya bokeseni oyo esalemaka mbala moko:

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

Okoki pe ko préciser couleur ya base na ba fonctions na biso ya carte ya couleur:

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

Kima SVG

Tosalelaka escape-svgfonction mpo na kokima <, >mpe #bilembo mpo na bilili ya nsima ya SVG. Ntango ozali kosalela escape-svgfonction, esengeli kotanga ba URI ya ba données.

Ba fonctions ya Bakisa mpe Longola

Tosalelaka ba fonctions addmpe subtractmpo na ko envelopper calcfonction CSS. Ntina ya liboso ya misala oyo ezali ya koboya mabunga ntango motuya oyo “ezangi unité” 0elekisami na kati ya calcelobeli. Ba expressions lokola calc(10px - 0)ekozongisa erreur na ba navigateurs nionso, malgré ezali mathématiquement correct.

Ndakisa esika calc ezali valide:

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

Ndakisa esika calc ezali na ntina te:

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

Ba mixins

Annuaire na biso scss/mixins/ezali na tonne ya mixins oyo epesaka nguya na biteni ya Bootstrap mpe ekoki mpe kosalelama na kati ya projet na yo moko.

Ba schemes ya ba couleurs

Mixin ya mokuse mpo na prefers-color-schememotuna ya media ezali na lisungi mpo na light, dark, mpe ba schemes ya langi ya momesano.

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