ຊາສ

ໃຊ້ໄຟລ໌ Sass ແຫຼ່ງຂອງພວກເຮົາເພື່ອໃຊ້ປະໂຫຍດຈາກຕົວແປ, ແຜນທີ່, mixins ແລະຟັງຊັນຕ່າງໆເພື່ອຊ່ວຍໃຫ້ທ່ານສ້າງໄວຂຶ້ນແລະປັບແຕ່ງໂຄງການຂອງທ່ານ.

ໃນໜ້ານີ້

ໃຊ້ໄຟລ໌ Sass ແຫຼ່ງຂອງພວກເຮົາເພື່ອໃຊ້ປະໂຫຍດຈາກຕົວແປ, ແຜນທີ່, mixins, ແລະອື່ນໆ.

ໂຄງສ້າງໄຟລ໌

ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ຫຼີກເວັ້ນການດັດແປງໄຟລ໌ຫຼັກຂອງ Bootstrap. ສໍາລັບ Sass, ນັ້ນຫມາຍຄວາມວ່າການສ້າງຮູບແບບຂອງທ່ານເອງທີ່ນໍາເຂົ້າ Bootstrap ເພື່ອໃຫ້ທ່ານສາມາດດັດແປງແລະຂະຫຍາຍມັນໄດ້. ສົມມຸດວ່າທ່ານກໍາລັງໃຊ້ຕົວຈັດການຊຸດເຊັ່ນ npm, ທ່ານຈະມີໂຄງສ້າງໄຟລ໌ທີ່ມີລັກສະນະນີ້:

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

ຖ້າທ່ານໄດ້ດາວໂຫລດໄຟລ໌ຕົ້ນສະບັບຂອງພວກເຮົາແລະບໍ່ໄດ້ໃຊ້ຕົວຈັດການແພັກເກັດ, ທ່ານຕ້ອງການສ້າງສິ່ງທີ່ຄ້າຍຄືກັບໂຄງສ້າງນັ້ນດ້ວຍຕົນເອງ, ຮັກສາໄຟລ໌ແຫຼ່ງຂອງ Bootstrap ແຍກຕ່າງຫາກຈາກຂອງທ່ານເອງ.

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

ການນໍາເຂົ້າ

ໃນຂອງທ່ານ custom.scss, ທ່ານຈະນໍາເຂົ້າໄຟລ໌ Sass ແຫຼ່ງຂອງ Bootstrap. ທ່ານມີສອງທາງເລືອກ: ປະກອບມີ Bootstrap ທັງຫມົດ, ຫຼືເລືອກເອົາພາກສ່ວນທີ່ທ່ານຕ້ອງການ. ພວກເຮົາຊຸກຍູ້ໃຫ້ອັນສຸດທ້າຍ, ເຖິງແມ່ນວ່າຈະຮູ້ວ່າມີບາງຂໍ້ກໍານົດແລະຄວາມເພິ່ງພາອາໄສໃນທົ່ວອົງປະກອບຂອງພວກເຮົາ. ທ່ານຍັງຈະຕ້ອງໄດ້ລວມເອົາບາງ JavaScript ສໍາລັບ plugins ຂອງພວກເຮົາ.

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

ດ້ວຍການຕັ້ງຄ່າທີ່ຢູ່ໃນສະຖານທີ່, ທ່ານສາມາດເລີ່ມຕົ້ນທີ່ຈະປັບປຸງແກ້ໄຂໃດໆຂອງຕົວແປ Sass ແລະແຜນທີ່ໃນຂອງທ່ານ custom.scss. ນອກນັ້ນທ່ານຍັງສາມາດເລີ່ມຕົ້ນທີ່ຈະເພີ່ມພາກສ່ວນຂອງ Bootstrap ພາຍໃຕ້ // Optionalພາກສ່ວນຕາມຄວາມຕ້ອງການ. ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ stack ການນໍາເຂົ້າຢ່າງເຕັມທີ່ຈາກ bootstrap.scssໄຟລ໌ຂອງພວກເຮົາເປັນຈຸດເລີ່ມຕົ້ນຂອງທ່ານ.

ຄ່າເລີ່ມຕົ້ນທີ່ປ່ຽນແປງໄດ້

