in English

Sass

Gwiritsani ntchito mafayilo athu a Sass kuti mutengere mwayi pamitundu yosiyanasiyana, mamapu, zosakaniza, ndi ntchito kuti zikuthandizeni kupanga mwachangu ndikusintha pulojekiti yanu.

Patsamba ili

Gwiritsani ntchito mafayilo athu a Sass kuti mutengere mwayi pazosintha, mamapu, zosakaniza, ndi zina zambiri.

Mapangidwe a fayilo

Ngati n'kotheka, pewani kusintha mafayilo amtundu wa Bootstrap. Kwa Sass, izi zikutanthauza kupanga zolemba zanu zomwe zimalowetsa Bootstrap kuti mutha kusintha ndikuwonjezera. Pongoganiza kuti mukugwiritsa ntchito phukusi loyang'anira ngati npm, mudzakhala ndi fayilo yomwe imawoneka motere:

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

Ngati mudatsitsa mafayilo athu oyambira ndipo simukugwiritsa ntchito woyang'anira phukusi, mudzafuna kupanga pamanja china chofanana ndi mawonekedwewo, ndikusunga mafayilo amtundu wa Bootstrap kukhala osiyana ndi anu.

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

Kuitanitsa

M'mafayilo anu custom.scss, mudzalowetsa mafayilo a Sass a Bootstrap. Muli ndi njira ziwiri: kuphatikiza zonse za Bootstrap, kapena sankhani magawo omwe mukufuna. Timalimbikitsa omalizawa, ngakhale dziwani kuti pali zofunika zina ndi zodalira pazigawo zathu zonse. Muyeneranso kuphatikiza JavaScript yamapulagini athu.

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

Ndi kukhazikitsa komweko, mutha kuyamba kusintha zosintha zilizonse za Sass ndi mamapu anu custom.scss. Mutha kuyambanso kuwonjezera magawo a Bootstrap pansi // Optionalpagawo ngati pakufunika. Tikukulangizani kuti mugwiritse ntchito stack yonse kuchokera mufayilo yathu bootstrap.scssngati poyambira.

Zosintha zosinthika

Kusintha kulikonse kwa Sass mu Bootstrap kumaphatikizapo !defaultmbendera yomwe imakulolani kuti mupitirire mtengo wosasinthika wa Sass yanu popanda kusintha code source ya Bootstrap. Koperani ndi kumata zosintha momwe zingafunikire, sinthani makonda awo, ndikuchotsa !defaultmbendera. Ngati kusintha kwaperekedwa kale, ndiye kuti sikugawidwenso ndi mikhalidwe yokhazikika mu Bootstrap.

Mupeza mndandanda wathunthu wazosintha za Bootstrap mu scss/_variables.scss. Zosintha zina zimayikidwa ku null, zosinthazi sizitulutsa katundu pokhapokha zitatsitsidwa pamasinthidwe anu.

Zosintha zosinthika ziyenera kubwera pambuyo poti ntchito zathu zatumizidwa kunja, koma zina zonse zisanachitike.

Nachi chitsanzo chomwe chimasintha background-colorndi potumiza colorndikulemba <body>Bootstrap kudzera 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

Bwerezani ngati kuli kofunikira pakusintha kulikonse mu Bootstrap, kuphatikiza zosankha zapadziko lonse lapansi pansipa.

Yambani ndi Bootstrap kudzera npm ndi polojekiti yathu yoyambira! Mutu ku twbs/bootstrap-npm-starter template repository kuti muwone momwe mungamangire ndikusintha Bootstrap mu polojekiti yanu ya npm. Zimaphatikizapo Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ndi Zithunzi za Bootstrap.

Mapu ndi malupu

Bootstrap imaphatikizapo mamapu ochepa a Sass, awiriawiri ofunika kwambiri omwe amapangitsa kuti zikhale zosavuta kupanga mabanja a CSS yogwirizana. Timagwiritsa ntchito mamapu a Sass pamitundu yathu, mapulaneti a gridi, ndi zina zambiri. Monga zosinthika za Sass, mamapu onse a Sass amaphatikiza !defaultmbendera ndipo amatha kuchotsedwa ndikukulitsidwa.

Ena mwa mamapu athu a Sass amaphatikizidwa kukhala opanda kanthu mwachisawawa. Izi zimachitika kuti zilole kukulitsa kosavuta kwa mapu a Sass, koma zimabwera pamtengo wopangitsa kuchotsa zinthu pamapu kukhala kovuta kwambiri.

Sinthani mapu

Zosintha zonse $theme-colorspamapu zimatanthauzidwa ngati zosintha zokha. Kuti musinthe mtundu womwe ulipo $theme-colorspamapu athu, onjezani zotsatirazi pafayilo yanu yamtundu wa Sass:

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

