Sass

Anggo file Sass sumber kami pikeun ngamangpaatkeun variabel, peta, campuran, sareng fungsi pikeun ngabantosan anjeun ngawangun langkung gancang sareng ngaropea proyék anjeun.

Dina kaca ieu

Anggo file Sass sumber kami pikeun ngamangpaatkeun variabel, peta, mixin, sareng seueur deui.

Struktur file

Sabisana, ulah ngarobah file inti Bootstrap. Pikeun Sass, éta hartosna nyiptakeun stylesheet anjeun nyalira anu ngimpor Bootstrap supados anjeun tiasa ngarobih sareng manjangkeunana. Anggap anjeun nganggo manajer pakét sapertos npm, anjeun bakal gaduh struktur file sapertos kieu:

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

Upami anjeun parantos ngaunduh file sumber kami sareng henteu nganggo manajer pakét, anjeun bakal hoyong sacara manual nyiptakeun anu sami sareng struktur éta, ngajaga file sumber Bootstrap misah ti anjeun sorangan.

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

Ngimpor

Dina anjeun custom.scss, anjeun bakal ngimpor file Sass sumber Bootstrap. Anjeun gaduh dua pilihan: kalebet sadayana Bootstrap, atanapi pilih bagian anu anjeun peryogikeun. Kami ajak anu terakhir, sanaos sadar aya sababaraha syarat sareng katergantungan dina komponén urang. Anjeun ogé kedah ngalebetkeun sababaraha JavaScript pikeun plugins kami.

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

Kalayan pangaturan éta, anjeun tiasa ngawitan ngarobih salah sahiji variabel sareng peta Sass dina file custom.scss. Anjeun oge bisa ngamimitian nambahkeun bagéan Bootstrap handapeun // Optionalbagian sakumaha diperlukeun. Kami nyarankeun ngagunakeun tumpukan impor lengkep tina bootstrap.scssfile kami salaku titik awal anjeun.

standar variabel

Unggal variabel Sass dina Bootstrap kalebet !defaultbandéra anu ngamungkinkeun anjeun nimpa nilai standar variabel dina Sass anjeun nyalira tanpa ngarobih kode sumber Bootstrap. Salin sareng témpél variabel upami diperyogikeun, modifikasi nilaina, sareng cabut !defaultbandéra. Upami variabel parantos ditugaskeun, maka éta moal ditugaskeun deui ku nilai standar dina Bootstrap.

Anjeun bakal mendakan daptar lengkep variabel Bootstrap dina scss/_variables.scss. Sababaraha variabel disetel ka null, variabel ieu teu kaluaran harta iwal aranjeunna overridden dina konfigurasi Anjeun.

Variabel overrides kudu datang sanggeus fungsi urang diimpor, tapi saméméh sesa impor.

Ieu conto anu ngarobih background-colorsareng colornalika <body>ngimpor sareng nyusun Bootstrap via 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

Ulang sakumaha diperlukeun pikeun sagala variabel dina Bootstrap, kaasup pilihan global handap.

Mimitian ku Bootstrap via npm sareng proyék starter kami! Sirah kana repositori template twbs/bootstrap-npm-starter pikeun ningali kumaha ngawangun sareng ngaropea Bootstrap dina proyék npm anjeun nyalira. Ngawengku kompiler Sass, Autoprefixer, Stylelint, PurgeCSS, sareng Ikon Bootstrap.

Peta sareng puteran

Bootstrap ngawengku sakeupeul peta Sass, pasangan nilai konci nu nyieun leuwih gampang pikeun ngahasilkeun kulawarga CSS patali. Kami nganggo peta Sass pikeun warna, titik putus grid, sareng seueur deui. Sapertos variabel Sass, sadaya peta Sass kalebet !defaultbandéra sareng tiasa ditindih sareng diperpanjang.

Sababaraha peta Sass urang dihijikeun kana peta kosong sacara standar. Hal ieu dilakukeun pikeun ngamungkinkeun ékspansi gampang tina peta Sass anu dipasihkeun, tapi hargana pikeun ngaleungitkeun barang tina peta anu rada sesah.

Ngarobah peta

Sadaya variabel dina $theme-colorspeta dihartikeun salaku variabel mandiri. Pikeun ngarobih warna anu aya dina $theme-colorspeta kami, tambahkeun ieu kana file Sass khusus anjeun:

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