ທຸກໆຕົວແປ Sass ໃນ Bootstrap ປະກອບມີ !defaultທຸງທີ່ຊ່ວຍໃຫ້ທ່ານສາມາດ override ຄ່າເລີ່ມຕົ້ນຂອງຕົວແປໃນ Sass ຂອງທ່ານເອງໂດຍບໍ່ມີການດັດແປງລະຫັດແຫຼ່ງຂອງ Bootstrap. ຄັດລອກແລະວາງຕົວແປຕາມຄວາມຕ້ອງການ, ແກ້ໄຂຄ່າຂອງມັນ, ແລະເອົາ !defaultທຸງອອກ. ຖ້າຕົວແປໄດ້ຖືກມອບຫມາຍແລ້ວ, ມັນຈະບໍ່ຖືກມອບຫມາຍຄືນໃຫມ່ໂດຍຄ່າເລີ່ມຕົ້ນໃນ Bootstrap.

ທ່ານຈະພົບເຫັນບັນຊີລາຍຊື່ເຕັມຂອງຕົວແປຂອງ Bootstrap ໃນ scss/_variables.scss. ບາງຕົວແປຖືກຕັ້ງເປັນ null, ຕົວແປເຫຼົ່ານີ້ບໍ່ອອກຄຸນສົມບັດເວັ້ນເສຍແຕ່ວ່າພວກມັນຖືກ overridden ໃນການຕັ້ງຄ່າຂອງທ່ານ.

ການ overrides ຕົວແປຈະຕ້ອງມາຫຼັງຈາກຫນ້າທີ່ຂອງພວກເຮົາຖືກນໍາເຂົ້າ, ແຕ່ກ່ອນທີ່ຈະນໍາເຂົ້າສ່ວນທີ່ເຫຼືອ.

ນີ້ແມ່ນຕົວຢ່າງທີ່ປ່ຽນແປງ background-colorແລະ colorສໍາລັບການ <body>ນໍາເຂົ້າແລະລວບລວມ Bootstrap ຜ່ານ 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

ເຮັດຊ້ໍາອີກຕາມຄວາມຈໍາເປັນສໍາລັບຕົວແປໃດໆໃນ Bootstrap, ລວມທັງຕົວເລືອກທົ່ວໂລກຂ້າງລຸ່ມນີ້.

ເລີ່ມຕົ້ນດ້ວຍ Bootstrap ຜ່ານ npm ກັບໂຄງການເລີ່ມຕົ້ນຂອງພວກເຮົາ! ໄປທີ່ ບ່ອນເກັບແມ່ແບບ tws/bootstrap-npm-starter ເພື່ອເບິ່ງວິທີສ້າງ ແລະປັບແຕ່ງ Bootstrap ໃນໂຄງການ npm ຂອງທ່ານເອງ. ລວມມີ Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ແລະ Bootstrap Icons.

ແຜນທີ່ແລະ loops

Bootstrap ປະກອບມີແຜນທີ່ Sass, ຄູ່ມູນຄ່າທີ່ສໍາຄັນທີ່ເຮັດໃຫ້ມັນງ່າຍຕໍ່ການສ້າງຄອບຄົວຂອງ CSS ທີ່ກ່ຽວຂ້ອງ. ພວກເຮົາໃຊ້ແຜນທີ່ Sass ສໍາລັບສີຂອງພວກເຮົາ, ຈຸດແບ່ງຕາຂ່າຍ, ແລະອື່ນໆອີກ. ເຊັ່ນດຽວກັນກັບຕົວແປ Sass, ແຜນທີ່ Sass ທັງຫມົດປະກອບມີ !defaultທຸງແລະສາມາດ overridden ແລະຂະຫຍາຍໄດ້.

ບາງແຜນທີ່ Sass ຂອງພວກເຮົາຖືກລວມເຂົ້າເປັນບ່ອນຫວ່າງເປົ່າໂດຍຄ່າເລີ່ມຕົ້ນ. ນີ້ແມ່ນເຮັດເພື່ອອະນຸຍາດໃຫ້ຂະຫຍາຍແຜນທີ່ Sass ທີ່ໃຫ້ມາໄດ້ງ່າຍ, ແຕ່ມີຄ່າໃຊ້ຈ່າຍໃນການ ເອົາ ລາຍການອອກຈາກແຜນທີ່ຍາກກວ່າເລັກນ້ອຍ.

ແກ້ໄຂແຜນທີ່

ທຸກໆຕົວແປໃນ $theme-colorsແຜນທີ່ແມ່ນຖືກກໍານົດເປັນຕົວແປທີ່ຢືນຢູ່ໂດດດ່ຽວ. ເພື່ອແກ້ໄຂສີທີ່ມີຢູ່ແລ້ວໃນ $theme-colorsແຜນທີ່ຂອງພວກເຮົາ, ເພີ່ມຕໍ່ໄປນີ້ໃສ່ໄຟລ໌ Sass ຂອງທ່ານເອງ:

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

