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.

Ar an leathanach seo

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 chruthú 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";

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

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 // Optionalalt mar is gá. Molaimid úsáid a bhaint as an stack iomlán iompórtála ónár bootstrap.scssgcomhad mar phointe tosaigh duit.

Mainneachtainí athraitheacha

Cuimsíonn gach athróg Sass i Bootstrap an !defaultbhratach 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 !defaultbhratach. 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-coloragus colordon 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/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

Déan arís mar is gá d'aon athróg i Bootstrap, lena n-áirítear na roghanna domhanda thíos.

Cuir tús le Bootstrap trí npm lenár dtionscadal tosaithe! Téigh go dtí an stór teimpléad twbs/bootstrap-npm-starter chun féachaint conas Bootstrap a thógáil agus a shaincheapadh i do thionscadal npm féin. Áirítear leis na deilbhíní tiomsaitheoir Sass, Autoprefixer, Stylelint, PurgeCSS agus Bootstrap.

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 !defaultbhratach 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-colorsléarscáil mar athróga neamhspleácha. Chun dath atá ar ár $theme-colorslé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-colorslé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-colorslé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 nach mór duit a chur isteach $theme-colorsidir ár riachtanais díreach tar éis a shainmhínithe i variablesagus roimh a úsáid i 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

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 dangereochracha ó $theme-colorsle 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 riachtanais chodarsnachta na dTreoirlínte um Inrochtaineacht Ábhar Gréasáin (WCAG) a chomhlíonadh, ní mór d’údair codarsnacht datha téacs íosta de 4.5:1 a sholáthar agus codarsnacht dathanna neamhthéacs de 3:1 , gan ach fíorbheagán eisceachtaí.

Chun cabhrú leis seo, chuireamar an color-contrastfheidhm san áireamh i Bootstrap. Úsáideann sé algartam cóimheas codarsnachta WCAG chun tairseacha codarsnachta a ríomh bunaithe ar luminance coibhneasta i spás datha chun dath codarsnachta éadrom ( ), dorcha ( ) nó dubh ( ) sRGBa 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-colorslé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-svgbhfeidhm chun éalú ó <, >agus #carachtair le haghaidh íomhánna cúlra SVG. Agus an escape-svgfheidhm á húsáid, ní mór URIanna sonraí a lua.

Feidhmeanna Suimithe agus Dealaigh

Bainimid úsáid as an addagus subtractfeidhmeanna 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” 0isteach i calcslonn. 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-schemefá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
  }
}