Pambuyo pake, zosinthazi zimayikidwa $theme-colorspamapu a Bootstrap:

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

Onjezani ku mapu

Onjezani mitundu yatsopano ku $theme-colors, kapena mapu ena aliwonse, popanga mapu atsopano a Sass ndi makonda anu ndikuphatikiza ndi mapu oyambilira. Pamenepa, tipanga $custom-colorsmapu atsopano ndikuwaphatikiza ndi $theme-colors.

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

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

Chotsani pamapu

Kuti muchotse mitundu pa $theme-colors, kapena mapu ena aliwonse, gwiritsani ntchito map-remove. Dziwani kuti muyenera kuyika $theme-colorspakati pa zomwe tikufuna mukangotanthauzira variableskomanso musanagwiritse ntchito mu 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

Makiyi ofunikira

Bootstrap imatengera kukhalapo kwa makiyi ena mkati mwa mamapu a Sass momwe timagwiritsira ntchito ndikuwonjezera tokha. Mukakonza mamapu omwe akuphatikizidwa, mutha kukumana ndi zolakwika pomwe kiyi ya mapu a Sass ikugwiritsidwa ntchito.

Mwachitsanzo, timagwiritsa ntchito primary, success, ndi dangermakiyi ochokera $theme-colorsku maulalo, mabatani, ndi mawonekedwe a fomu. Kusintha makiyi a makiyiwa sikuyenera kubweretsa zovuta, koma kuwachotsa kungayambitse nkhani za Sass. Muzochitika izi, muyenera kusintha nambala ya Sass yomwe imagwiritsa ntchito mfundozo.

Ntchito

Mitundu

Pafupi ndi mamapu a Sass omwe tili nawo, mitundu yamutu imatha kugwiritsidwanso ntchito ngati mitundu yoyimirira, monga $primary.

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

Mutha kuwunikira kapena kudetsa mitundu ndi Bootstrap tint-color()ndi shade-color()ntchito. Ntchitozi zidzasakaniza mitundu ndi yakuda kapena yoyera, mosiyana ndi mbadwa za Sass lighten()ndi darken()ntchito zomwe zidzasintha kuwala ndi kuchuluka kokhazikika, zomwe nthawi zambiri sizimayambitsa zotsatira zomwe mukufuna.

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

M'malo mwake, mutha kuyimba ntchitoyi ndikudutsa magawo amtundu ndi kulemera.

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

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

Kusiyana kwamitundu

Kuti akwaniritse zofunikira zosiyanitsa za Web Content Accessibility Guidelines (WCAG) , olemba akuyenera kupereka kusiyana kwamtundu wa mawu osachepera 4.5: 1 komanso kusiyanitsa kwamtundu wa 3: 1 wocheperako , kupatulapo ochepa.

Kuti tithandizire izi, color-contrasttaphatikiza ntchitoyo mu Bootstrap. Imagwiritsa ntchito ma aligorivimu a WCAG powerengera molingana ndi kuwala kwamtundu wamtundu sRGBkuti ibwezere yokha kuwala ( #fff), mdima ( #212529) kapena wakuda ( #000) wosiyanitsa kutengera mtundu womwe watchulidwa. Izi ndizofunikira makamaka pazosakaniza kapena malupu pomwe mukupanga makalasi angapo.

Mwachitsanzo, kupanga zosintha zamitundu $theme-colorspamapu athu:

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

Itha kugwiritsidwanso ntchito pazosowa zosiyanitsa kamodzi:

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

Mutha kutchulanso mtundu woyambira ndi mapu athu amitundu:

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

Kuthawa SVG

Timagwiritsa ntchito escape-svgntchitoyi kuthawa <, >ndi #zilembo zazithunzi zakumbuyo za SVG. Mukamagwiritsa ntchito escape-svgntchitoyi, ma URI a data ayenera kutchulidwa.

Onjezani ndi Kuchotsa ntchito

Timagwiritsa ntchito addndi subtractntchito kukulunga ntchito ya CSS calc. Cholinga chachikulu cha ntchitoyi ndikupewa zolakwika pamene mtengo wa "unitless" uperekedwa 0m'mawu calc. Mawu ngati calc(10px - 0)angabweretse cholakwika mu asakatuli onse, ngakhale ali olondola masamu.

Chitsanzo pomwe calc ili yoyenera:

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

Chitsanzo pomwe calc ndi yolakwika:

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

Zosakaniza

Chikwatu chathu scss/mixins/chili ndi matani osakanikirana omwe amalimbitsa magawo a Bootstrap ndipo atha kugwiritsidwanso ntchito pa polojekiti yanu.

Mitundu yamitundu

Kusakaniza kwachidule kwafunso lawayilesi prefers-color-schemekulipo ndi chithandizo cha light, dark, ndi makonda amitundu.

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