ຕໍ່ມາ, ຕົວແປເຫຼົ່ານີ້ຖືກຕັ້ງໄວ້ໃນ $theme-colorsແຜນທີ່ຂອງ Bootstrap:

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

ເພີ່ມໃສ່ແຜນທີ່

ເພີ່ມສີໃໝ່ໃສ່ $theme-colors, ຫຼືແຜນທີ່ອື່ນໆ, ໂດຍການສ້າງແຜນທີ່ Sass ໃໝ່ດ້ວຍຄ່າທີ່ກຳນົດເອງຂອງເຈົ້າ ແລະລວມມັນກັບແຜນທີ່ຕົ້ນສະບັບ. ໃນກໍລະນີນີ້, ພວກເຮົາຈະສ້າງ $custom-colorsແຜນທີ່ໃຫມ່ແລະລວມມັນກັບ $theme-colors.

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

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

ເອົາອອກຈາກແຜນທີ່

ເພື່ອເອົາສີອອກຈາກ $theme-colors, ຫຼືແຜນທີ່ອື່ນໆ, ໃຊ້ map-remove. ຈົ່ງຮູ້ວ່າທ່ານຕ້ອງໃສ່ $theme-colorsລະຫວ່າງຂໍ້ກໍານົດຂອງພວກເຮົາພຽງແຕ່ຫຼັງຈາກຄໍານິຍາມຂອງມັນຢູ່ໃນ variablesແລະກ່ອນການນໍາໃຊ້ຂອງມັນໃນ 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

ກະແຈທີ່ຕ້ອງການ

Bootstrap ສົມມຸດວ່າມີບາງກະແຈສະເພາະພາຍໃນແຜນທີ່ Sass ດັ່ງທີ່ພວກເຮົາໃຊ້ແລະຂະຫຍາຍຕົວມັນເອງ. ໃນຂະນະທີ່ທ່ານປັບແຕ່ງແຜນທີ່ລວມ, ທ່ານອາດຈະພົບກັບຄວາມຜິດພາດທີ່ລະຫັດສະເພາະຂອງແຜນທີ່ Sass ຖືກໃຊ້.

ຕົວຢ່າງ, ພວກເຮົາໃຊ້ປຸ່ມ primary, success, ແລະ dangerຈາກ $theme-colorsສໍາລັບການເຊື່ອມຕໍ່, ປຸ່ມ, ແລະສະຖານະແບບຟອມ. ການປ່ຽນຄ່າຂອງກະແຈເຫຼົ່ານີ້ບໍ່ຄວນມີບັນຫາຫຍັງເລີຍ, ແຕ່ການຖອດພວກມັນອອກອາດເຮັດໃຫ້ເກີດບັນຫາການລວບລວມ Sass. ໃນຕົວຢ່າງເຫຼົ່ານີ້, ທ່ານຈະຕ້ອງດັດແປງລະຫັດ Sass ທີ່ນໍາໃຊ້ຄ່າເຫຼົ່ານັ້ນ.

ຟັງຊັນ

ສີ

ຖັດຈາກ ແຜນທີ່ Sass ທີ່ ພວກເຮົາມີ, ສີຫົວຂໍ້ຍັງສາມາດຖືກນໍາໃຊ້ເປັນຕົວແປແບບດ່ຽວ, ເຊັ່ນ: $primary.

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

ທ່ານສາມາດເຮັດໃຫ້ສີອ່ອນຫຼືຊ້ໍາດ້ວຍ Bootstrap tint-color()ແລະ shade-color()ຫນ້າທີ່. ຟັງຊັນເຫຼົ່ານີ້ຈະປະສົມສີກັບສີດໍາຫຼືສີຂາວ, ແຕກຕ່າງຈາກ Sass' native lighten()ແລະ darken()ຫນ້າທີ່ທີ່ຈະປ່ຽນຄວາມສະຫວ່າງໂດຍຈໍານວນຄົງທີ່, ເຊິ່ງມັກຈະບໍ່ນໍາໄປສູ່ຜົນກະທົບທີ່ຕ້ອງການ.

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

ໃນການປະຕິບັດ, ທ່ານຈະໂທຫາຫນ້າທີ່ແລະຜ່ານໃນຕົວກໍານົດການສີແລະນ້ໍາ.

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

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

ກົງກັນຂ້າມສີ

