Sass

Pelên Sass-a çavkaniya me bikar bînin da ku ji guhêrbar, nexşe, mixîn û fonksiyonan sûd werbigirin da ku ji we re bibin alîkar ku hûn zûtirîn ava bikin û projeya xwe xweş bikin.

Li ser vê rûpelê

Pelên Sass-a çavkaniya me bikar bînin da ku ji guhêrbar, nexşe, mixîn û hêj bêtir sûd werbigirin.

Struktura pelê

Kengê ku gengaz be, ji guhartina pelên bingehîn ên Bootstrap dûr bixin. Ji bo Sass, ev tê vê wateyê ku şêwaza xweya xweya ku Bootstrap îtxal dike biafirîne da ku hûn wê biguhezînin û dirêj bikin. Bihesibînin ku hûn rêveberek pakêtê ya mîna npm bikar tînin, hûn ê strukturek pelê ku bi vî rengî xuya dike hebe:

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

Ger we pelên çavkaniya me dakêşandibe û hûn rêveberek pakêtê bikar neynin, hûn ê bixwazin ku bi destan tiştek mîna wê strukturê biafirînin, pelên çavkaniyê yên Bootstrap ji yên xwe veqetînin.

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

Importing

Di nav xwe custom.scssde, hûn ê pelên Sass-a çavkaniya Bootstrap-ê têxin hundur. Du vebijarkên we hene: Hemî Bootstrap têxin nav xwe, an jî parçeyên ku hûn hewce ne hilbijêrin. Em ya paşîn teşwîq dikin, her çend hay jê hebin ku di nav pêkhateyên me de hin hewcedarî û girêdan hene. Di heman demê de hûn ê hewce ne ku ji bo pêvekên me hin JavaScript jî têxin nav xwe.

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

Bi wê sazkirinê re, hûn dikarin dest bi guheztina yek ji guhêrbar û nexşeyên Sass-ê li xwe bikin custom.scss. // OptionalHer weha hûn dikarin li gorî hewcedariyê dest bi lê zêdekirina beşên Bootstrap-ê li binê beşê bikin. Em pêşniyar dikin ku ji pelê me stûna tevahî importê bootstrap.scsswekî xala xweya destpêkê bikar bînin.

Vebijêrkên guherbar

Her guhêrbar a Sass a li Bootstrap !defaultalayekê vedihewîne ku dihêle hûn nirxa xwerû ya guhêrbar di Sass-a xwe de biguhezînin bêyî ku koda çavkaniyê ya Bootstrap biguhezînin. Li gorî hewcedariyên guhêrbar kopî bikin û bipêçin, nirxên wan biguhezînin, û !defaultala rakin. Ger guhêrbarek berê hatî destnîşan kirin, wê hingê ew ê ji hêla nirxên xwerû yên di Bootstrap-ê de ji nû ve neyê destnîşankirin.

Hûn ê navnîşa bêkêmasî ya guhêrbarên Bootstrap di nav de bibînin scss/_variables.scss. Hin guhêrbar li ser hatine danîn null, ev guhêrbar heya ku di veavakirina we de neyên derbas kirin taybetmendiyê dernaxin.

Pêdivî ye ku guheztinên guhêrbar piştî ku fonksiyonên me têne îtxal kirin werin, lê berî hinardekirina mayî.

Li vir mînakek heye ku dema ku Bootstrap bi navgîniya npm ve tête û berhev dike background-colorû colorji bo-yê diguhezîne:<body>

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

Ji bo her guherbarek li Bootstrap-ê, tevî vebijarkên gerdûnî yên li jêr, wekî ku hewce be dubare bikin.

Bi projeya meya destpêkê re bi npm bi Bootstrap dest pê bikin! Serê depoya şablonê twbs/bootstrap-npm-starter bidin ku hûn bibînin ka meriv çawa di projeya xweya npm de Bootstrap-ê ava dike û xweş dike. Berhevkarê Sass, Autoprefixer, Stylelint, PurgeCSS, û îkonên Bootstrap vedihewîne.

Nexşe û xelek

Bootstrap çend nexşeyên Sass, cotên nirxa sereke vedihewîne ku çêkirina malbatên CSS-ya têkildar hêsantir dike. Em nexşeyên Sass-ê ji bo rengên xwe, xalên şikestî, û hêj bêtir bikar tînin. Mîna guhêrbarên Sass, hemî nexşeyên Sass !defaultala dihewîne û dikare were rakirin û dirêj kirin.

Hin nexşeyên me yên Sassê ji hêla xwerû ve di nav yên vala de têne yek kirin. Ev tê kirin da ku rê bide berfirehkirina hêsan a nexşeyek Sass a diyarkirî, lê bi bihayê derxistina tiştan ji nexşeyê hinekî dijwartir tê.

Nexşeyê biguherîne

Hemî guherbarên di $theme-colorsnexşeyê de wekî guhêrbarên serbixwe têne pênase kirin. Ji bo guheztina rengek heyî di $theme-colorsnexşeya me de, jêrîn li pelê xweya Sass-a xwerû zêde bikin:

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

