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.
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 gosod 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";
@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
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 // Optional
adran yn ôl yr angen. Rydym yn awgrymu defnyddio'r pentwr mewnforio llawn o'n bootstrap.scss
ffeil fel eich man cychwyn.
Rhagosodiadau newidiol
Mae pob newidyn Sass yn Bootstrap yn cynnwys y !default
faner 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 !default
faner. 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-color
ac color
ar 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/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.
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 !default
faner 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-colors
map fel newidynnau arunig. I addasu lliw presennol yn ein $theme-colors
map, ychwanegwch y canlynol at eich ffeil Sass arferol:
$primary: #0074d9;
$danger: #ff4136;
Yn ddiweddarach, mae'r newidynnau hyn wedi'u gosod ar $theme-colors
fap 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-colors
map 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 ei fewnosod rhwng ein gofynion a'n hopsiynau:
// 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
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 danger
allweddi o $theme-colors
ar 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 safonau hygyrchedd WCAG 2.0 ar gyfer cyferbyniad lliw , rhaid i awduron ddarparu cymhareb cyferbyniad o 4.5:1 o leiaf , gydag ychydig iawn o eithriadau.
Swyddogaeth ychwanegol rydyn ni'n ei chynnwys yn Bootstrap yw'r swyddogaeth cyferbyniad lliw, color-contrast
. Mae'n defnyddio algorithm WCAG 2.0 ar gyfer cyfrifo trothwyon cyferbyniad yn seiliedig ar oleuedd cymharol mewn gofod lliw sRGB
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-colors
map:
@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-svg
swyddogaeth i ddianc rhag y <
, >
a'r #
cymeriadau ar gyfer delweddau cefndir SVG. Wrth ddefnyddio'r escape-svg
swyddogaeth, rhaid dyfynnu URI data.
Swyddogaethau Adio a Thynnu
Rydym yn defnyddio'r add
a subtract
swyddogaethau i lapio'r calc
swyddogaeth CSS. Prif bwrpas y swyddogaethau hyn yw osgoi gwallau pan fo gwerth “unigol” 0
yn cael ei drosglwyddo i calc
fynegiad. 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-scheme
ymholiad 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
}
}