Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

Sass

Yi amfani da fayilolin Sass tushen mu don cin gajiyar sauye-sauye, taswirori, mahaɗa, da ayyuka don taimaka muku haɓaka sauri da tsara aikinku.

A wannan shafi

Yi amfani da fayilolin Sass tushen mu don amfani da fa'idar masu canji, taswirori, mixins, da ƙari.

Tsarin fayil

A duk lokacin da zai yiwu, guje wa gyara manyan fayilolin Bootstrap. Don Sass, wannan yana nufin ƙirƙirar takaddun salon ku wanda ke shigo da Bootstrap don ku iya gyarawa da tsawaita shi. Tsammanin kuna amfani da mai sarrafa fakiti kamar npm, zaku sami tsarin fayil mai kama da wannan:

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

Idan kun sauke fayilolin tushen mu kuma ba ku amfani da mai sarrafa fakiti, kuna so ku ƙirƙiri wani abu mai kama da wannan tsarin da hannu, kiyaye fayilolin tushen Bootstrap daban da naku.

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

Ana shigo da shi

A cikin custom.scss, za ku shigo da fayilolin Sass tushen Bootstrap. Kuna da zaɓuɓɓuka biyu: haɗa duk Bootstrap, ko zaɓi sassan da kuke buƙata. Muna ƙarfafa na ƙarshe, ko da yake ku sani akwai wasu buƙatu da abin dogaro a cikin abubuwan da muka haɗa. Hakanan kuna buƙatar haɗa wasu JavaScript don plugins ɗin mu.

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

Tare da wannan saitin a wurin, zaku iya fara canza kowane saƙon Sass da taswira a cikin custom.scss. Hakanan zaka iya fara ƙara sassan Bootstrap a ƙarƙashin // Optionalsashin kamar yadda ake buƙata. Muna ba da shawarar amfani da cikakken tarin shigo da kaya daga bootstrap.scssfayil ɗin mu azaman wurin farawa.

Matsaloli masu canzawa

Kowane Sass m a cikin Bootstrap ya haɗa da !defaulttuta da ke ba ku damar ƙetare ƙimar tsohowar mai canjin a cikin Sass ɗin ku ba tare da canza lambar tushen Bootstrap ba. Kwafi da liƙa masu canji kamar yadda ake buƙata, gyara ƙimar su, sannan cire !defaulttuta. Idan an riga an sanya maɓalli, to, ba za a sake sanya shi ta tsoffin dabi'u a Bootstrap ba.

Za ku sami cikakken jerin masu canji na Bootstrap a cikin scss/_variables.scss. An saita wasu masu canji zuwa null, waɗannan masu canji ba sa fitar da kayan sai dai idan an soke su a cikin tsarin ku.

Dole ne canje-canje masu canzawa su zo bayan an shigo da ayyukanmu, amma kafin sauran abubuwan shigo da su.

Anan ga misalin da ke canza da background-colorkuma colorlokacin <body>sayo da haɗa Bootstrap ta 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

Maimaita kamar yadda ya cancanta ga kowane mai canzawa a cikin Bootstrap, gami da zaɓuɓɓukan duniya da ke ƙasa.

Fara da Bootstrap ta hanyar npm tare da aikin farawa! Shugaban zuwa wurin ajiyar samfuri na twbs/bootstrap-npm-starter don ganin yadda ake ginawa da keɓance Bootstrap a cikin aikin npm naku. Ya haɗa da mai tara Sass, Autoprefixer, Stylelint, PurgeCSS, da Gumakan Bootstrap.

Taswirori da madaukai

Bootstrap ya ƙunshi ɗimbin taswirorin Sass, maɓalli masu ƙima waɗanda ke sauƙaƙa samar da iyalai na CSS masu alaƙa. Muna amfani da taswirorin Sass don launukanmu, wuraren karyewar grid, da ƙari. Kamar masu canji na Sass, duk taswirorin Sass sun haɗa da !defaulttuta kuma ana iya ƙetare su da tsawaita.

Wasu taswirorin mu na Sass an haɗa su zuwa marasa komai ta tsohuwa. Ana yin wannan don ba da damar fadada taswirar Sass da aka bayar cikin sauƙi, amma ya zo da tsadar cire abubuwa daga taswira da ɗan wahala.

Gyara taswira

Dukkan masu canji a $theme-colorstaswirar an bayyana su azaman masu canji na tsaye. Don canza launin da ke cikin $theme-colorstaswirar mu, ƙara mai zuwa zuwa fayil ɗin Sass na al'ada:

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