ເພື່ອຕອບສະໜອງໄດ້ ຕາມຄວາມຕ້ອງການດ້ານຄວາມຄົມຊັດຂອງ ຂໍ້ແນະນຳການເຂົ້າເຖິງເນື້ອຫາເວັບ (WCAG) , ຜູ້ຂຽນ ຕ້ອງ ໃຫ້ ຄວາມຄົມຊັດຂອງສີຂໍ້ຄວາມຕ່ຳສຸດຂອງ 4.5:1 ແລະ ຄວາມຄົມຊັດຂອງສີທີ່ບໍ່ແມ່ນຂໍ້ຄວາມເປັນ 3:1 , ໂດຍມີຂໍ້ຍົກເວັ້ນໜ້ອຍຫຼາຍ.

ເພື່ອຊ່ວຍໃນເລື່ອງນີ້, ພວກເຮົາໄດ້ລວມເອົາ color-contrastຫນ້າທີ່ຢູ່ໃນ Bootstrap. ມັນໃຊ້ ສູດການຄິດໄລ່ ອັດຕາສ່ວນຄວາມຄົມຊັດຂອງ WCAG ສໍາລັບການຄິດໄລ່ຂອບເຂດຄວາມຄົມຊັດໂດຍອີງໃສ່ ຄວາມສະຫວ່າງ ທີ່ກ່ຽວຂ້ອງ ໃນ sRGBພື້ນທີ່ສີເພື່ອສົ່ງຄືນແສງສະຫວ່າງ ( #fff), ຊ້ໍາ ( #212529) ຫຼືສີດໍາ ( #000) ສີກົງກັນຂ້າມໂດຍອີງໃສ່ສີພື້ນຖານທີ່ລະບຸໄວ້. ຟັງຊັນນີ້ເປັນປະໂຫຍດໂດຍສະເພາະສໍາລັບ mixins ຫຼື loops ທີ່ທ່ານກໍາລັງສ້າງຫຼາຍຫ້ອງຮຽນ.

ສໍາລັບຕົວຢ່າງ, ເພື່ອສ້າງ swatches ສີຈາກ $theme-colorsແຜນທີ່ຂອງພວກເຮົາ:

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

ມັນຍັງສາມາດຖືກໃຊ້ສໍາລັບຄວາມຕ້ອງການດ້ານກົງກັນຂ້າມແບບດຽວ:

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

ທ່ານຍັງສາມາດລະບຸສີພື້ນຖານດ້ວຍຟັງຊັນແຜນທີ່ສີຂອງພວກເຮົາ:

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

ໜີ SVG

ພວກເຮົາໃຊ້ escape-svgຟັງຊັນເພື່ອຫລົບຫນີ <, >ແລະ #ຕົວອັກສອນສໍາລັບຮູບພາບພື້ນຫລັງ SVG. ເມື່ອໃຊ້ escape-svgຟັງຊັນ, URI ຂໍ້ມູນຕ້ອງຖືກອ້າງອີງ.

ຟັງຊັນເພີ່ມ ແລະລົບ

ພວກເຮົາໃຊ້ addແລະ subtractຟັງຊັນເພື່ອຫໍ່ calcຟັງຊັນ CSS. ຈຸດປະສົງຕົ້ນຕໍຂອງຫນ້າທີ່ເຫຼົ່ານີ້ແມ່ນເພື່ອຫຼີກເວັ້ນການຄວາມຜິດພາດໃນເວລາທີ່ຄ່າ "unitless" 0ຖືກສົ່ງເຂົ້າໄປໃນການ calcສະແດງອອກ. ການສະແດງອອກຄື calc(10px - 0)ຈະສົ່ງຄືນຂໍ້ຜິດພາດໃນທຸກຕົວທ່ອງເວັບ, ເຖິງແມ່ນວ່າຈະຖືກຕ້ອງທາງຄະນິດສາດ.

ຕົວຢ່າງທີ່ calc ຖືກຕ້ອງ:

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

ຕົວຢ່າງທີ່ calc ບໍ່ຖືກຕ້ອງ:

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

ມິກຊິນ

ໄດເລກະທໍລີ ຂອງພວກເຮົາ scss/mixins/ມີສ່ວນປະສົມຂອງ Bootstrap ແລະສາມາດຖືກນໍາໃຊ້ໃນທົ່ວໂຄງການຂອງທ່ານເອງ.

ລະບົບສີ

mixin shorthand ສໍາລັບການ prefers-color-schemeສອບຖາມສື່ແມ່ນມີຢູ່ກັບການສະຫນັບສະຫນູນສໍາລັບ light, dark, ແລະຮູບແບບສີທີ່ກໍາຫນົດເອງ.

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

ຊາສ