Source

Asɛmti a Wɔde Di Dwuma Bootstrap

Fa yɛn Sass nsakrae foforo a wɔasisi mu no yɛ Bootstrap 4 no sɛnea wopɛ ma wiase nyinaa su a wopɛ ma asɛmti ne afã nsakrae a ɛnyɛ den.

Nnianimu

Wɔ Bootstrap 3 mu no, na theming no titiriw ne variable overrides wɔ LESS, custom CSS, ne theme stylesheet soronko a yɛde kaa yɛn distfael ahorow no ho. Sɛ obi bɔ mmɔden kakra a, obetumi asan ayɛ Bootstrap 3 no ho nhyehyɛe foforo koraa a ɔrenka fael atitiriw no. Bootstrap 4 de ɔkwan a wonim no yiye, nanso ɛyɛ soronko kakra ma.

Afei, wɔde Sass variables, Sass maps, ne custom CSS na ɛyɛ theming. Asɛmti stylesheet a wɔatu wɔn ho ama bio nni hɔ; mmom no, wubetumi ama asɛmti a wɔasisi no ayɛ adwuma de gradients, shadows, ne nea ɛkeka ho aka ho.

Sass

Fa yɛn source Sass fael ahorow no di dwuma fa fa variables, maps, mixins, ne nea ɛkeka ho di dwuma.

Fael nhyehyɛe

Bere biara a ɛbɛyɛ yiye no, kwati sɛ wobɛsesa Bootstrap no fael atitiriw no. Sass deɛ, ɛno kyerɛ sɛ wobɛbɔ w’ankasa stylesheet a ɛde Bootstrap ba sɛdeɛ ɛbɛyɛ a wobɛtumi asesa na woatrɛw mu. Sɛ yɛfa no sɛ wode package manager te sɛ npm redi dwuma a, wobɛnya fael nhyehyɛɛ a ɛte sɛ yei:

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

Sɛ woatwe yɛn fibea fael ahorow no na woamfa package manager nni dwuma a, wobɛpɛ sɛ wode nsa hyehyɛ biribi a ɛte sɛ saa nhyehyɛe no, na ama Bootstrap fibea fael ahorow no ayɛ soronko wɔ wo de ho.

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

Nneɛma a wɔde ba amannɔne

Wɔ wo custom.scss, wobɛfa Bootstrap no source Sass fael ahorow no aba. Wowɔ akwan abien a wobɛfa so: fa Bootstrap no nyinaa ka ho, anaa paw afã horow a wuhia. Yɛhyɛ nea etwa to no nkuran, ɛwom sɛ hu sɛ ahwehwɛde ne nneɛma bi a egyina so wɔ yɛn afã horow no nyinaa mu de. Ɛho behia nso sɛ wode JavaScript bi ka ho ma yɛn plugins no.

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Sɛ saa nhyehyɛe no wɔ hɔ a, wubetumi afi ase asesa Sass nsakrae ne asase mfonini ahorow a ɛwɔ wo custom.scss. Wubetumi nso afi ase de Bootstrap no afã horow aka // Optionalɔfã no ase sɛnea ɛho hia. Yɛhyɛ nyansa sɛ fa import stack a edi mũ no fi yɛn bootstrap.scssfael no mu di dwuma sɛ wo mfiase.

Nneɛma a ɛsakra no defaults

Sass variable biara a ɛwɔ Bootstrap 4 mu no de !defaultfrankaa a ɛma wo kwan ma wotumi bu variable no default value no so wɔ w’ankasa Sass mu a wonsakra Bootstrap no source code no. Copy na fa variables no hyɛ mu sɛnea ɛho hia, sesa wɔn values, na yi !defaultfrankaa no fi hɔ. Sɛ wɔde variable bi ahyɛ mu dedaw a, ɛnde wɔrensan mfa default values ​​a ɛwɔ Bootstrap mu no mma.

