Sass

Tumia chanzo chetu cha faili za Sass ili kunufaika na vigeu, ramani, michanganyiko na vitendakazi ili kukusaidia kujenga haraka na kubinafsisha mradi wako.

Katika ukurasa huu

Tumia chanzo chetu cha faili za Sass ili kufaidika na vigeu, ramani, mchanganyiko na zaidi.

Muundo wa faili

Inapowezekana, epuka kurekebisha faili za msingi za Bootstrap. Kwa Sass, hiyo inamaanisha kuunda laha yako mwenyewe ya mtindo inayoingiza Bootstrap ili uweze kuirekebisha na kuipanua. Kwa kudhani unatumia meneja wa kifurushi kama npm, utakuwa na muundo wa faili ambao unaonekana kama hii:

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

Ikiwa umepakua faili zetu asili na hutumii kidhibiti kifurushi, utataka kuunda mwenyewe kitu sawa na muundo huo, ukitenganisha faili za chanzo za Bootstrap na zako.

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

Inaingiza

Katika custom.scss, utaleta faili za Sass chanzo cha Bootstrap. Una chaguo mbili: ni pamoja na Bootstrap yote, au chagua sehemu unazohitaji. Tunahimiza hii ya mwisho, ingawa fahamu kuwa kuna mahitaji na tegemezi katika vipengele vyetu. Pia utahitaji kujumuisha JavaScript kwa programu-jalizi zetu.

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

Usanidi huo ukiwa umekamilika, unaweza kuanza kurekebisha vigeuzo vyovyote vya Sass na ramani katika custom.scss. Unaweza pia kuanza kuongeza sehemu za Bootstrap chini ya // Optionalsehemu kama inahitajika. Tunapendekeza utumie mrundikano kamili wa kuingiza kutoka kwenye bootstrap.scssfaili yetu kama sehemu yako ya kuanzia.

Chaguo-msingi zinazobadilika

Kila kigezo cha Sass katika Bootstrap kinajumuisha !defaultbendera inayokuruhusu kubatilisha thamani chaguo-msingi ya kibadilishaji katika Sass yako bila kurekebisha msimbo wa chanzo wa Bootstrap. Nakili na ubandike vigeu vinavyohitajika, rekebisha thamani zao, na uondoe !defaultbendera. Ikiwa kibadilishaji tayari kimepewa, basi hakitakabidhiwa tena na maadili chaguo-msingi katika Bootstrap.

Utapata orodha kamili ya anuwai za Bootstrap katika scss/_variables.scss. Vigezo vingine vimewekwa kuwa null, vigeu hivi havitoi mali isipokuwa vimebatilishwa katika usanidi wako.

Ubatilishaji unaobadilika lazima uje baada ya utendakazi wetu kuingizwa, lakini kabla ya uagizaji wengine.

Hapa kuna mfano ambao unabadilisha background-colorna colorkwa <body>wakati wa kuingiza na kuunda Bootstrap kupitia 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

Rudia inavyohitajika kwa utofauti wowote katika Bootstrap, ikijumuisha chaguzi za kimataifa zilizo hapa chini.

Anza na Bootstrap kupitia npm na mradi wetu wa kuanzisha! Nenda kwenye hazina ya kiolezo cha twbs/bootstrap-npm-starter ili kuona jinsi ya kuunda na kubinafsisha Bootstrap katika mradi wako wa npm. Inajumuisha mkusanyaji wa Sass, Kiambishi Kiotomatiki, Stylelint, PurgeCSS, na Aikoni za Bootstrap.

Ramani na vitanzi

Bootstrap inajumuisha ramani chache za Sass, jozi muhimu za thamani ambazo hurahisisha kutengeneza familia za CSS zinazohusiana. Tunatumia ramani za Sass kwa rangi zetu, vituo vya kuvunja gridi na zaidi. Kama vile vigeu vya Sass, ramani zote za Sass zinajumuisha !defaultbendera na zinaweza kubatilishwa na kupanuliwa.

Baadhi ya ramani zetu za Sass zimeunganishwa kuwa tupu kwa chaguomsingi. Hii inafanywa ili kuruhusu upanuzi rahisi wa ramani fulani ya Sass, lakini inakuja kwa gharama ya kufanya kuondoa vitu kutoka kwa ramani kuwa vigumu zaidi.

Rekebisha ramani

Vigezo vyote kwenye $theme-colorsramani vinafafanuliwa kama vigeu vilivyojitegemea. Ili kurekebisha rangi iliyopo kwenye $theme-colorsramani yetu, ongeza yafuatayo kwenye faili yako maalum ya Sass:

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

Baadaye, anuwai hizi zimewekwa kwenye $theme-colorsramani ya Bootstrap:

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

