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.
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ɔ sigi sen kan i bolo fɛ min ni o jɔcogo bɔlen don, 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";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";
// 5. 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ɛ // Optional
dakun 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.scss
dosiye la k’a Kɛ i ka daminɛyɔrɔ ye.
Defaults (dafalenw) bεε bε Yεlεma
Sass bεε bε Bootstrap kɔnɔ, !default
darapo 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 !default
darapo 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-color
ani color
for 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/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.
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, !default
darapo 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-colors
karti 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-colors
karti 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-colors
karti 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-colors
karti 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 k’a don an ka ɲininiw ni sugandiliw cɛ:
// 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";
// 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 danger
butɔ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 WCAG 2.0 sɔrɔli sariyaw dafa kulɛri danfara la , sɛbɛnnikɛlaw ka kan ka danfara hakɛ di min bɛ se 4,5:1 ma a dɔgɔyalenba la , ni danfara dɔɔnin dɔrɔn de don.
An bɛ baara wɛrɛ min Kɛ Bootstrap kɔnɔ o ye kulɛri danfara baarakɛcogo ye, color-contrast
. A bɛ baara Kɛ ni WCAG 2.0 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 sRGB
segin 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-colors
karti 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-svg
baarakɛcogo ye walasa ka boli <
, >
ani #
taamasiyɛnw SVG kɔkanna jaw kama. Ni baara bɛ kɛ ni escape-svg
baarakɛcogo ye, data URIw ka kan ka fɔ.
Fàra ni Bɔ baarakɛcogo kan
An bɛ baara Kɛ ni add
ani subtract
baarakɛcogo ye walasa ka CSS calc
baarakɛcogo Lamini. O baara ninnu kun fɔlɔ ye ka filiw bali ni “unitless” 0
nafa dɔ tɛmɛna ka don calc
fɔ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-scheme
media ɲ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
}
}