Wobɛhunu Bootstrap no nsakraeɛ no nyinaa wɔ scss/_variables.scss.

Variable overrides a ɛwɔ Sass fael koro no ara mu no betumi aba ansa na default variables no aba anaasɛ akyi. Nanso, sɛ worebɔ Sass fael ahorow no so a, ɛsɛ sɛ wo overrides no ba ansa na wode Bootstrap Sass fael ahorow no aba.

Nhwɛsoɔ bi a ɛsesa background-colorne colorma no nie <body>bere a wode Bootstrap reba na woreboaboa ano via npm:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Tia mu sɛnea ɛho hia ma nsakrae biara wɔ Bootstrap mu, a wiase nyinaa nhyehyɛe ahorow a ɛwɔ ase ha no ka ho.

Asase mfonini ne loop ahorow

Bootstrap 4 no ka Sass maps nsa kakraa bi, key value pairs a ɛma ɛyɛ mmerɛw sɛ wobɛhyehyɛ mmusua a ɛfa CSS ho. Yɛde Sass maps di dwuma ma yɛn kɔla ahorow, grid breakpoints, ne nea ɛkeka ho. Te sɛ Sass variables no, Sass maps nyinaa de !defaultfrankaa no ka ho na wobetumi abɔ so na wɔatrɛw mu.

Yɛn Sass map ahorow no bi yɛ nea wɔaka abom ayɛ no nea hwee nni mu default so. Wɔyɛ eyi sɛnea ɛbɛyɛ a wobetumi atrɛw Sass asase mfonini bi a wɔde ama no mu mmerɛw, nanso ɛba wɔ ɛka a ɛbɛma nneɛma a wobeyi afi asase mfonini so no ayɛ den kakra no ho.

Sesa asase mfonini

Sɛ wopɛ sɛ wosakra kɔla bi a ɛwɔ hɔ dedaw wɔ yɛn $theme-colorsmap no mu a, fa nea edidi so yi ka wo Sass fael a woahyɛ da ayɛ no ho:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Fa ka asase mfonini ho

Sɛ wode kɔla foforo bɛka ho a $theme-colors, fa safoa foforo ne bo a ɛsom no ka ho:

$theme-colors: (
  "custom-color": #900
);

Yi fi asase mfonini so

Sɛ wopɛ sɛ wuyi kɔla ahorow fi $theme-colors, anaa asase mfonini foforo biara mu a, fa map-remove. Hu sɛ ɛsɛ sɛ wode hyɛ yɛn ahwehwɛde ne nea yebetumi apaw ntam:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Nsafe a wɔhwehwɛ

Bootstrap fa no sɛ nsafe pɔtee bi wɔ hɔ wɔ Sass map ahorow mu sɛnea yɛde dii dwuma na yɛn ankasa yɛtrɛw eyinom mu. Bere a woreyɛ asase mfonini ahorow a ɛka ho no ho nhyehyɛe no, wubetumi ahyia mfomso ahorow wɔ baabi a wɔde Sass asase mfonini pɔtee bi safe redi dwuma no.

Sɛ nhwɛso no, yɛde primary, success, ne dangernsafe a efi mu no di dwuma $theme-colorsma link ahorow, bɔtn ahorow, ne fom tebea horow. Ɛnsɛ sɛ saa nsafe yi botae ahorow a wobɛsesa no de nsɛm biara ba, nanso sɛ woyi fi hɔ a, ebetumi de Sass nhyiam ho nsɛm aba. Wɔ saa nsɛm yi mu no, ɛho behia sɛ wosakra Sass koodu a ɛde saa gyinapɛn ahorow no di dwuma no.

Dwumadi ahorow