Daga baya, an saita waɗannan masu canji a $theme-colorstaswirar Bootstrap:

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

Ƙara zuwa taswira

Ƙara sababbin launuka zuwa $theme-colors, ko kowane taswira, ta hanyar ƙirƙirar sabon taswirar Sass tare da dabi'unku na al'ada da kuma haɗa shi da taswirar asali. A wannan yanayin, za mu ƙirƙiri sabuwar $custom-colorstaswira kuma mu haɗa ta da $theme-colors.

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

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

Cire daga taswira

Don cire launuka daga $theme-colors, ko kowane taswira, yi amfani da map-remove. Ku sani dole ne ku saka $theme-colorstsakanin bukatunmu bayan ma'anarsa a ciki variablesda kuma kafin amfani da shi a cikin 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

Maɓallan da ake buƙata

Bootstrap yana ɗaukar kasancewar wasu takamaiman maɓalli a cikin taswirar Sass kamar yadda muka yi amfani da su kuma muka faɗaɗa waɗannan kanmu. Yayin da kuke keɓance taswirorin da aka haɗa, zaku iya fuskantar kurakurai inda ake amfani da takamaiman taswirar taswirar Sass.

Misali, muna amfani da primary, success, da dangermaɓallai daga $theme-colorsdon hanyoyin haɗin gwiwa, maɓallai, da jihohin tsari. Maye gurbin ƙimar waɗannan maɓallan bai kamata ya gabatar da wata matsala ba, amma cire su na iya haifar da al'amuran haɗar Sass. A cikin waɗannan lokuta, kuna buƙatar canza lambar Sass wanda ke amfani da waɗannan ƙimar.

Ayyuka

Launuka

Kusa da taswirorin Sass da muke da su, ana iya amfani da launukan jigo azaman masu canji na tsaye, kamar $primary.

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

Kuna iya haskaka ko duhu launuka tare da Bootstrap's tint-color()da shade-color()ayyuka. Waɗannan ayyuka za su haɗu da launuka tare da baki ko fari, sabanin Sass 'yan asalin lighten()da darken()ayyuka waɗanda za su canza haske ta ƙayyadaddun adadin, wanda sau da yawa baya haifar da tasirin da ake so.

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

A aikace, zaku kira aikin kuma ku wuce cikin sigogin launi da nauyi.

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

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

Bambancin launi

Domin saduwa da ƙa'idodin samun damar abun ciki na Yanar Gizo (WCAG) , dole ne marubuta su samar da mafi ƙarancin bambancin launi na rubutu na 4.5: 1 da ƙaramin bambancin launi mara rubutu na 3: 1 , tare da ƴan kaɗan.

Don taimakawa tare da wannan, mun haɗa color-contrastaikin a cikin Bootstrap. Yana amfani da algorithm rabo na WCAG don ƙididdige ƙofofin bambanci dangane da hasken dangi a cikin sRGBsarari launi don dawo da haske ta atomatik ( #fff), duhu ( #212529) ko baƙar fata ( #000) launi dabam dangane da ƙayyadadden launi na tushe. Wannan aikin yana da amfani musamman ga mixins ko madaukai inda kuke samar da azuzuwan da yawa.

Misali, don samar da swatches launi daga $theme-colorstaswirar mu:

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

Hakanan za'a iya amfani dashi don buƙatun banbance-banbance na kashe-kashe:

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

Hakanan zaka iya ƙayyade launin tushe tare da ayyukan taswirar launi:

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

Gudun SVG

Muna amfani da escape-svgaikin don tserewa <, >da #haruffa don hotunan bangon SVG. Lokacin amfani da escape-svgaikin, dole ne a nakalto bayanan URIs.

Ƙara da Rage ayyuka

Muna amfani da ayyuka addda subtractayyuka don kunsa aikin CSS calc. Babban manufar waɗannan ayyuka shine a guje wa kurakurai lokacin da aka ƙaddamar da ƙimar "marasa ɗaya" 0cikin calcmagana. Kalmomi kamar calc(10px - 0)za su dawo da kuskure a cikin duk masu bincike, duk da kasancewar su daidai ta hanyar lissafi.

Misali inda calc yake aiki:

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

Misali inda calc ɗin ba ya aiki:

$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

Littafin littafin mu scss/mixins/yana da tarin mixins waɗanda ke ba da ikon sassan Bootstrap kuma ana iya amfani da su a cikin aikin ku.

Tsarin launi

Ana samun haɗin ɗan gajeren hannu don prefers-color-schemetambayar mai jarida tare da goyan baya ga light, dark, da tsarin launi na al'ada.

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