Sass

Përdorni skedarët tanë burimor Sass për të përfituar nga variablat, hartat, përzierjet dhe funksionet për t'ju ndihmuar të ndërtoni më shpejt dhe të personalizoni projektin tuaj.

Në këtë faqe

Përdorni skedarët tanë burimor Sass për të përfituar nga variablat, hartat, përzierjet dhe më shumë.

Struktura e skedarit

Kurdoherë që është e mundur, shmangni modifikimin e skedarëve bazë të Bootstrap. Për Sass, kjo do të thotë të krijoni fletën tuaj të stilit që importon Bootstrap në mënyrë që të mund ta modifikoni dhe zgjeroni atë. Duke supozuar se po përdorni një menaxher paketash si npm, do të keni një strukturë skedari që duket si kjo:

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

Nëse keni shkarkuar skedarët tanë burimor dhe nuk jeni duke përdorur një menaxher paketash, do të dëshironi të konfiguroni manualisht diçka të ngjashme me atë strukturë, duke i mbajtur skedarët burimor të Bootstrap të ndara nga tuajat.

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

Importimi

Në tuaj custom.scss, ju do të importoni skedarët burimor Sass të Bootstrap. Ju keni dy opsione: përfshini të gjithë Bootstrap, ose zgjidhni pjesët që ju nevojiten. Ne inkurajojmë këtë të fundit, megjithëse kini parasysh se ka disa kërkesa dhe varësi në të gjithë komponentët tanë. Ju gjithashtu do të duhet të përfshini disa JavaScript për shtojcat tona.

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

Me këtë konfigurim në vend, mund të filloni të modifikoni cilindo nga variablat dhe hartat Sass në custom.scss. Ju gjithashtu mund të filloni të shtoni pjesë të Bootstrap nën // Optionalseksionin sipas nevojës. Ne sugjerojmë përdorimin e pirgut të plotë të importit nga bootstrap.scssskedari ynë si pikënisje.

Standardet e ndryshueshme

Çdo variabël Sass në Bootstrap përfshin !defaultflamurin që ju lejon të anashkaloni vlerën e paracaktuar të ndryshores në Sass-in tuaj pa modifikuar kodin burimor të Bootstrap. Kopjoni dhe ngjitni variablat sipas nevojës, modifikoni vlerat e tyre dhe hiqni !defaultflamurin. Nëse një variabël tashmë është caktuar, atëherë nuk do të ricaktohet nga vlerat e paracaktuara në Bootstrap.

Ju do të gjeni listën e plotë të variablave të Bootstrap në scss/_variables.scss. Disa variabla janë vendosur në null, këto variabla nuk e nxjerrin veçorinë nëse nuk janë anashkaluar në konfigurimin tuaj.

Mbështetjet e variablave duhet të vijnë pasi të importohen funksionet tona, por përpara pjesës tjetër të importeve.

Këtu është një shembull që ndryshon background-colordhe colorpër <body>kur importoni dhe përpiloni Bootstrap përmes 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

Përsëriteni sipas nevojës për çdo variabël në Bootstrap, duke përfshirë opsionet globale më poshtë.

Filloni me Bootstrap përmes npm me projektin tonë fillestar! Drejtohuni te depoja e shablloneve twbs/bootstrap-npm-starter për të parë se si të ndërtoni dhe personalizoni Bootstrap në projektin tuaj npm. Përfshin përpiluesin Sass, Autoprefiksuesin, Styleint, PurgeCSS dhe ikonat e Bootstrap.

Hartat dhe sythe

Bootstrap përfshin një pjesë të vogël të hartave Sass, çifte të vlerave kryesore që e bëjnë më të lehtë gjenerimin e familjeve të CSS të lidhura. Ne përdorim hartat Sass për ngjyrat tona, pikat e ndarjes së rrjetit dhe më shumë. Ashtu si variablat Sass, të gjitha hartat Sass përfshijnë !defaultflamurin dhe mund të anashkalohen dhe zgjerohen.

Disa nga hartat tona Sass janë shkrirë në ato boshe si parazgjedhje. Kjo është bërë për të lejuar zgjerimin e lehtë të një harte të caktuar Sass, por vjen me koston e heqjes së artikujve nga një hartë pak më e vështirë.

Modifiko hartën

Të gjitha variablat në $theme-colorshartë përcaktohen si variabla të pavarur. Për të modifikuar një ngjyrë ekzistuese në $theme-colorshartën tonë, shtoni sa vijon në skedarin tuaj të personalizuar Sass:

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