Bootstrap de Sass dwumadie ahodoɔ bi di dwuma, nanso subset nko ara na ɛfa general theming ho. Yɛde dwumadie mmiɛnsa a ɛbɛma woanya botaeɛ afiri kɔla map ahodoɔ no mu aka ho:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Eyinom ma wo kwan ma wopaw kɔla biako fi Sass map mu te sɛ sɛnea wode kɔla nsakrae bedi dwuma afi v3 mu no ara pɛ.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Yɛwɔ adwuma foforo nso a yɛde nya kɔla pɔtee bi fi asase $theme-colorsmfonini no so. Negative level values ​​bɛma kɔla no ayɛ hann, bere a level a ɛkorɔn no bɛma ayɛ sum.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Wɔ adeyɛ mu no, wobɛfrɛ dwumadie no na woatwam wɔ parameters mmienu mu: kɔla no din a ɛfiri $theme-colors(sɛ nhwɛsoɔ no, mfitiaseɛ anaa asiane) ne akontabuo level.

.custom-element {
  color: theme-color-level(primary, -10);
}

Wobetumi de dwumadie foforɔ aka ho daakye anaa w’ankasa Sass a woahyɛ da ayɛ de ayɛ level dwumadie ama Sass map foforɔ, anaa mpo generic deɛ sɛ wopɛ sɛ woyɛ verbose kɛseɛ a.

Kɔla ahorow a ɛne ne ho bɔ abira

