Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

Sass ye

Baara kɛ ni an ka source Sass files ye walasa ka nafa sɔrɔ variables, maps, mixins, ani functions la walasa k’aw dɛmɛ ka jɔ teliya la ani ka aw ka projet kɛ ka kɛɲɛ ni aw yɛrɛ sago ye.

Nin ɲɛ in kan

Baara kɛ ni an ka source Sass files ye walasa ka nafa sɔrɔ variables, maps, mixins ani fɛn wɛrɛw la.

Dosiyew sigicogo

Ni aw bɛ se tuma o tuma, aw kana Bootstrap ka filenw kolomaw sɛmɛntiya. Sass fɛ, o kɔrɔ ye k'i yɛrɛ ka stylesheet (fɔlikan) Dabɔ min bɛ Bootstrap (Bootstrap) Ladon walasa i ka Se k'a Lakodɔn k'a janya. Ni an y’a miiri ko i bɛ baara kɛ ni pake ɲɛmɔgɔ ye i n’a fɔ npm, i bɛna filen dɔ sɔrɔ min bɛ i n’a fɔ nin:

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

N’i ​​y’an ka source files telesarse ani n’i tɛ baara kɛ ni package manager ye, i b’a fɛ ka fɛn dɔ Dabɔ i bolo fɛ min ni o jɔcogo bɛ Taa ɲɔgɔn fɛ, ka Bootstrap ka source files To u dan na ni i yɛrɛ ta ye.

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

Import kɛli

I ka custom.scss, i bɛ Bootstrap ka source Sass filew ladon. Sugandili fila bɛ aw bolo: Bootstrap bɛɛ don a kɔnɔ, walima aw mago bɛ yɔrɔ minnu na, aw bɛ olu ta. An bɛ dusu don o labanw kɔnɔ, hali n’a y’a sɔrɔ aw k’a dɔn ko wajibi dɔw ni fɛn dɔw bɛ yen minnu bɛ tali kɛ an ka yɔrɔw bɛɛ la. Aw fana bɛna a ɲini ka JavaScript dɔw Dòn an ka 'pluginw na.

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

Ni o sigicogo in bɛ sen na, i bɛ se ka daminɛ ka Sass fɛn caman sɛmɛntiya ani ka kartiw dɔw ladilan i ka custom.scss. Aw bɛ se fana ka Bootstrap yɔrɔ dɔw farali daminɛ // Optionaldakun jukɔrɔ i n’a fɔ aw mago bɛ cogo min na. An b’a Fɔ ko i ka baara Kɛ ni import stack dafalen ye ka Bɔ an ka bootstrap.scssdosiye la k’a Kɛ i ka daminɛyɔrɔ ye.

Defaults (dafalenw) bεε bε Yεlεma

Sass bεε bε Bootstrap kɔnɔ, !defaultdarapo bε yen min b’a To i bε se ka bεnkansεbεn nafama bεε bε bεn i yɛrɛ ka Sass kɔnɔ k’a sɔrɔ i ma Bootstrap ka source code bε Yεlεma. Yɛlɛmafɛnw kopi kɛ ani k’u nɔrɔ i n’a fɔ a mago bɛ cogo min na, k’u nafaw sɛmɛntiya, ani ka !defaultdarapo bɔ. Ni fɛn dɔ bɛ Di a ma kaban, o tuma a tɛna Segin ka Di a ma ni nafaw ye minnu bɛ Bootstrap kɔnɔ.

Aw bɛ Bootstrap ka fɛn caman sɛgɛsɛgɛli dafalen sɔrɔ scss/_variables.scss. Yɛlɛma dɔw bɛ sigi null, o fɛn caman tɛ bɔ nafolo la fo n’u bɛ wuli ka bɔ i ka labɛnni na.

Variable overrides ka kan ka na an ka functions (donni) kɔfɛ, nka sanni imports (donni) tɔw ka na.

Nin ye misali ye min bɛ fɛn caman Changer background-colorani colorfor the <body>ni i bɛ Bootstrap don ani ka a lajɛ npm fɛ:

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

Aw bɛ segin a kan i n’a fɔ a mago bɛ fɛn o fɛn na Bootstrap kɔnɔ, diɲɛ sugandiliw fana sen bɛ o la minnu bɛ duguma.

