Sass
Jiri faịlụ Sass isi mmalite anyị were uru nke mgbanwe, maapụ, mixins na ọrụ nyere gị aka wuo ngwa ngwa na hazie ọrụ gị.
Jiri faịlụ Sass isi mmalite anyị were ohere mgbanwe, maapụ, mixins na ndị ọzọ.
Ọdịdị faịlụ
Mgbe ọ bụla enwere ike, zere imegharị faịlụ isi Bootstrap. Maka Sass, nke ahụ pụtara ịmepụta ụdị gị nke na-ebubata Bootstrap ka ị nwee ike gbanwee ma gbasaa ya. Na-eche na ị na-eji njikwa ngwugwu dị ka npm, ị ga-enwe nhazi faịlụ nke dị ka nke a:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Ọ bụrụ na ị budatala faịlụ isi mmalite anyị ma ị naghị eji njikwa ngwugwu, ị ga-achọ iji aka gị hazie ihe yiri usoro ahụ, debe faịlụ isi mmalite Bootstrap na nke gị.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Na-ebubata
Na nke gị custom.scss
, ị ga-ebubata faịlụ Sass isi mmalite Bootstrap. Ị nwere nhọrọ abụọ: tinye ihe niile Bootstrap, ma ọ bụ họrọ akụkụ ndị ị chọrọ. Anyị na-akwado nke ikpeazụ, n'agbanyeghị na mara na e nwere ụfọdụ ihe a chọrọ na adabere na akụkụ anyị. Ị ga-achọkwa itinye ụfọdụ Javascript maka plugins anyị.
// 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
Site na ntọala ahụ, ị nwere ike ịmalite gbanwee mgbanwe Sass ọ bụla na maapụ gị custom.scss
. Ị nwekwara ike ịmalite itinye akụkụ nke Bootstrap n'okpuru // Optional
ngalaba dịka ọ dị mkpa. Anyị na-atụ aro ka iji nchịkọta mbubata zuru ezu sitere na bootstrap.scss
faịlụ anyị ka mmalite gị.
Ndabara dị iche iche
Sass ọ bụla na-agbanwe na Bootstrap na-agụnye !default
ọkọlọtọ na-enye gị ohere ịkwụsị uru ndabara nke mgbanwe na Sass nke gị na-enweghị gbanwee koodu isi mmalite Bootstrap. Detuo na mado mgbanwe dị ka achọrọ, gbanwee ụkpụrụ ha, wee wepụ !default
ọkọlọtọ. Ọ bụrụ na ekenyelarị mgbanwe, mgbe ahụ, ụkpụrụ ndabara agaghị ekenye ya ọzọ na Bootstrap.
Ị ga-ahụ ndepụta zuru oke nke mgbanwe Bootstrap na scss/_variables.scss
. Adobere ụfọdụ mgbanwe na null
, mgbanwe ndị a anaghị ewepụta ihe onwunwe ma ọ bụrụ na ewepụghị ha na nhazi gị.
Mgbanwe mgbanwe ga-abịarịrị mgbe ebubata ọrụ anyị, mana tupu mbubata ndị ọzọ.
Nke a bụ ọmụmaatụ na-agbanwe background-color
na color
maka <body>
mgbe ị na-ebubata ma na-achịkọta Bootstrap site na 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/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Tinyegharịa dịka ọ dị mkpa maka mgbanwe ọ bụla na Bootstrap, gụnyere nhọrọ zuru ụwa ọnụ n'okpuru.
Maapụ na loops
Bootstrap gụnyere maapụ Sass ole na ole, isi uru ụzọ abụọ na-eme ka ọ dịrị mfe ịmepụta ezinụlọ CSS nwere njikọ. Anyị na-eji maapụ Sass maka agba anyị, ebe nkwụsịtụ grid na ndị ọzọ. Dịka mgbanwe Sass, maapụ Sass niile gụnyere !default
ọkọlọtọ na enwere ike ịkagbu ya ma gbatịa ya.
Ụfọdụ maapụ Sass anyị jikọtara ọnụ na nke efu na ndabara. Emere nke a ka o kwe ka mgbasawanye nke maapụ Sass dị mfe, mana ọ na-abịa na ọnụ ahịa iji mee ka iwepụ ihe na maapụ sie ike karị.
Megharịa map
A kọwapụtara mgbanwe niile dị na $theme-colors
maapụ dị ka mgbanwe kwụụrụ onwe ya. Ka ịgbanwee agba dị na $theme-colors
maapụ anyị, tinye ihe ndị a na faịlụ Sass gị:
$primary: #0074d9;
$danger: #ff4136;
Ka emechara, edobere mgbanwe ndị a na $theme-colors
maapụ Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Tinye na map
Tinye agba ọhụrụ na $theme-colors
, ma ọ bụ maapụ ọ bụla ọzọ, site na ịmepụta maapụ Sass ọhụrụ yana ụkpụrụ omenala gị wee jikọta ya na maapụ mbụ. N'okwu a, anyị ga-emepụta $custom-colors
maapụ ọhụrụ wee jikọta ya na $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Wepu na maapụ
Iji wepu agba na $theme-colors
, ma ọ bụ maapụ ọ bụla ọzọ, jiri map-remove
. Mara na ị ga-etinyerịrị ya n'etiti ihe achọrọ na nhọrọ anyị:
// 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
Igodo achọrọ
Bootstrap na-eche na ọnụnọ ụfọdụ igodo dị n'ime maapụ Sass ka anyị na-eji wee gbasaa ndị a n'onwe anyị. Ka ị na-ahazi maapụ ndị agbakwunyere, ị nwere ike izute mperi ebe a na-eji igodo Sass akọwapụtara.
Dịka ọmụmaatụ, anyị na-eji igodo primary
, success
, na danger
igodo sitere na $theme-colors
njikọ, bọtịnụ, na steeti ụdị. Dochie ụkpụrụ nke igodo ndị a ekwesịghị iwepụta nsogbu ọ bụla, mana iwepu ha nwere ike bute nsogbu mkpokọta Sass. N'ọnọdụ ndị a, ị ga-achọ ịgbanwe koodu Sass nke na-eji ụkpụrụ ndị ahụ.
Ọrụ
Agba
Na-esote maapụ Sass anyị nwere, agba isiokwu nwekwara ike iji dị ka mgbanwe kwụ ọtọ, dị ka $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Ị nwere ike iji Bootstrap tint-color()
na shade-color()
ọrụ mee ka agba dị mfe ma ọ bụ gbaa ọchịchịrị. Ọrụ ndị a ga-agwakọta agba na oji ma ọ bụ ọcha, n'adịghị ka Sass 'nwa amaala lighten()
na darken()
ọrụ nke ga-agbanwe ìhè site na ego a kapịrị ọnụ, nke na-adịghị ebutekarị mmetụta achọrọ.
// 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));
}
Na omume, ị ga-akpọ ọrụ ahụ wee gafere na agba na nha nha.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Agba dị iche
Iji zute ụkpụrụ nnweta WCAG 2.0 maka ọdịiche agba , ndị na-ede akwụkwọ ga -eweta oke ọdịiche nke opekata mpe 4.5: 1 , ma ewezuga ihe dị ole na ole.
Ọrụ ọzọ anyị gụnyere na Bootstrap bụ ọrụ ọdịiche agba, color-contrast
. Ọ na-eji WCAG 2.0 algọridim maka ịgbakọ ọnụ ụzọ dị iche dabere na ọkụ ọkụ na oghere sRGB
agba iji weghachi ọkụ na-akpaghị aka ( #fff
), ọchịchịrị ( #212529
) ma ọ bụ ojii ( #000
) agba ọdịiche dabere na agba agba akọwapụtara. Ọrụ a bara uru karịsịa maka mixins ma ọ bụ loops ebe ị na-emepụta ọtụtụ klaasị.
Dịka ọmụmaatụ, iji mepụta swatches agba na $theme-colors
maapụ anyị:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Enwere ike iji ya maka mkpa iche iche nke otu oge:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Ị nwekwara ike ịkọwapụta agba isi na ọrụ maapụ agba anyị:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Wepụ SVG
Anyị na-eji escape-svg
ọrụ ahụ gbanarị <
, >
na #
mkpụrụedemede maka onyonyo ndabere SVG. Mgbe ị na-eji escape-svg
ọrụ ahụ, a ga-ehotarịrị URI data.
Tinye na Wepụ ọrụ
Anyị na-eji add
na subtract
ọrụ kechie ọrụ CSS calc
. Ebumnuche bụ isi nke ọrụ ndị a bụ iji zere njehie mgbe 0
uru "unitless" na-agafe na calc
nkwupụta. Okwu dị ka calc(10px - 0)
ga-eweghachi mperi na ihe nchọgharị niile, n'agbanyeghị na ọ bụ eziokwu na mgbakọ na mwepụ.
Ọmụmaatụ ebe calc dị irè:
$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);
}
Ọmụmaatụ ebe calc adịghị mma:
$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);
}
Ngwakọta
Akwụkwọ scss/mixins/
ndekọ aha anyị nwere ọtụtụ mixins na-eme ka akụkụ nke Bootstrap nwee ike ma nwee ike iji ya gafee ọrụ nke gị.
Atụmatụ agba
Ngwakọta mkpirisi maka prefers-color-scheme
ajụjụ mgbasa ozi dị na nkwado maka light
, dark
, na atụmatụ agba agba.
@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
}
}