$theme-colorsDûv re, ev guhêrbar di nexşeya Bootstrap de têne danîn :

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

Li nexşeyê zêde bikin

Rengên nû li $theme-colors, an nexşeyek din lê zêde bikin, bi afirandina nexşeyek Sass a nû bi nirxên xweyên xwerû û tevhevkirina wê bi nexşeya orîjînal re. Di vê rewşê de, em ê nexşeyek nû çêbikin $custom-colorsû wê bi hev re bikin $theme-colors.

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

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

Ji nexşeyê rake

Ji bo rakirina rengan ji $theme-colors, an nexşeyek din, bikar bînin map-remove. Hişyar bin ku divê hûn $theme-colorsdi navbera hewcedariyên me de tenê piştî pênaseya wê variablesû berî karanîna wê di nav de têxin 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

Mifteyên pêwîst

Bootstrap hebûna hin bişkokên taybetî di nav nexşeyên Sass de destnîşan dike ji ber ku me van bixwe bikar aniye û dirêj dike. Gava ku hûn nexşeyên tê de xweş dikin, dibe ku hûn li cihê ku mifteya nexşeya Sass-ê ya taybetî tê bikar anîn bi xeletiyan re rû bi rû bibin.

Mînakî, em bişkokên primary, , successû dangerji $theme-colorsbo girêdan, bişkok û dewletên formê bikar tînin. Veguheztina nirxên van bişkojan divê pirsgirêk dernekeve, lê rakirina wan dibe ku bibe sedema pirsgirêkên berhevkirina Sass. Di van mînakan de, hûn ê hewce bikin ku koda Sass-ê ku van nirxan bikar tîne biguhezînin.

Functions

Colors

Li kêleka nexşeyên Sass ên ku me hene, rengên mijarê jî dikarin wekî guhêrbarên serbixwe werin bikar anîn, mîna $primary.

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

Hûn dikarin bi Bootstrap tint-color()û shade-color()fonksiyonan rengan ronî an tarî bikin. Van fonksiyonan dê rengan bi reş an spî tevlihev bikin, berevajî fonksiyonên xwemalî yên Sass lighten()û darken()fonksiyonên ku dê ronahiyê bi mîqdarek sabît biguhezînin, ku bi gelemperî rê nade bandora xwestinê.

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

Di pratîkê de, hûn ê fonksiyonê bang bikin û pîvanên reng û giraniyê derbas bikin.

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

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

Berevajî rengîn

Ji bo ku daxwazên berevajî Rêbernameyên Gihîştina Naveroka Webê (WCAG) bi cih bînin, divê nivîskar berevajîkirina rengê nivîsê ya hindiktirîn 4.5:1 û berevajiya rengê ne-nivîsarê ya herî kêm 3:1 peyda bikin, bi îstîsnayên pir hindik.

Ji bo ku em bi vê yekê re bibin alîkar, me color-contrastfonksiyonê di Bootstrap de vedigire. Ew algorîtmaya rêjeya berevajî ya WCAG -ê bikar tîne ji bo hesabkirina tixûbên berevajîyê yên li ser bingeha ronahiya têkildar a li sRGBcîhek rengîn da ku bixweber rengek berevajî ronahî ( #fff), tarî ( #212529) an reş ( #000) li ser bingeha rengê bingehîn a diyarkirî vegerîne. Ev fonksiyon bi taybetî ji bo mixîn an lûpên ku hûn çend çînan çêdikin bikêr e.

Mînakî, ji bo ku hûn ji $theme-colorsnexşeya me dîmenên rengîn çêbikin:

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

Di heman demê de ew dikare ji bo hewcedariyên berevajî yekcar were bikar anîn:

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

Her weha hûn dikarin bi fonksiyonên nexşeya rengên me re rengek bingehîn diyar bikin:

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

Escape SVG

Em escape-svgfonksiyonê bikar tînin da ku ji <, >û #karakteran ji bo wêneyên paşîn ên SVG birevin. Dema ku escape-svgfonksiyonê bikar tînin, divê URI-yên daneyê bêne binav kirin.

Fonksiyonên lê zêdekirin û jêkirin

Em fonksiyonên addû bikar tînin da ku subtractfonksiyona CSS-ê calcbipêçin. Armanca bingehîn a van fonksîyonan ew e ku gava nirxek "bêyekanî" 0di nav biwêjekê de derbas bibe ji xeletiyan dûr bikevin calc. Gotinên mîna calc(10px - 0)dê di hemî gerokan de xeletiyek vegerînin, tevî ku ji hêla matematîkî ve rast in.

Mînaka ku calc derbasdar e:

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

Nimûne ku calc nederbasdar e:

$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

Di scss/mixins/pelrêça me de tonek mixîn heye ku parçeyên Bootstrap hêzdar dike û dikare di projeya we de jî were bikar anîn.

Rengên rengan

Mîksek kurteya ji bo pirsiyariya prefers-color-schememedyayê bi piştgirî ji bo light, dark, û nexşeyên rengê xwerû heye.

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