Aw ye Bootstrap daminɛ npm fɛ ni an ka daminɛ porozɛ ye! Aw bɛ taa twbs/bootstrap-npm-starter jatebɔyɔrɔ la walasa ka Bootstrap jɔcogo n’a labɛncogo lajɛ aw yɛrɛ ka npm porozɛ kɔnɔ. Sass daɲɛgafe, Autoprefixer, Stylelint, PurgeCSS ani Bootstrap Icons bɛ yen.

Kartiw ni loopuw

Bootstrap kɔnɔ, Sass karti damadɔ bɛ yen, nafa fila-fila minnu b’a to a ka nɔgɔn ka CSS ni ɲɔgɔn cɛ denbayaw lawuli. An bɛ baara kɛ ni Sass kartiw ye an ka kulɛriw, grid breakpoints ani fɛn wɛrɛw kama. I n’a fɔ Sass bεε bε bεn cogo min na, Sass kartiw bεε la, !defaultdarapo bε yen wa u bε se ka bεn ani ka janya.

An ka Sass karti dɔw bɛ fara ɲɔgɔn kan ka kɛ lankolonw ye ka kɛɲɛ ni u ka daminɛ ye. O bɛ kɛ walasa ka sira di Sass karti dilen dɔ bonya nɔgɔya ma, nka a bɛ na ni musaka ye min bɛ kɛ sababu ye ka fɛnw bɔ karti dɔ kɔnɔ ka gɛlɛya dɔɔnin.

Karti ladilan

Yɛlɛma minnu bɛ $theme-colorskarti kɔnɔ, olu bɛɛ ɲɛfɔlen don i n’a fɔ fɛn caman b’u yɛrɛ la. Walasa ka kulɛri dɔ sɛmɛntiya min bɛ an ka $theme-colorskarti kɔnɔ, i ka ninnu fara i ka Sass file ladamulen kan:

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

Kɔfɛ, o fɛn caman bɛ Sìgi Bootstrap ka $theme-colorskarti kan:

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

A fara a kan karti kan

Kulɛri kuraw fara $theme-colors, walima karti wɛrɛ kan, i kɛtɔ ka Sass karti kura dilan ni i ka ladamu nafaw ye ani k’a fara ɲɔgɔn kan ni karti fɔlɔ ye. O cogo la, an bɛna $custom-colorskarti kura dɔ Dabɔ k’a fara ɲɔgɔn kan ni $theme-colors.

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

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

Aw bɛ bɔ karti kan

Walasa ka kulɛriw bɔ $theme-colors, walima karti wɛrɛ la, baara kɛ ni map-remove. Aw k’a dɔn ko aw ka kan ka don $theme-colorsan ka ɲininiw cɛ a ɲɛfɔli kɔfɛ dɔrɔn variablesa baaracogo la ani ka kɔn a baara ɲɛ 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

Kilisi wajibiyalenw

Bootstrap bɛ a miiri ko kilisi kɛrɛnkɛrɛnnen dɔw bɛ Sass kartiw kɔnɔ i n’a fɔ an yɛrɛ bɛ baara kɛ cogo min na ani k’u janya. Ni i bɛ karti minnu bɛ a kɔnɔ, i bɛ olu kɛ ka kɛɲɛ ni i yɛrɛ sago ye, i bɛ se ka filiw sɔrɔ yɔrɔ min na Sass karti kɛrɛnkɛrɛnnen dɔ ka kilisi bɛ baara kɛ.

Misali la, an bɛ baara Kɛ ni primary, success, ani dangerbutɔnw ye minnu bɛ Bɔ ka $theme-colorsɲɛsin jɛgɛnsira, butɔni ani foroko cogoyaw ma. Nin kilisi ninnu nafaw falen-falen man kan ka ko si jira, nka n’i y’u bɔ, o bɛ se ka kɛ sababu ye ka Sass ka jatebɔko gɛlɛyaw lase. O ko ninnu na, i b’a fɛ ka Sass kode caman sɛmɛntiya min bɛ baara kɛ ni o nafaw ye.

