Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

Kelancangan

Manfaatkan file Sass sumber kami untuk memanfaatkan variabel, peta, mixin, dan fungsi untuk membantu Anda membangun lebih cepat dan menyesuaikan proyek Anda.

Di halaman ini

Manfaatkan file Sass sumber kami untuk memanfaatkan variabel, peta, mixin, dan banyak lagi.

Struktur file

Bila memungkinkan, hindari memodifikasi file inti Bootstrap. Untuk Sass, itu berarti membuat stylesheet Anda sendiri yang mengimpor Bootstrap sehingga Anda dapat memodifikasi dan memperluasnya. Dengan asumsi Anda menggunakan manajer paket seperti npm, Anda akan memiliki struktur file yang terlihat seperti ini:

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

Jika Anda telah mengunduh file sumber kami dan tidak menggunakan pengelola paket, Anda akan ingin membuat sesuatu yang mirip dengan struktur itu secara manual, menjaga file sumber Bootstrap terpisah dari milik Anda.

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

Pengimporan

Di custom.scss, Anda akan mengimpor file Sass sumber Bootstrap. Anda memiliki dua opsi: sertakan semua Bootstrap, atau pilih bagian yang Anda butuhkan. Kami mendorong yang terakhir, meskipun perlu diketahui ada beberapa persyaratan dan dependensi di seluruh komponen kami. Anda juga perlu menyertakan beberapa JavaScript untuk plugin 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

Dengan pengaturan itu, Anda dapat mulai memodifikasi salah satu variabel dan peta Sass di file custom.scss. Anda juga dapat mulai menambahkan bagian Bootstrap di bawah // Optionalbagian sesuai kebutuhan. Kami menyarankan untuk menggunakan tumpukan impor penuh dari bootstrap.scssfile kami sebagai titik awal Anda.

Default variabel

Setiap variabel Sass di Bootstrap menyertakan !defaulttanda yang memungkinkan Anda mengganti nilai default variabel di Sass Anda sendiri tanpa memodifikasi kode sumber Bootstrap. Salin dan tempel variabel sesuai kebutuhan, ubah nilainya, dan hapus !defaulttandanya. Jika suatu variabel telah ditetapkan, maka variabel tersebut tidak akan ditetapkan kembali oleh nilai default di Bootstrap.

Anda akan menemukan daftar lengkap variabel Bootstrap di scss/_variables.scss. Beberapa variabel disetel ke null, variabel ini tidak menampilkan properti kecuali jika diganti dalam konfigurasi Anda.

Penggantian variabel harus dilakukan setelah fungsi kita diimpor, tetapi sebelum impor lainnya.

Berikut adalah contoh yang mengubah background-colordan coloruntuk <body>saat mengimpor dan mengkompilasi Bootstrap melalui 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

Ulangi seperlunya untuk variabel apa pun di Bootstrap, termasuk opsi global di bawah ini.

Mulailah dengan Bootstrap melalui npm dengan proyek awal kami! Buka repositori template twbs /bootstrap-npm-starter untuk melihat cara membuat dan menyesuaikan Bootstrap di proyek npm Anda sendiri. Termasuk kompiler Sass, Autoprefixer, Stylelint, PurgeCSS, dan Ikon Bootstrap.

Peta dan loop

Bootstrap menyertakan beberapa peta Sass, pasangan nilai kunci yang mempermudah pembuatan keluarga CSS terkait. Kami menggunakan peta Sass untuk warna kami, titik putus grid, dan banyak lagi. Sama seperti variabel Sass, semua peta Sass menyertakan !defaultflag dan dapat diganti dan diperluas.

Beberapa peta Sass kami digabungkan menjadi peta kosong secara default. Hal ini dilakukan untuk memudahkan perluasan peta Sass yang diberikan, tetapi biayanya membuat penghapusan item dari peta menjadi sedikit lebih sulit.

Ubah peta

Semua variabel dalam $theme-colorspeta didefinisikan sebagai variabel mandiri. Untuk mengubah warna yang ada di $theme-colorspeta kami, tambahkan berikut ini ke file Sass kustom Anda:

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

Kemudian, variabel-variabel ini diatur di $theme-colorspeta Bootstrap:

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

