Sass

Gunakan fail Sass sumber kami untuk memanfaatkan pembolehubah, peta, campuran dan fungsi untuk membantu anda membina lebih pantas dan menyesuaikan projek anda.

Pada halaman ini

Gunakan fail Sass sumber kami untuk memanfaatkan pembolehubah, peta, campuran dan banyak lagi.

Struktur fail

Apabila boleh, elakkan mengubah suai fail teras Bootstrap. Untuk Sass, ini bermakna mencipta helaian gaya anda sendiri yang mengimport Bootstrap supaya anda boleh mengubah suai dan memanjangkannya. Dengan mengandaikan anda menggunakan pengurus pakej seperti npm, anda akan mempunyai struktur fail yang kelihatan seperti ini:

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

Jika anda telah memuat turun fail sumber kami dan tidak menggunakan pengurus pakej, anda perlu membuat sesuatu yang serupa secara manual dengan struktur itu, memastikan fail sumber Bootstrap berasingan daripada anda sendiri.

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

Mengimport

Dalam custom.scss, anda akan mengimport fail Sass sumber Bootstrap. Anda mempunyai dua pilihan: sertakan semua Bootstrap, atau pilih bahagian yang anda perlukan. Kami menggalakkan yang kedua, walaupun sedar terdapat beberapa keperluan dan pergantungan di seluruh komponen kami. Anda juga perlu memasukkan beberapa JavaScript untuk pemalam 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 persediaan itu, anda boleh mula mengubah suai mana-mana pembolehubah dan peta Sass dalam custom.scss. Anda juga boleh mula menambah bahagian Bootstrap di bawah // Optionalbahagian seperti yang diperlukan. Kami mencadangkan menggunakan timbunan import penuh daripada bootstrap.scssfail kami sebagai titik permulaan anda.

Lalai pembolehubah

Setiap pembolehubah Sass dalam Bootstrap termasuk !defaultbendera yang membolehkan anda mengatasi nilai lalai pembolehubah dalam Sass anda sendiri tanpa mengubah suai kod sumber Bootstrap. Salin dan tampal pembolehubah mengikut keperluan, ubah suai nilainya dan alih keluar !defaultbendera. Jika pembolehubah telah diberikan, maka pembolehubah itu tidak akan ditetapkan semula oleh nilai lalai dalam Bootstrap.

Anda akan menemui senarai lengkap pembolehubah Bootstrap dalam scss/_variables.scss. Sesetengah pembolehubah ditetapkan kepada null, pembolehubah ini tidak mengeluarkan sifat melainkan ia ditindih dalam konfigurasi anda.

Penggantian pembolehubah mesti datang selepas fungsi kami diimport, tetapi sebelum import yang lain.

Berikut ialah contoh yang mengubah background-colordan coloruntuk <body>semasa mengimport dan menyusun 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

Ulang seperti yang diperlukan untuk mana-mana pembolehubah dalam Bootstrap, termasuk pilihan global di bawah.

Mulakan dengan Bootstrap melalui npm dengan projek permulaan kami! Pergi ke repositori templat twbs/bootstrap-npm-starter untuk melihat cara membina dan menyesuaikan Bootstrap dalam projek npm anda sendiri. Termasuk ikon pengkompil Sass, Autoprefixer, Stylelint, PurgeCSS dan Bootstrap.

Peta dan gelung

Bootstrap termasuk segelintir peta Sass, pasangan nilai utama yang memudahkan untuk menjana keluarga CSS yang berkaitan. Kami menggunakan peta Sass untuk warna kami, titik putus grid dan banyak lagi. Sama seperti pembolehubah Sass, semua peta Sass termasuk !defaultbendera dan boleh diganti dan dilanjutkan.

Beberapa peta Sass kami digabungkan menjadi peta kosong secara lalai. Ini dilakukan untuk membolehkan pengembangan mudah peta Sass yang diberikan, tetapi melibatkan kos untuk membuat pengalihan item daripada peta menjadi lebih sukar.

Ubah suai peta

Semua pembolehubah dalam $theme-colorspeta ditakrifkan sebagai pembolehubah kendiri. Untuk mengubah suai warna sedia ada dalam $theme-colorspeta kami, tambahkan yang berikut pada fail Sass tersuai anda:

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