Baarakɛcogo

Kulɛriw

Sass karti minnu bɛ an bolo, olu kɛrɛfɛ, barokun kulɛriw fana bɛ se ka kɛ fɛn caman sɛgɛsɛgɛli ye, i n’a fɔ $primary.

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

Aw bɛ se ka kulɛriw yeelen walima ka dibi kɛ ni Bootstrap's tint-color()ani shade-color()baarakɛcogo ye. O baarakɛcogo ninnu bɛna kulɛriw ɲagami ni nɛrɛ walima nɛrɛmuguma ye, a tɛ i n’a fɔ Sass ka native lighten()ani darken()baarakɛcogo minnu bɛna yeelen caman Changer ni hakɛ latigɛlen ye, o min ka teli ka na ni nɔ ɲininen ye.

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

Tiɲɛ na, i tun bɛna baarakɛcogo wele ka tɛmɛ kulɛri ni girinya paramɛtɛrɛw la.

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

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

Kulɛriw danfara

Walasa ka se ka Web Content Accessibility Guidelines (WCAG) danfara wajibiyalenw dafa, sɛbɛnnikɛlaw ka kan ka sɛbɛnni kulɛri danfara dɔgɔmannin di min ye 4,5:1 ye ani kulɛri minnu tɛ sɛbɛnni tɛ minnu na, olu danfara dɔgɔyalenba ye 3:1 ye , ni danfara dɔɔnin dɔrɔn de bɛ yen.

Walasa ka dɛmɛ don o la, an ye color-contrastbaarakɛcogo in don Bootstrap kɔnɔ. A bɛ baara Kɛ ni WCAG danfara-jatebɔ-algorisimu ye walasa ka danfara-dakunw jatebɔ ka Da yeelen danfaralen kan kulɛri yɔrɔ dɔ la walasa ka yeelen ( ), dibi ( ) walima nɛrɛ ( ) danfara kulɛri sRGBsegin a yɛrɛma ka da basigi kulɛri kofɔlen kan. Nin baara in nafa ka bon kɛrɛnkɛrɛnnenya la mixins walima loops (lupulu) la i bɛ kalasi caman lawuli yɔrɔ minnu na.#fff#212529#000

Misali la, walasa ka kulɛriw sɛgɛsɛgɛli kɛ ka bɔ an ka $theme-colorskarti la:

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

A bɛ se ka kɛ fana danfara magow la minnu bɛ kɛ siɲɛ kelen:

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

Aw bɛ se fana ka basigi kulɛri dɔ jira ni an ka kulɛri karti baarakɛcogo ye:

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

Boli SVG la

An bɛ baara kɛ ni escape-svgbaarakɛcogo ye walasa ka boli <, >ani #taamasiyɛnw SVG kɔkanna jaw kama. Ni baara bɛ kɛ ni escape-svgbaarakɛcogo ye, data URIw ka kan ka fɔ.

Fàra ni Bɔ baarakɛcogo kan

An bɛ baara Kɛ ni addani subtractbaarakɛcogo ye walasa ka CSS calcbaarakɛcogo Lamini. O baara ninnu kun fɔlɔ ye ka filiw bali ni “unitless” 0nafa dɔ tɛmɛna ka don calcfɔcogo dɔ la. Fɔcogo minnu bɛ i n’a fɔ calc(10px - 0)olu bɛna fili dɔ Lasegin navigatɔrɔw bɛɛ la, hali n’u ye jatebɔ siratigɛ la tiɲɛ ye.

Misali la, calc bɛ baara kɛ yɔrɔ min na:

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

Misali la, calc tɛ baara kɛ yɔrɔ min na:

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

Mixinw (Mixins).

An ka scss/mixins/ɲɛbilasɛbɛn kɔnɔ, mixins tɔni kelen bɛ yen minnu bɛ Bootstrap yɔrɔ dɔw fanga di ani u bɛ se ka baara kɛ ni u ye fana i yɛrɛ ka porozɛ kɔnɔ.

Kulɛriw cogoyaw

Mixin surun dɔ bɛ sɔrɔ prefers-color-schememedia ɲininkali kama ni dɛmɛ ye light, dark, ani custom color schemes.

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