Ongeza kwenye ramani

Ongeza rangi mpya kwa $theme-colors, au ramani nyingine yoyote, kwa kuunda ramani mpya ya Sass na thamani zako maalum na kuiunganisha na ramani asili. Katika hali hii, tutaunda $custom-colorsramani mpya na kuiunganisha na $theme-colors.

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

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

Ondoa kwenye ramani

Ili kuondoa rangi kutoka $theme-colors, au ramani nyingine yoyote, tumia map-remove. Fahamu ni lazima uweke $theme-colorskati ya mahitaji yetu baada tu ya ufafanuzi wake ndani variablesna kabla ya matumizi yake katika 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

Vifunguo vinavyohitajika

Bootstrap huchukulia kuwepo kwa baadhi ya funguo mahususi ndani ya ramani za Sass kama tulivyotumia na kuzipanua sisi wenyewe. Unapoweka mapendeleo kwenye ramani zilizojumuishwa, unaweza kukutana na hitilafu ambapo ufunguo mahususi wa ramani ya Sass unatumika.

Kwa mfano, tunatumia primary, success, na dangervitufe kutoka $theme-colorskwa viungo, vitufe, na hali za fomu. Kubadilisha thamani za funguo hizi hakupaswi kuwasilisha masuala yoyote, lakini kuziondoa kunaweza kusababisha masuala ya ujumuishaji wa Sass. Katika matukio haya, utahitaji kurekebisha msimbo wa Sass unaotumia maadili hayo.

Kazi

Rangi

Kando ya ramani za Sass tulizo nazo, rangi za mandhari pia zinaweza kutumika kama vigeu vilivyojitegemea, kama $primary.

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

Unaweza kurahisisha au kufanya rangi nyeusi kwa kutumia Bootstrap tint-color()na shade-color()vitendaji. Vitendaji hivi vitachanganya rangi na nyeusi au nyeupe, tofauti na asili ya Sass lighten()na darken()vitendaji ambavyo vitabadilisha wepesi kwa kiwango kisichobadilika, ambacho mara nyingi hakileti athari inayotaka.

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

Kwa mazoezi, ungeita kazi na kupitisha katika rangi na vigezo vya uzito.

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

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

Tofauti ya rangi

Ili kukidhi mahitaji ya utofautishaji ya Miongozo ya Ufikiaji wa Maudhui ya Wavuti (WCAG) , waandishi lazima watoe utofautishaji wa rangi ya maandishi wa kima cha chini zaidi cha 4.5:1 na utofautishaji wa rangi isiyo ya maandishi wa 3:1 , isipokuwa wachache sana.

Ili kusaidia na hili, tulijumuisha color-contrastkazi katika Bootstrap. Inatumia algoriti ya uwiano wa utofautishaji wa WCAG kwa kukokotoa viwango vya utofautishaji kulingana na mwanga kiasi katika sRGBnafasi ya rangi ili kurudisha kiotomatiki mwanga ( #fff), giza ( #212529) au nyeusi ( #000) rangi ya utofautishaji kulingana na rangi ya msingi iliyobainishwa. Chaguo hili la kukokotoa ni muhimu sana kwa michanganyiko au vitanzi ambapo unazalisha madarasa mengi.

Kwa mfano, kutengeneza alama za rangi kutoka kwa $theme-colorsramani yetu:

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

Inaweza pia kutumika kwa mahitaji ya tofauti ya mara moja:

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

Unaweza pia kubainisha rangi ya msingi na vipengele vyetu vya ramani ya rangi:

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

Escape SVG

Tunatumia chaguo la escape-svgkukokotoa ili kuepuka <, >na #vibambo vya picha za mandharinyuma za SVG. Wakati wa kutumia chaguo za escape-svgkukokotoa, URI za data lazima zinukuliwe.

Ongeza na Ondoa vitendaji

Tunatumia addna subtractvitendakazi kufunga chaguo za kukokotoa za CSS calc. Madhumuni ya msingi ya chaguo hizi za kukokotoa ni kuepuka makosa wakati thamani ya "unit" 0inapitishwa kwenye calcusemi. Maneno kama calc(10px - 0)hayo yatarudisha hitilafu katika vivinjari vyote, licha ya kuwa sahihi kihisabati.

Mfano ambapo hesabu ni halali:

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

Mfano ambapo hesabu si sahihi:

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

Mchanganyiko

Saraka yetu scss/mixins/ina tani ya michanganyiko inayotumia sehemu za Bootstrap na inaweza pia kutumika katika mradi wako mwenyewe.

Mipango ya rangi

Mchanganyiko mfupi wa prefers-color-schemehoja ya media unapatikana kwa usaidizi wa light, dark, na mipangilio maalum ya rangi.

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