Tambahkan ke peta

Tambahkan warna baru ke $theme-colors, atau peta lainnya, dengan membuat peta Sass baru dengan nilai khusus Anda dan menggabungkannya dengan peta asli. Dalam hal ini, kami akan membuat $custom-colorspeta baru dan menggabungkannya dengan $theme-colors.

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

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

Hapus dari peta

Untuk menghapus warna dari $theme-colors, atau peta lainnya, gunakan map-remove. Ketahuilah bahwa Anda harus menyisipkan $theme-colorsdi antara persyaratan kami tepat setelah definisinya di dalam variablesdan sebelum penggunaannya di 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

Kunci yang diperlukan

Bootstrap mengasumsikan adanya beberapa kunci khusus dalam peta Sass saat kami menggunakan dan memperluasnya sendiri. Saat Anda menyesuaikan peta yang disertakan, Anda mungkin mengalami kesalahan saat kunci peta Sass tertentu digunakan.

Misalnya, kami menggunakan primary, success, dan dangerkunci dari $theme-colorsuntuk tautan, tombol, dan status formulir. Mengganti nilai kunci ini seharusnya tidak menimbulkan masalah, tetapi menghapusnya dapat menyebabkan masalah kompilasi Sass. Dalam hal ini, Anda harus memodifikasi kode Sass yang menggunakan nilai tersebut.

Fungsi

warna

Di samping peta Sass yang kita miliki, warna tema juga dapat digunakan sebagai variabel mandiri, seperti $primary.

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

Anda dapat mencerahkan atau menggelapkan warna dengan Bootstrap tint-color()dan shade-color()fungsinya. Fungsi-fungsi ini akan mencampur warna dengan hitam atau putih, tidak seperti asli Sass lighten()dan darken()fungsi yang akan mengubah kecerahan dengan jumlah yang tetap, yang seringkali tidak menghasilkan efek yang diinginkan.

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

Dalam praktiknya, Anda akan memanggil fungsi dan meneruskan parameter warna dan bobot.

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

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

Kontras warna

Untuk memenuhi persyaratan kontras Pedoman Aksesibilitas Konten Web (WCAG) , penulis harus memberikan kontras warna teks minimum 4,5:1 dan kontras warna non-teks minimum 3:1 , dengan sedikit pengecualian.

Untuk membantu dengan ini, kami menyertakan color-contrastfungsi di Bootstrap. Ini menggunakan algoritma rasio kontras WCAG untuk menghitung ambang kontras berdasarkan pencahayaan relatif dalam sRGBruang warna untuk secara otomatis mengembalikan warna kontras terang ( #fff), gelap ( #212529) atau hitam ( #000) berdasarkan warna dasar yang ditentukan. Fungsi ini sangat berguna untuk mixin atau loop di mana Anda menghasilkan banyak kelas.

Misalnya, untuk menghasilkan contoh warna dari $theme-colorspeta kita:

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

Ini juga dapat digunakan untuk kebutuhan kontras satu kali:

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

Anda juga dapat menentukan warna dasar dengan fungsi peta warna kami:

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

Melarikan diri dari SVG

Kami menggunakan escape-svgfungsi untuk keluar dari <, >dan #karakter untuk gambar latar belakang SVG. Saat menggunakan escape-svgfungsi, URI data harus dikutip.

Fungsi Tambah dan Kurangi

Kami menggunakan fungsi adddan subtractuntuk membungkus calcfungsi CSS. Tujuan utama dari fungsi ini adalah untuk menghindari kesalahan ketika nilai "tanpa unit" 0dilewatkan ke dalam calcekspresi. Ekspresi like calc(10px - 0)akan mengembalikan kesalahan di semua browser, meskipun secara matematis benar.

Contoh di mana kalk itu valid:

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

Contoh di mana kalk tidak 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

Direktori kami scss/mixins/memiliki banyak sekali mixin yang mendukung bagian Bootstrap dan juga dapat digunakan di proyek Anda sendiri.

Skema warna

Mixin singkatan untuk prefers-color-schemekueri media tersedia dengan dukungan untuk light, dark, dan skema warna kustom.

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