Salajengna, variabel ieu disetél dina $theme-colorspeta Bootstrap:

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

Tambahkeun ka peta

Tambihkeun warna anyar kana $theme-colors, atanapi peta anu sanés, ku cara nyiptakeun peta Sass énggal sareng nilai khusus anjeun sareng ngahijikeun sareng peta asli. Dina hal ieu, urang bakal nyieun $custom-colorspeta anyar jeung ngagabung jeung $theme-colors.

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

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

Cabut tina peta

Pikeun miceun kelir tina $theme-colors, atawa peta sejenna, pake map-remove. Sadar yén anjeun kedah nyelapkeun $theme-colorsantara sarat kami saatos definisi na variablessareng sateuacan dianggo dina 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

konci diperlukeun

Bootstrap nganggap ayana sababaraha konci khusus dina peta Sass nalika kami nganggo sareng ngalegaan ieu nyalira. Nalika anjeun ngaluyukeun peta anu kalebet, anjeun tiasa mendakan kasalahan nalika konci peta Sass khusus dianggo.

Contona, urang make primary, success, jeung dangerkenop ti $theme-colorspikeun tumbu, tombol, jeung kaayaan formulir. Ngaganti nilai konci ieu teu kedah aya masalah, tapi ngahapus aranjeunna tiasa nyababkeun masalah kompilasi Sass. Dina hal ieu, anjeun kedah ngarobih kodeu Sass anu ngagunakeun nilai-nilai éta.

Fungsi

Warna-warna

Gigireun peta Sass anu kami gaduh, warna téma ogé tiasa dianggo salaku variabel mandiri, sapertos $primary.

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

Anjeun tiasa terang atanapi poék warna sareng Bootstrap tint-color()sareng shade-color()fungsina. Pungsi ieu bakal nyampur warna sareng hideung atanapi bodas, teu sapertos asli lighten()sareng darken()fungsi Sass anu bakal ngarobih lightness ku jumlah anu tetep, anu sering henteu ngakibatkeun pangaruh anu dipikahoyong.

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

Dina prakték, anjeun bakal nelepon fungsi jeung lulus dina warna jeung beurat parameter.

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

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

Kontras warna

Pikeun nyumponan sarat kontras Pedoman Aksesibilitas Kandungan Wéb (WCAG) , panulis kedah nyayogikeun kontras warna téks minimum 4.5:1 sareng kontras warna non-téks minimum 3:1 , sareng sakedik pengecualian.

Pikeun mantuan kalawan ieu, urang kaasup color-contrastfungsi dina Bootstrap. Éta ngagunakeun algoritma rasio kontras WCAG pikeun ngitung ambang kontras dumasar kana luminance relatif dina sRGBrohangan warna pikeun otomatis ngabalikeun warna kontras lampu ( #fff), poék ( #212529) atanapi hideung ( #000) dumasar kana warna dasar anu ditangtukeun. Pungsi ieu hususna kapaké pikeun mixin atanapi loop dimana anjeun ngahasilkeun sababaraha kelas.

Contona, pikeun ngahasilkeun swatch warna tina $theme-colorspeta kami:

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

Éta ogé tiasa dianggo pikeun kabutuhan kontras sakali:

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

Anjeun ogé tiasa netepkeun warna dasar kalayan fungsi peta warna kami:

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

Kabur SVG

Urang make escape-svgfungsi kabur ka <, >jeung #karakter pikeun gambar tukang SVG. Nalika nganggo escape-svgfungsina, URI data kedah dicutat.

Nambahkeun jeung Ngurangan fungsi

Kami nganggo addsareng subtractfungsi pikeun mungkus calcfungsi CSS. Tujuan utama fungsi ieu nyaéta pikeun ngahindarkeun kasalahan nalika nilai "unitless" dialihkeun 0kana calcéksprési. Babasan sapertos calc(10px - 0)bakal ngabalikeun kasalahan dina sadaya panyungsi, sanaos leres sacara matematis.

Conto mana calc sah:

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

Conto mana calc teu valid:

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

Campuran

Diréktori kami scss/mixins/ngagaduhan seueur campuran anu ngawasaan bagian Bootstrap sareng ogé tiasa dianggo dina proyék anjeun nyalira.

Skéma warna

Campuran singgetan pikeun prefers-color-schemepamundut média sayogi kalayan dukungan pikeun light, dark, sareng skéma warna khusus.

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