Sass

Defnyddiwch ein ffeiliau ffynhonnell Sass i fanteisio ar newidynnau, mapiau, cymysgeddau a swyddogaethau i'ch helpu chi i adeiladu'n gyflymach ac addasu'ch prosiect.

Ar y dudalen hon

Defnyddiwch ein ffeiliau ffynhonnell Sass i fanteisio ar newidynnau, mapiau, cymysgeddau, a mwy.

Strwythur ffeil

Lle bynnag y bo modd, ceisiwch osgoi addasu ffeiliau craidd Bootstrap. Ar gyfer Sass, mae hynny'n golygu creu eich taflen arddull eich hun sy'n mewnforio Bootstrap fel y gallwch ei addasu a'i ymestyn. Gan dybio eich bod yn defnyddio rheolwr pecyn fel npm, bydd gennych strwythur ffeil sy'n edrych fel hyn:

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

Os ydych chi wedi lawrlwytho ein ffeiliau ffynhonnell ac nad ydych chi'n defnyddio rheolwr pecyn, byddwch chi eisiau creu rhywbeth tebyg i'r strwythur hwnnw â llaw, gan gadw ffeiliau ffynhonnell Bootstrap ar wahân i'ch rhai chi.

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

Mewnforio

Yn eich custom.scss, byddwch yn mewnforio ffeiliau Sass ffynhonnell Bootstrap. Mae gennych ddau opsiwn: cynhwyswch yr holl Bootstrap, neu dewiswch y rhannau sydd eu hangen arnoch chi. Rydym yn annog yr olaf, ond byddwch yn ymwybodol bod rhai gofynion a dibyniaethau ar draws ein cydrannau. Bydd angen i chi hefyd gynnwys rhai JavaScript ar gyfer ein ategion.

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

Gyda'r gosodiad hwnnw yn ei le, gallwch chi ddechrau addasu unrhyw un o'r newidynnau a mapiau Sass yn eich ffeil custom.scss. Gallwch hefyd ddechrau ychwanegu rhannau o Bootstrap o dan yr // Optionaladran yn ôl yr angen. Rydym yn awgrymu defnyddio'r pentwr mewnforio llawn o'n bootstrap.scssffeil fel eich man cychwyn.

Rhagosodiadau newidiol

Mae pob newidyn Sass yn Bootstrap yn cynnwys y !defaultfaner sy'n eich galluogi i ddiystyru gwerth rhagosodedig y newidyn yn eich Sass eich hun heb addasu cod ffynhonnell Bootstrap. Copïwch a gludwch newidynnau yn ôl yr angen, addaswch eu gwerthoedd, a thynnu'r !defaultfaner. Os oes newidyn wedi'i neilltuo eisoes, ni fydd yn cael ei ail-neilltuo gan y gwerthoedd rhagosodedig yn Bootstrap.

Fe welwch restr gyflawn o newidynnau Bootstrap yn scss/_variables.scss. Mae rhai newidynnau wedi'u gosod i null, nid yw'r newidynnau hyn yn allbynnu'r priodwedd oni bai eu bod yn cael eu diystyru yn eich ffurfweddiad.

Rhaid i wrthwneud newidiol ddod ar ôl i'n swyddogaethau gael eu mewnforio, ond cyn gweddill y mewnforion.

Dyma enghraifft sy'n newid yr background-colorac colorar gyfer y <body>wrth fewnforio a llunio Bootstrap trwy 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

Ailadroddwch yn ôl yr angen ar gyfer unrhyw newidyn yn Bootstrap, gan gynnwys yr opsiynau cyffredinol isod.

Dechreuwch gyda Bootstrap trwy npm gyda'n prosiect cychwynnol! Ewch i ystorfa templedi twbs/bootstrap-npm-starter i weld sut i adeiladu ac addasu Bootstrap yn eich prosiect npm eich hun. Yn cynnwys Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ac Eiconau Bootstrap.

Mapiau a dolenni

Mae Bootstrap yn cynnwys llond llaw o fapiau Sass, parau gwerth allweddol sy'n ei gwneud hi'n haws cynhyrchu teuluoedd o CSS cysylltiedig. Rydym yn defnyddio mapiau Sass ar gyfer ein lliwiau, torbwyntiau grid, a mwy. Yn union fel newidynnau Sass, mae holl fapiau Sass yn cynnwys y !defaultfaner a gellir eu diystyru a'u hymestyn.

Mae rhai o'n mapiau Sass yn cael eu huno i rai gwag yn ddiofyn. Gwneir hyn er mwyn caniatáu ehangu hawdd ar fap Sass penodol, ond daw ar y gost o wneud tynnu eitemau o fap ychydig yn anoddach.

Addasu map

Diffinnir yr holl newidynnau yn y $theme-colorsmap fel newidynnau arunig. I addasu lliw presennol yn ein $theme-colorsmap, ychwanegwch y canlynol at eich ffeil Sass arferol:

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

Yn ddiweddarach, mae'r newidynnau hyn wedi'u gosod ar $theme-colorsfap Bootstrap:

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

Ychwanegu at y map