Më vonë, këto variabla vendosen në $theme-colorshartën e Bootstrap:

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

Shto në hartë

Shtoni ngjyra të reja në $theme-colors, ose ndonjë hartë tjetër, duke krijuar një hartë të re Sass me vlerat tuaja të personalizuara dhe duke e bashkuar me hartën origjinale. Në këtë rast, ne do të krijojmë një $custom-colorshartë të re dhe do ta bashkojmë me $theme-colors.

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

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

Hiq nga harta

Për të hequr ngjyrat nga $theme-colors, ose ndonjë hartë tjetër, përdorni map-remove. Kini parasysh se duhet ta futni atë midis kërkesave dhe opsioneve tona:

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

Çelësat e kërkuar

Bootstrap supozon praninë e disa çelësave specifikë brenda hartave Sass pasi i kemi përdorur dhe i zgjerojmë vetë. Ndërsa personalizoni hartat e përfshira, mund të hasni gabime kur përdoret një çelës specifik i hartës Sass.

Për shembull, ne përdorim çelësat primary, success, dhe dangernga $theme-colorspër lidhjet, butonat dhe gjendjet e formës. Zëvendësimi i vlerave të këtyre çelësave nuk duhet të paraqesë probleme, por heqja e tyre mund të shkaktojë probleme me përpilimin e Sass. Në këto raste, do t'ju duhet të modifikoni kodin Sass që i përdor ato vlera.

Funksione

Ngjyrat

Pranë hartave Sass që kemi, ngjyrat e temave mund të përdoren gjithashtu si variabla të pavarur, si $primaryp.sh.

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

Ju mund të ndriçoni ose errësoni ngjyrat me Bootstrap tint-color()dhe shade-color()funksionet. Këto funksione do të përziejnë ngjyrat me të zezën ose të bardhën, ndryshe nga funksionet vendase të Sass lighten()dhe darken()të cilat do të ndryshojnë lehtësinë me një sasi fikse, gjë që shpesh nuk çon në efektin e dëshiruar.

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

Në praktikë, ju do të thërrisni funksionin dhe do të kaloni në parametrat e ngjyrës dhe peshës.

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

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

Kontrasti i ngjyrave

Për të përmbushur standardet e aksesueshmërisë WCAG 2.0 për kontrastin e ngjyrave , autorët duhet të ofrojnë një raport kontrasti prej të paktën 4.5:1 , me shumë pak përjashtime.

Një funksion shtesë që ne përfshijmë në Bootstrap është funksioni i kontrastit të ngjyrave, color-contrast. Ai përdor algoritmin WCAG 2.0 për llogaritjen e pragjeve të kontrastit bazuar në ndriçimin relativ në një sRGBhapësirë ngjyrash për të kthyer automatikisht një ngjyrë kontrasti të lehtë ( #fff), të errët ( #212529) ose të zezë ( #000) bazuar në ngjyrën bazë të specifikuar. Ky funksion është veçanërisht i dobishëm për miksin ose lak ku jeni duke gjeneruar klasa të shumta.

Për shembull, për të gjeneruar mostra me ngjyra nga $theme-colorsharta jonë:

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

Mund të përdoret gjithashtu për nevoja të njëhershme të kontrastit:

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

Ju gjithashtu mund të specifikoni një ngjyrë bazë me funksionet tona të hartës së ngjyrave:

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

Ik SVG

Ne përdorim escape-svgfunksionin për t'i shpëtuar <, >dhe #karakteret për imazhet e sfondit SVG. Kur përdorni escape-svgfunksionin, URI-të e të dhënave duhet të citohen.

Funksionet e mbledhjes dhe zbritjes

Ne përdorim funksionet adddhe subtractpër të mbështjellë calcfunksionin CSS. Qëllimi kryesor i këtyre funksioneve është të shmangin gabimet kur një 0vlerë "pa njësi" kalohet në një calcshprehje. Shprehjet si calc(10px - 0)do të kthejnë një gabim në të gjithë shfletuesit, pavarësisht se janë matematikisht të sakta.

Shembull ku llogaritja është e vlefshme:

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

Shembull ku llogaritja është e pavlefshme:

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

Përzierjet

Drejtoria jonë scss/mixins/ka një ton miksash që fuqizojnë pjesë të Bootstrap dhe mund të përdoren gjithashtu në projektin tuaj.

Skemat e ngjyrave

Një përzierje stenografike për prefers-color-schemepyetjen e medias është e disponueshme me mbështetje për light, dark, dhe skemat e personalizuara të ngjyrave.

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