Kemudian, pembolehubah ini ditetapkan dalam $theme-colorspeta Bootstrap:

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

Tambahkan pada peta

Tambahkan warna baharu pada $theme-colors, atau mana-mana peta lain, dengan mencipta peta Sass baharu dengan nilai tersuai anda dan menggabungkannya dengan peta asal. Dalam kes ini, kami akan mencipta $custom-colorspeta baharu 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);

Alih keluar daripada peta

Untuk mengalih keluar warna daripada $theme-colors, atau mana-mana peta lain, gunakan map-remove. Harap maklum bahawa anda mesti memasukkan $theme-colorsantara keperluan kami selepas takrifnya dalam variablesdan sebelum penggunaannya dalam 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

Kekunci yang diperlukan

Bootstrap menganggap kehadiran beberapa kunci khusus dalam peta Sass semasa kami menggunakan dan memanjangkannya sendiri. Semasa anda memperibadikan peta yang disertakan, anda mungkin menghadapi ralat apabila kunci peta Sass tertentu sedang digunakan.

Sebagai contoh, kami menggunakan primary, success, dan dangerkekunci daripada $theme-colorsuntuk pautan, butang dan keadaan borang. Menggantikan nilai kunci ini seharusnya tidak menimbulkan isu, tetapi mengalih keluarnya boleh menyebabkan isu kompilasi Sass. Dalam keadaan ini, anda perlu mengubah suai kod Sass yang menggunakan nilai tersebut.

Fungsi

Warna

Di sebelah peta Sass yang kami ada, warna tema juga boleh digunakan sebagai pembolehubah kendiri, seperti $primary.

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

Anda boleh mencerahkan atau menggelapkan warna dengan Bootstrap tint-color()dan shade-color()fungsi. Fungsi ini akan mencampurkan warna dengan hitam atau putih, tidak seperti asli lighten()dan darken()fungsi Sass yang akan menukar kecerahan dengan jumlah tetap, yang selalunya tidak membawa kepada kesan yang diingini.

// 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 amalan, anda akan memanggil fungsi dan memasukkan parameter warna dan berat.

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

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

Kontras warna

Untuk memenuhi keperluan kontras Garis Panduan Kebolehcapaian Kandungan Web (WCAG) , pengarang mesti menyediakan kontras warna teks minimum 4.5:1 dan kontras warna bukan teks minimum 3:1 , dengan sedikit pengecualian.

Untuk membantu dengan ini, kami memasukkan color-contrastfungsi dalam Bootstrap. Ia menggunakan algoritma nisbah kontras WCAG untuk mengira ambang kontras berdasarkan kecerahan relatif dalam sRGBruang warna untuk mengembalikan warna kontras terang ( #fff), gelap ( #212529) atau hitam ( #000) secara automatik berdasarkan warna asas yang ditentukan. Fungsi ini amat berguna untuk campuran atau gelung yang anda menjana berbilang kelas.

Contohnya, untuk menjana tangkapan warna daripada $theme-colorspeta kami:

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

Ia juga boleh digunakan untuk keperluan kontras sekali sahaja:

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

Anda juga boleh menentukan warna asas dengan fungsi peta warna kami:

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

Melarikan diri SVG

Kami menggunakan escape-svgfungsi untuk melepaskan <, >dan #aksara untuk imej latar belakang SVG. Apabila menggunakan escape-svgfungsi, URI data mesti dipetik.

Fungsi Tambah dan Tolak

Kami menggunakan fungsi adddan subtractuntuk membungkus calcfungsi CSS. Tujuan utama fungsi ini adalah untuk mengelakkan ralat apabila nilai "tanpa unit" 0dihantar ke dalam calcungkapan. Ungkapan seperti calc(10px - 0)akan mengembalikan ralat dalam semua penyemak imbas, walaupun betul secara matematik.

Contoh di mana calc adalah 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);
}

Contoh apabila calc tidak sah:

$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/mempunyai banyak campuran yang menguatkan bahagian Bootstrap dan juga boleh digunakan merentas projek anda sendiri.

Skim warna

Campuran singkatan untuk prefers-color-schemepertanyaan media tersedia dengan sokongan untuk light, dark, dan skema warna tersuai.

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