Dwumadi foforo biako a yɛde ka Bootstrap ho ne kɔla a ɛne ne ho bɔ abira adwuma, color-yiq. Ɛde YIQ kɔla ahunmu no di dwuma de san kɔla a ɛne ne ho bɔ abira a ɛyɛ hann ( #fff) anaa esum ( #111) a egyina nnyinaso kɔla a wɔakyerɛ no so no ba ne ho. Saa dwumadie yi ho wɔ mfasoɔ titire ma mixins anaa loops a woreyɛ class ahodoɔ pii.

Sɛ nhwɛso no, sɛ wopɛ sɛ woyɛ kɔla nhwɛsode ahorow fi yɛn $theme-colorsasase mfonini no so a:

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

Wobetumi nso de adi dwuma ama ahiade ahorow a ɛfa nsonsonoe a ɛba pɛnkoro ho:

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

Wubetumi nso de yɛn kɔla map dwumadi ahorow no akyerɛ kɔla a wɔde gyina so:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Sass a wobetumi apaw

Fa yɛn custom variables fael a wɔahyɛ mu no yɛ Bootstrap 4 no na ɛnyɛ den sɛ wode $enable-*Sass variables foforo bɛdan wiase nyinaa CSS apɛde. Override a variable's value na san boaboa ano npm run testsɛnea ɛho hia.

Wubetumi ahu na woayɛ saa nsakrae ahorow yi ama wiase nyinaa nhyehyɛe atitiriw wɔ Bootstrap scss/_variables.scssfael no mu.

Nneɛma a ɛsakra Nneɛma a Ɛsom Bo Nkyerɛmu
$spacer 1rem(default), anaasɛ botae biara > 0 Kyerɛ default spacer botae a ɛbɛma programmatically ayɛ yɛn spacer utilities .
$enable-rounded true(default) anaasɛfalse Ɛma border-radiusstyle ahorow a wɔadi kan akyerɛkyerɛ mu wɔ nneɛma ahorow so no tumi yɛ adwuma.
$enable-shadows trueanaa false(default) . Ɛma box-shadowstyle ahorow a wɔadi kan akyerɛkyerɛ mu wɔ nneɛma ahorow so no tumi yɛ adwuma.
$enable-gradients trueanaa false(default) . Ɛma gradients a wɔadi kan akyerɛkyerɛ mu no yɛ adwuma via background-imagestyles wɔ components ahorow so.
$enable-transitions true(default) anaasɛfalse Ɛma transitions a wɔadi kan akyerɛkyerɛ mu wɔ nneɛma ahorow so no tumi yɛ adwuma.
$enable-hover-media-query trueanaa false(default) . Wɔagyae
$enable-grid-classes true(default) anaasɛfalse Ɛma CSS adesua ahorow awo ntoatoaso no tumi yɛ ma grid nhyehyɛe no (sɛ nhwɛso no, .container, .row, .col-md-1, ne nea ɛkeka ho).
$enable-caret true(default) anaasɛfalse Ɛma pseudo element caret tumi yɛ adwuma wɔ .dropdown-toggle.
$enable-print-styles true(default) anaasɛfalse Ɛma akwan horow a wɔfa so tintim nhoma no yɛ adwuma yiye no tumi yɛ adwuma.

Ahosuo

Bootstrap no mu nneɛma ahorow ne nneɛma a wɔde di dwuma no pii nam kɔla ahorow a wɔakyerɛkyerɛ mu wɔ Sass asase mfonini mu so na ɛkyekye. Wobetumi de saa asase mfonini yi ayɛ loop wɔ Sass mu de ayɛ mmara ahorow a ɛtoatoa so ntɛmntɛm.

Kɔla ahorow nyinaa

Kɔla a ɛwɔ Bootstrap 4 mu nyinaa, ɛwɔ hɔ sɛ Sass variables ne Sass map wɔ scss/_variables.scssfael mu. Wɔbɛtrɛw eyi mu wɔ nneɛma nketenkete a wɔayi no adi a edi hɔ no mu de nsunsuanso afoforo aka ho, te sɛ grayscale palette a yɛde ka ho dedaw no ara pɛ.

Bunu
Indigo a ɛwɔ hɔ
Purple
Penke
Kɔkɔɔ
Ankaa
Yɛlo
Ahabanmono
Teal a ɛyɛ fɛ
Cyan

Sɛnea wubetumi de eyinom adi dwuma wɔ wo Sass mu ni:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Kɔla mfaso adesua ahorow nso wɔ hɔ ma nhyehyɛe colorne background-color.

Daakye, yɛbɛbɔ yɛn tirim sɛ yɛde Sass maps ne variables bɛma shades a ɛwɔ kɔla biara mu sɛnea yɛayɛ wɔ grayscale kɔla ahorow a ɛwɔ ase ha no ho no.

Asɛmti kɔla ahorow

Yɛde kɔla nyinaa subset di dwuma de yɛ kɔla palette ketewa bi a yɛde yɛ kɔla nhyehyɛe, a ɛsan nso wɔ hɔ sɛ Sass variables ne Sass map wɔ Bootstraps scss/_variables.scssfael no mu.

Mfiaseɛ
Nea ɛto so abien
Nkunimdie
Ɔhaw a ɛbɛtumi aba
Kɔkɔbɔ
Info
Kanea
Sum

Grays a ɛyɛ fɛ

Gray variables a ɛtrɛw ne Sass map wɔ mu scss/_variables.scssma gray shades a ɛkɔ so daa wɔ wo project no nyinaa mu.

100 na ɛwɔ hɔ
200 na ɛwɔ hɔ
300 na ɛwɔ hɔ
400 na ɛwɔ hɔ
500 na ɛwɔ hɔ
600 na ɛwɔ hɔ
700 na ɛwɔ hɔ
800 na ɛwɔ hɔ
900 na ɛwɔ hɔ

Wɔ scss/_variables.scss, mu no, wubehu Bootstrap no kɔla nsakrae ne Sass map. $colorsSass asase mfonini no ho nhwɛso ni:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Fa gyinapɛn ahorow ka ho, yi, anaa sesa wɔ map no mu na ama woatumi ayɛ sɛnea wɔde di dwuma wɔ nneɛma afoforo pii mu no foforo. Awerɛhosɛm ne sɛ saa bere yi, ɛnyɛ component biara na ɛde Sass map yi di dwuma. Daakye nsɛm foforo bɛbɔ mmɔden sɛ ɛbɛma eyi atu mpɔn. Enkosi saa bere no, yɛ nhyehyɛe sɛ wode ${color}nsakrae ahorow no ne Sass asase mfonini yi bedi dwuma.

Nneɛma a ɛwom

Bootstrap no afã horow ne utilities no pii yɛ nea wɔde @eachloops a ɛsan yɛ bio wɔ Sass map so na ɛkyekye. Eyi boa titiriw ma generating variants of a component by yɛn $theme-colorsna yɛbɔ mmuae variants ma breakpoint biara. Bere a woreyɛ Sass maps yi ho nhyehyɛe na woasan aboaboa ano no, wubehu wo nsakrae no a ɛda adi wɔ saa loop ahorow yi mu no ara kwa.

Nneɛma a Wɔsesa

Bootstrap no afã horow no pii yɛ nea wɔde base-modifier class kwan na ɛkyekye. Wei kyerɛ sɛ styling no fã kɛse no ara wɔ base class (sɛ nhwɛso no, .btn) bere a style nsakrae ahorow no wɔ modifier classes (sɛ nhwɛso no, .btn-danger) nkutoo mu. Saa modifier classes yi wɔasi firi $theme-colorsmap no so de yɛ customizing nɔma ne din a yɛn modifier classes no.

Nhwɛsoɔ mmienu a ɛkyerɛ sɛdeɛ yɛ loop wɔ $theme-colorsmap no so de yɛ modifiers ma .alertcomponent no ne yɛn .bg-*background utilities nyinaa nie.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Mmuae a wɔde ma

Saa Sass loops yi nyɛ kɔla maps nko ara, nso. Wubetumi nso ayɛ wo components anaa utilities no mu nsakrae a ɛyɛ mmuae. Fa nhwɛsoɔ yɛn responsive text alignment utilities a yɛde @eachloop bi frafra $grid-breakpointsSass map no ne media query bi ka ho.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Sɛ ɛsɛ sɛ wosakra wo $grid-breakpoints, wo nsakrae no bɛfa loop ahorow a ɛresan ayɛ wɔ saa asase mfonini no so no nyinaa ho.

CSS nsakrae ahorow

Bootstrap 4 no de bɛyɛ CSS amanne agyapade (variables) bɛyɛ dumien abien ka ne CSS a wɔaboaboa ano no ho. Eyinom ma ɛyɛ mmerɛw sɛ wubenya gyinapɛn ahorow a wɔtaa de di dwuma te sɛ yɛn asɛmti kɔla ahorow, breakpoints, ne font stacks titiriw bere a woreyɛ adwuma wɔ wo browser no Inspector, code sandbox, anaa general prototyping mu no.

Nneɛma a ɛsakra a ɛwɔ hɔ

Nsakraeɛ a yɛde ka ho no ni (hyɛ no nsow sɛ the :rootis required). Wɔwɔ yɛn _root.scssfael no mu.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Nhwɛso ahorow

CSS nsakraeɛ no ma nsakraeɛ a ɛte sɛ Sass nsakraeɛ no, nanso ɛho nhia sɛ wɔboaboa ano ansa na wɔde akɔma browser no. Sɛ nhwɛso no, ha na yɛresan asiesie yɛn krataafa no font ne link styles no denam CSS variables so.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Breakpoint nsakrae ahorow

Bere a mfiase no yɛde breakpoints kaa yɛn CSS variables ho (sɛ nhwɛso no, --breakpoint-md), eyinom ntumi mmoa wɔ media abisade mu , nanso wɔda so ara betumi de adi dwuma wɔ rulesets mu wɔ media abisade mu. Saa breakpoint variables yi da so ara wɔ CSS a wɔaboaboa ano no mu ma akyi nhyiam a wɔde ama sɛ wobetumi de adi dwuma denam JavaScript so. Sua pii wɔ spec no mu.

Nea wɔmfa mmoa mma ho nhwɛso ni:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Na nea wɔfoa so ho nhwɛso ni:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}