Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
in English

Sass

Gebruik ons ​​bron-Sass-lêers om voordeel te trek uit veranderlikes, kaarte, mixins en funksies om jou te help om vinniger te bou en jou projek aan te pas.

Op hierdie bladsy

Gebruik ons ​​bron Sass-lêers om voordeel te trek uit veranderlikes, kaarte, mixins, en meer.

Lêerstruktuur

Waar moontlik, vermy die wysiging van Bootstrap se kernlêers. Vir Sass beteken dit om jou eie stylblad te skep wat Bootstrap invoer sodat jy dit kan verander en uitbrei. As u aanvaar dat u 'n pakketbestuurder soos npm gebruik, sal u 'n lêerstruktuur hê wat soos volg lyk:

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

As jy ons bronlêers afgelaai het en nie 'n pakketbestuurder gebruik nie, sal jy iets soortgelyk aan daardie struktuur met die hand wil opstel, en Bootstrap se bronlêers apart van jou eie hou.

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

Invoer

In jou custom.scsssal jy Bootstrap se bron Sass-lêers invoer. Jy het twee opsies: sluit die hele Bootstrap in, of kies die onderdele wat jy nodig het. Ons moedig laasgenoemde aan, maar wees bewus daarvan dat daar sekere vereistes en afhanklikhede oor ons komponente heen is. Jy sal ook JavaScript vir ons inproppe moet insluit.

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

Met daardie opstelling in plek, kan jy begin om enige van die Sass veranderlikes en kaarte in jou custom.scss. Jy kan ook begin om dele van Bootstrap onder die // Optionalafdeling by te voeg soos nodig. Ons stel voor dat u die volledige invoerstapel vanaf ons bootstrap.scsslêer as u beginpunt gebruik.

Veranderlike verstekke

Elke Sass-veranderlike in Bootstrap bevat die !defaultvlag wat jou toelaat om die veranderlike se verstekwaarde in jou eie Sass te ignoreer sonder om Bootstrap se bronkode te verander. Kopieer en plak veranderlikes soos nodig, verander hul waardes en verwyder die !defaultvlag. As 'n veranderlike reeds toegewys is, sal dit nie hertoegewys word deur die verstekwaardes in Bootstrap nie.

Jy sal die volledige lys van Bootstrap se veranderlikes in vind scss/_variables.scss. Sommige veranderlikes is ingestel op null, hierdie veranderlikes voer nie die eienskap uit nie, tensy hulle in jou konfigurasie oorskryf word.

Veranderlike oorskrywings moet kom nadat ons funksies ingevoer is, maar voor die res van die invoere.

Hier is 'n voorbeeld wat die background-coloren colorvir die verander <body>wanneer Bootstrap via npm invoer en saamgestel word:

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

Herhaal soos nodig vir enige veranderlike in Bootstrap, insluitend die globale opsies hieronder.

Begin met Bootstrap via npm met ons beginnersprojek! Gaan na die twbs/bootstrap-npm-starter- sjabloonbewaarplek om te sien hoe om Bootstrap in u eie npm-projek te bou en aan te pas. Sluit Sass-samesteller, Autoprefixer, Stylelint, PurgeCSS en Bootstrap-ikone in.

Kaarte en lusse

Bootstrap bevat 'n handvol Sass-kaarte, sleutelwaardepare wat dit makliker maak om families van verwante CSS te genereer. Ons gebruik Sass-kaarte vir ons kleure, roosterafbreekpunte en meer. Net soos Sass-veranderlikes, bevat alle Sass-kaarte die !defaultvlag en kan dit oorskryf en uitgebrei word.

Sommige van ons Sass-kaarte word by verstek in leë kaarte saamgevoeg. Dit word gedoen om maklike uitbreiding van 'n gegewe Sass-kaart moontlik te maak, maar dit kom ten koste daarvan om die verwydering van items van 'n kaart effens moeiliker te maak.

Verander kaart

Alle veranderlikes in die $theme-colorskaart word as selfstandige veranderlikes gedefinieer. Om 'n bestaande kleur in ons $theme-colorskaart te verander, voeg die volgende by jou pasgemaakte Sass-lêer:

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