Ychwanegwch liwiau newydd i $theme-colors, neu unrhyw fap arall, trwy greu map Sass newydd gyda'ch gwerthoedd arferol a'i gyfuno â'r map gwreiddiol. Yn yr achos hwn, byddwn yn creu $custom-colorsmap newydd ac yn ei gyfuno ag $theme-colors.

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

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

Tynnu oddi ar y map

I dynnu lliwiau o $theme-colors, neu unrhyw fap arall, defnyddiwch map-remove. Byddwch yn ymwybodol bod yn rhaid i chi fewnosod $theme-colorsrhwng ein gofynion yn union ar ôl ei ddiffiniad yn variablesa chyn ei ddefnyddio yn 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

Allweddi gofynnol

Mae Bootstrap yn rhagdybio presenoldeb rhai allweddi penodol o fewn mapiau Sass wrth i ni ddefnyddio ac ymestyn y rhain ein hunain. Wrth i chi addasu'r mapiau sydd wedi'u cynnwys, efallai y byddwch chi'n dod ar draws gwallau lle mae allwedd map Sass penodol yn cael ei ddefnyddio.

Er enghraifft, rydym yn defnyddio'r primary, success, ac dangerallweddi o $theme-colorsar gyfer dolenni, botymau, a chyflyrau ffurf. Ni ddylai newid gwerthoedd yr allweddi hyn achosi unrhyw broblemau, ond gall eu dileu achosi problemau o ran llunio Sass. Yn yr achosion hyn, bydd angen i chi addasu'r cod Sass sy'n defnyddio'r gwerthoedd hynny.

Swyddogaethau

Lliwiau

Wrth ymyl y mapiau Sass sydd gennym, gellir defnyddio lliwiau thema hefyd fel newidynnau annibynnol, fel $primary.

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

Gallwch ysgafnhau neu dywyllu lliwiau gyda Bootstrap tint-color()a shade-color()swyddogaethau. Bydd y swyddogaethau hyn yn cymysgu lliwiau gyda du neu wyn, yn wahanol i frodorol Sass lighten()a darken()swyddogaethau a fydd yn newid yr ysgafnder gan swm penodol, nad yw'n aml yn arwain at yr effaith a ddymunir.

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

Yn ymarferol, byddech chi'n galw'r swyddogaeth ac yn pasio'r paramedrau lliw a phwysau.

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

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

Cyferbyniad lliw

Er mwyn bodloni gofynion cyferbyniad Canllawiau Hygyrchedd Cynnwys Gwe (WCAG) , rhaid i awduron ddarparu cyferbyniad lliw testun lleiaf o 4.5:1 ac isafswm cyferbyniad lliw di-destun o 3:1 , gydag ychydig iawn o eithriadau.

I helpu gyda hyn, fe wnaethom gynnwys y color-contrastswyddogaeth yn Bootstrap. Mae'n defnyddio algorithm cymhareb cyferbyniad WCAG ar gyfer cyfrifo trothwyon cyferbyniad yn seiliedig ar oleuedd cymharol mewn sRGBgofod lliw i ddychwelyd lliw cyferbyniad golau ( #fff), tywyll ( #212529) neu ddu ( #000) yn awtomatig yn seiliedig ar y lliw sylfaen penodedig. Mae'r swyddogaeth hon yn arbennig o ddefnyddiol ar gyfer cymysgeddau neu ddolenni lle rydych chi'n cynhyrchu dosbarthiadau lluosog.

Er enghraifft, i gynhyrchu swatches lliw o'n $theme-colorsmap:

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

Gellir ei ddefnyddio hefyd ar gyfer anghenion cyferbyniad untro:

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

Gallwch hefyd nodi lliw sylfaenol gyda'n swyddogaethau map lliw:

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

Dianc SVG

Rydym yn defnyddio'r escape-svgswyddogaeth i ddianc rhag y <, >a'r #cymeriadau ar gyfer delweddau cefndir SVG. Wrth ddefnyddio'r escape-svgswyddogaeth, rhaid dyfynnu URI data.

Swyddogaethau Adio a Thynnu

Rydym yn defnyddio'r adda subtractswyddogaethau i lapio'r calcswyddogaeth CSS. Prif bwrpas y swyddogaethau hyn yw osgoi gwallau pan fo gwerth “unigol” 0yn cael ei drosglwyddo i calcfynegiad. Bydd mynegiadau fel calc(10px - 0)yn dychwelyd gwall ym mhob porwr, er eu bod yn fathemategol gywir.

Enghraifft lle mae'r calc yn ddilys:

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

Enghraifft lle mae'r calc yn annilys:

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

cymysgeddau

Mae gan ein scss/mixins/cyfeiriadur dunnell o gymysgeddau sy'n pweru rhannau o Bootstrap a gellir eu defnyddio hefyd ar draws eich prosiect eich hun.

Cynlluniau lliw

Mae mixin llaw-fer ar gyfer yr prefers-color-schemeymholiad cyfryngau ar gael gyda chefnogaeth ar gyfer light, dark, a chynlluniau lliw personol.

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