Sass
Bain úsáid as ár gcomhaid fhoinse Sass chun leas a bhaint as athróga, léarscáileanna, meascáin, agus feidhmeanna chun cabhrú leat do thionscadal a thógáil níos tapúla agus a shaincheapadh.
Bain úsáid as ár gcomhaid fhoinse Sass chun leas a bhaint as athróga, léarscáileanna, meascáin, agus go leor eile.
Struchtúr comhaid
Nuair is féidir, seachain comhaid lárnacha Bootstrap a mhodhnú. Do Sass, ciallaíonn sé sin do stílbhileog féin a chruthú a allmhairíonn Bootstrap ionas gur féidir leat é a mhodhnú agus a shíneadh. Ag glacadh leis go bhfuil tú ag baint úsáide as bainisteoir pacáiste cosúil le npm, beidh struchtúr comhaid agat a bhfuil cuma mar seo air:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Má tá ár gcomhaid foinse íoslódáilte agat agus mura bhfuil bainisteoir pacáiste in úsáid agat, beidh tú ag iarraidh rud éigin cosúil leis an struchtúr sin a shocrú de láimh, ag coinneáil comhaid foinse Bootstrap ar leithligh ó do chuid féin.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Iompórtáil
I do custom.scss
, iompórtálfaidh tú comhaid Sass foinse Bootstrap. Tá dhá rogha agat: cuir Bootstrap san áireamh, nó roghnaigh na codanna atá uait. Spreagaimid an dara ceann, ach a bheith ar an eolas go bhfuil roinnt riachtanas agus spleáchais ar fud ár gcomhpháirteanna. Beidh ort roinnt JavaScript a chur san áireamh freisin dár bhforlíontáin.
// 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
Agus an socrú sin i bhfeidhm, is féidir leat tosú ar aon cheann de na hathróga agus na léarscáileanna Sass i do custom.scss
. Is féidir leat tosú freisin le codanna de Bootstrap a chur leis faoin // Optional
alt mar is gá. Molaimid úsáid a bhaint as an stack iomlán iompórtála ónár bootstrap.scss
gcomhad mar phointe tosaigh duit.
Mainneachtainí athraitheacha
Cuimsíonn gach athróg Sass i Bootstrap an !default
bhratach a ligeann duit luach réamhshocraithe an athróg a shárú i do Sass féin gan cód foinse Bootstrap a mhodhnú. Cóipeáil agus greamaigh athróga de réir mar is gá, modhnaigh a luachanna, agus bain an !default
bhratach. Má tá athróg sannta cheana féin, ní dhéanfar í a athshannadh de réir na luachanna réamhshocraithe i Bootstrap.
Gheobhaidh tú an liosta iomlán d'athróga Bootstrap i scss/_variables.scss
. Tá roinnt athróg socraithe go null
, ní dhéanann na hathróga seo an t-airí a aschur ach amháin má sháraítear iad i do chumraíocht.
Ní mór sáruithe athraitheacha teacht tar éis ár bhfeidhmeanna a allmhairiú, ach roimh an gcuid eile de na hallmhairí.
Seo sampla a athraíonn an background-color
agus color
don agus <body>
nuair a bhíonn Bootstrap á iompórtáil agus á thiomsú trí 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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Déan arís mar is gá d'aon athróg i Bootstrap, lena n-áirítear na roghanna domhanda thíos.
Léarscáileanna agus lúba
Cuimsíonn Bootstrap dornán de léarscáileanna Sass, péirí eochairluacha a éascaíonn teaghlaigh CSS gaolmhara a ghiniúint. Bainimid úsáid as léarscáileanna Sass le haghaidh ár ndathanna, ár bristephointí greille, agus go leor eile. Díreach cosúil le hathróga Sass, tá an !default
bhratach ar gach léarscáil Sass agus is féidir iad a shárú agus a leathnú.
Déantar cuid dár léarscáileanna Sass a chumasc le cinn fholmha de réir réamhshocraithe. Déantar é seo chun leathnú éasca a dhéanamh ar léarscáil Sass ar leith, ach tagann sé ar an gcostas a bhaineann le míreanna a bhaint as léarscáil a dhéanamh beagán níos deacra.
Léarscáil a mhodhnú
Sainmhínítear gach athróg sa $theme-colors
léarscáil mar athróga neamhspleácha. Chun dath atá ar ár $theme-colors
léarscáil cheana féin a mhodhnú, cuir an méid seo a leanas le do chomhad Sass saincheaptha:
$primary: #0074d9;
$danger: #ff4136;
Níos déanaí, tá na hathróga seo socraithe ar $theme-colors
léarscáil Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Cuir leis an léarscáil
Cuir dathanna nua le $theme-colors
, nó le léarscáil ar bith eile, trí léarscáil Sass nua a chruthú le do luachanna saincheaptha agus é a chumasc leis an mbunléarscáil. Sa chás seo, cruthóimid $custom-colors
léarscáil nua agus déanfaimid é a chumasc le $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Bain den léarscáil
Chun dathanna a bhaint as $theme-colors
, nó as léarscáil ar bith eile, úsáid map-remove
. Bí ar an eolas go gcaithfidh tú é a chur isteach idir ár riachtanais agus ár roghanna:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Eochracha riachtanacha
Glacann Bootstrap leis go bhfuil roinnt eochracha ar leith i láthair laistigh de léarscáileanna Sass de réir mar a d’úsáideamar iad agus mar a leathnaíomar iad féin. De réir mar a shaincheapann tú na léarscáileanna atá san áireamh, seans go dtiocfaidh earráidí ort nuair a bhíonn eochair léarscáile Sass ar leith á húsáid.
Mar shampla, úsáidimid an primary
, success
, agus danger
eochracha ó $theme-colors
le haghaidh naisc, cnaipí, agus stáit fhoirm. Níor cheart go mbeadh fadhb ar bith le hathsholáthar luachanna na n-eochracha seo, ach d’fhéadfadh fadhbanna tiomsú Sass a bheith i gceist má bhaintear iad. Sna cásanna seo, beidh ort an cód Sass a úsáideann na luachanna sin a mhodhnú.
Feidhmeanna
Dathanna
In aice leis na léarscáileanna Sass atá againn, is féidir dathanna téama a úsáid freisin mar athróga neamhspleácha, cosúil le $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Is féidir leat dathanna a éadromú nó a dhorchaigh le feidhmeanna tint-color()
agus shade-color()
feidhmeanna Bootstrap. Meascfaidh na feidhmeanna seo dathanna le dubh nó bán, murab ionann agus dúchais Sass lighten()
agus darken()
feidhmeanna a athróidh an t-éadrom faoi mhéid seasta, rud nach minic a bhíonn mar thoradh ar an éifeacht inmhianaithe.
// 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));
}
Go praiticiúil, ba mhaith leat glaoch ar an fheidhm agus pas a fháil sa paraiméadair dath agus meáchain.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Codarsnacht dathanna
Chun caighdeáin inrochtaineachta WCAG 2.0 maidir le codarsnacht dathanna a bhaint amach, ní mór d’údair cóimheas codarsnachta de 4.5:1 ar a laghad a sholáthar , gan ach fíorbheagán eisceachtaí.
Feidhm bhreise a chuirimid san áireamh i Bootstrap is ea an fheidhm codarsnachta dathanna, color-contrast
. Úsáideann sé algartam WCAG 2.0 chun tairseacha codarsnachta a ríomh bunaithe ar luminance coibhneasta i spás dathanna chun dath codarsnachta éadrom ( ), dorcha ( ) nó dubh ( ) sRGB
a thabhairt ar ais go huathoibríoch bunaithe ar an mbundath sonraithe. Tá an fheidhm seo úsáideach go háirithe le haghaidh meascáin nó lúba ina bhfuil ilranganna á nginiúint agat.#fff
#212529
#000
Mar shampla, chun swatches dathanna a ghiniúint ónár $theme-colors
léarscáil:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Is féidir é a úsáid freisin le haghaidh riachtanais chodarsnachta aonuaire:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Is féidir leat bundath a shonrú freisin lenár bhfeidhmeanna léarscáile datha:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Éalú SVG
Bainimid úsáid as an escape-svg
bhfeidhm chun éalú ó <
, >
agus #
carachtair le haghaidh íomhánna cúlra SVG. Agus an escape-svg
fheidhm á húsáid, ní mór URIanna sonraí a lua.
Feidhmeanna Suimithe agus Dealaigh
Bainimid úsáid as an add
agus subtract
feidhmeanna chun an fheidhm CSS a fhilleadh calc
. Is é príomhchuspóir na bhfeidhmeanna seo ná earráidí a sheachaint nuair a chuirtear luach “gan aonad” 0
isteach i calc
slonn. Tabharfaidh slonn mar calc(10px - 0)
seo earráid ar ais i ngach brabhsálaí, in ainneoin go bhfuil siad ceart go matamaiticiúil.
Sampla ina bhfuil an calc bailí:
$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);
}
Sampla ina bhfuil an calc neamhbhailí:
$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);
}
Meascáin
Tá a lán meascáin inár scss/mixins/
n-eolaire a chumhachtaíonn codanna de Bootstrap agus is féidir iad a úsáid freisin thar do thionscadal féin.
Scéimeanna datha
Tá mixin luathscríbhneoireachta ar prefers-color-scheme
fáil don cheist ó na meáin le tacaíocht do light
, dark
, agus scéimeanna dathanna saincheaptha.
@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
}
}