Later word hierdie veranderlikes in Bootstrap se $theme-colorskaart gestel:

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

Voeg by kaart

Voeg nuwe kleure by $theme-colors, of enige ander kaart, deur 'n nuwe Sass-kaart met jou pasgemaakte waardes te skep en dit met die oorspronklike kaart saam te voeg. In hierdie geval sal ons 'n nuwe $custom-colorskaart skep en dit saamvoeg met $theme-colors.

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

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

Verwyder van kaart

Om kleure van $theme-colors, of enige ander kaart te verwyder, gebruik map-remove. Wees bewus daarvan dat jy dit tussen ons vereistes en opsies moet invoeg:

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

Vereiste sleutels

Bootstrap veronderstel die teenwoordigheid van 'n paar spesifieke sleutels binne Sass-kaarte soos ons dit gebruik het en dit self uitbrei. Soos jy die ingeslote kaarte pasmaak, kan jy foute teëkom waar 'n spesifieke Sass-kaart se sleutel gebruik word.

Byvoorbeeld, ons gebruik die primary, success, en dangersleutels van $theme-colorsvir skakels, knoppies en vormtoestande. Die vervanging van die waardes van hierdie sleutels behoort geen probleme op te lewer nie, maar die verwydering daarvan kan probleme met Sass-samestelling veroorsaak. In hierdie gevalle sal jy die Sass-kode wat van daardie waardes gebruik maak, moet verander.

Funksies

Kleure

Benewens die Sass-kaarte wat ons het, kan temakleure ook as selfstandige veranderlikes gebruik word, soos $primary.

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

Jy kan kleure ligter of donkerder maak met Bootstrap's tint-color()en shade-color()funksies. Hierdie funksies sal kleure met swart of wit meng, anders as Sass se oorspronklike lighten()en darken()funksies wat die ligheid met 'n vaste hoeveelheid sal verander, wat dikwels nie tot die gewenste effek lei nie.

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

In die praktyk sal jy die funksie oproep en die kleur- en gewigparameters deurgee.

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

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

Kleur kontras

Om aan WCAG 2.0 toeganklikheidstandaarde vir kleurkontras te voldoen, moet skrywers ' n kontrasverhouding van ten minste 4.5:1 verskaf , met baie min uitsonderings.

'n Bykomende funksie wat ons in Bootstrap insluit, is die kleurkontrasfunksie, color-contrast. Dit gebruik die WCAG 2.0-algoritme vir die berekening van kontrasdrempels gebaseer op relatiewe luminansie in 'n sRGBkleurruimte om outomaties 'n ligte ( #fff), donker ( #212529) of swart ( #000) kontraskleur op grond van die gespesifiseerde basiskleur terug te gee. Hierdie funksie is veral nuttig vir mixins of loops waar jy verskeie klasse genereer.

Byvoorbeeld, om kleurmonsters vanaf ons $theme-colorskaart te genereer:

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

Dit kan ook gebruik word vir eenmalige kontrasbehoeftes:

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

U kan ook 'n basiskleur spesifiseer met ons kleurkaartfunksies:

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

Ontsnap SVG

Ons gebruik die escape-svgfunksie om die <, >en #karakters vir SVG agtergrond beelde te ontsnap. Wanneer die escape-svgfunksie gebruik word, moet data-URI's aangehaal word.

Optel en aftrek funksies

Ons gebruik die adden subtract-funksies om die CSS- calcfunksie om te draai. Die primêre doel van hierdie funksies is om foute te vermy wanneer 'n "eenheidlose" 0waarde in 'n calcuitdrukking oorgedra word. Uitdrukkings soos calc(10px - 0)sal 'n fout in alle blaaiers gee, al is dit wiskundig korrek.

Voorbeeld waar die berekening geldig is:

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

Voorbeeld waar die berekening ongeldig is:

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

Mengsels

Ons scss/mixins/gids het 'n ton mengsels wat dele van Bootstrap aandryf en kan ook oor jou eie projek gebruik word.

Kleurskemas

'n Snelskrifmengsel vir die prefers-color-schememedianavraag is beskikbaar met ondersteuning vir light, dark, en pasgemaakte kleurskemas.

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