Sass

Siv peb qhov chaw Sass cov ntaub ntawv los ua kom zoo dua ntawm qhov sib txawv, daim duab qhia chaw, mixins, thiab cov haujlwm los pab koj tsim kom sai dua thiab kho koj qhov project.

Ntawm nplooj ntawv no

Siv peb cov ntaub ntawv Sass los ua kom zoo dua ntawm kev sib txawv, daim duab qhia chaw, mixins, thiab lwm yam.

Cov ntaub ntawv qauv

Thaum twg ua tau, zam kev hloov kho Bootstrap cov ntaub ntawv tseem ceeb. Rau Sass, uas txhais tau tias tsim koj tus kheej stylesheet uas imports Bootstrap yog li koj tuaj yeem hloov kho thiab txuas ntxiv mus. Piv txwv tias koj siv tus thawj tswj pob xws li npm, koj yuav muaj cov qauv ntaub ntawv zoo li no:

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

Yog tias koj tau rub tawm peb cov ntaub ntawv los ntawm cov ntaub ntawv thiab tsis siv tus thawj tswj pob, koj yuav xav teeb tsa ib yam dab tsi zoo ib yam li cov qauv ntawd, khaws Bootstrap cov ntaub ntawv cais tawm ntawm koj tus kheej.

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

Kev xa tawm

Hauv koj custom.scss, koj yuav import Bootstrap qhov chaw Sass cov ntaub ntawv. Koj muaj ob txoj kev xaiv: suav nrog tag nrho cov Bootstrap, lossis xaiv qhov koj xav tau. Peb txhawb cov tom kawg, txawm tias yuav tsum paub tias muaj qee qhov kev xav tau thiab kev vam khom nyob thoob plaws peb cov khoom. Koj tseem yuav tau suav qee qhov JavaScript rau peb cov plugins.

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

Nrog rau qhov kev teeb tsa no, koj tuaj yeem pib hloov kho ib qho ntawm Sass variables thiab maps hauv koj custom.scss. Koj tuaj yeem pib ntxiv qhov seem ntawm Bootstrap hauv qab // Optionalntu raws li xav tau. Peb xav kom siv tag nrho cov ntshuam pawg los ntawm peb cov bootstrap.scssntaub ntawv raws li koj qhov chaw pib.

Hloov pauv tsis tau

Txhua qhov sib txawv Sass hauv Bootstrap suav nrog tus !defaultchij tso cai rau koj hla dhau qhov sib txawv ntawm tus nqi qub hauv koj tus kheej Sass yam tsis tau hloov kho Bootstrap qhov chaws. Luam thiab muab tshuaj txhuam cov hloov pauv raws li xav tau, hloov kho lawv cov txiaj ntsig, thiab tshem tawm tus !defaultchij. Yog tias qhov hloov pauv tau raug xa mus, ces nws yuav tsis rov muab dua los ntawm qhov tseem ceeb hauv Bootstrap.

Koj yuav pom cov npe tag nrho ntawm Bootstrap qhov hloov pauv hauv scss/_variables.scss. Qee qhov kev hloov pauv tau teem rau null, cov kev hloov pauv no tsis tso tawm cov cuab yeej tshwj tsis yog tias lawv tau dhau los hauv koj qhov kev teeb tsa.

Kev hloov pauv hloov pauv yuav tsum tuaj tom qab peb cov haujlwm raug xa tawm, tab sis ua ntej qhov seem ntawm cov khoom tuaj.

Nov yog ib qho piv txwv uas hloov qhov background-colorthiab colorrau <body>thaum importing thiab compiling Bootstrap ntawm 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

Rov ua dua li qhov tsim nyog rau txhua qhov hloov pauv hauv Bootstrap, suav nrog cov kev xaiv thoob ntiaj teb hauv qab no.

Pib nrog Bootstrap ntawm npm nrog peb txoj haujlwm pib! Lub taub hau mus rau twbs/bootstrap-npm-starter template repository saib yuav ua li cas tsim thiab kho Bootstrap hauv koj tus kheej npm project. Xws li Sass compiler, Autoprefixer, Stylelint, PurgeCSS, thiab Bootstrap Icons.

Maps thiab loops

Bootstrap suav nrog ib tug puv tes ntawm Sass maps, tus nqi tseem ceeb uas ua rau nws yooj yim dua los tsim cov tsev neeg ntawm CSS muaj feem xyuam. Peb siv Sass maps rau peb cov xim, daim phiaj tawg, thiab lwm yam. Ib yam li Sass variables, tag nrho Sass maps suav nrog tus !defaultchij thiab tuaj yeem hla dhau thiab txuas ntxiv.

Qee qhov ntawm peb daim ntawv qhia Sass tau muab tso rau hauv qhov khoob los ntawm lub neej ntawd. Qhov no yog ua kom yooj yim nthuav dav ntawm daim ntawv qhia Sass, tab sis los ntawm tus nqi ntawm kev tshem tawm cov khoom los ntawm daim ntawv qhia me ntsis nyuaj dua.

Hloov daim ntawv qhia

Txhua qhov sib txawv hauv $theme-colorsdaim duab qhia tau txhais tias yog cov hloov pauv ib leeg. Txhawm rau hloov cov xim uas twb muaj lawm hauv peb $theme-colorsdaim ntawv qhia, ntxiv cov hauv qab no rau koj cov ntaub ntawv Sass kev cai:

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

Tom qab ntawd, cov kev hloov pauv no tau teeb tsa hauv Bootstrap $theme-colorsdaim ntawv qhia:

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

Ntxiv rau daim ntawv qhia

Ntxiv cov xim tshiab rau $theme-colors, lossis lwm daim ntawv qhia, los ntawm kev tsim daim ntawv qhia Sass tshiab nrog koj cov kev cai tsim nyog thiab muab nws nrog daim ntawv qhia qub. Hauv qhov no, peb yuav tsim ib $custom-colorsdaim ntawv qhia tshiab thiab sib koom ua ke nrog $theme-colors.

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

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

Tshem tawm ntawm daim ntawv qhia

Txhawm rau tshem tawm cov xim ntawm $theme-colors, lossis lwm daim ntawv qhia, siv map-remove. Nco ntsoov tias koj yuav tsum ntxig nws ntawm peb cov kev xav tau thiab cov kev xaiv:

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

Yuav tsum tau cov yuam sij

Bootstrap xav tias muaj qee cov yuam sij tshwj xeeb hauv Sass maps thaum peb siv thiab txuas ntxiv rau peb tus kheej. Raws li koj hloov kho cov duab qhia chaw, koj yuav ntsib teeb meem qhov twg ib qho Sass daim ntawv qhia tus yuam sij raug siv.

Piv txwv li, peb siv cov primary, success, thiab cov dangeryuam sij los ntawm $theme-colorskev sib txuas, nyees khawm, thiab daim ntawv xeev. Hloov qhov tseem ceeb ntawm cov yuam sij no yuav tsum tsis muaj teeb meem, tab sis tshem tawm lawv yuav ua rau Sass compilation teeb meem. Hauv cov xwm txheej no, koj yuav tsum tau hloov kho Sass code uas ua rau siv cov txiaj ntsig ntawd.

Muaj nuj nqi

Xim

Ib sab ntawm Sass maps peb muaj, cov ntsiab lus xim kuj tuaj yeem siv los ua ib qho txawv txav, xws li $primary.

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

Koj tuaj yeem ua kom pom lossis ua kom tsaus xim nrog Bootstrap tint-color()thiab shade-color()ua haujlwm. Cov haujlwm no yuav sib xyaw xim nrog cov xim dub lossis dawb, tsis zoo li Sass ' haiv neeg lighten()thiab darken()cov haujlwm uas yuav hloov lub teeb los ntawm tus nqi ruaj khov, uas feem ntau tsis ua rau cov nyhuv xav tau.

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

Hauv kev xyaum, koj yuav hu rau cov haujlwm thiab dhau ntawm cov xim thiab qhov hnyav.

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

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

Xim sib txawv

Txhawm rau kom ua tau raws li WCAG 2.0 cov qauv kev nkag tau yooj yim rau cov xim sib txawv , cov neeg sau ntawv yuav tsum muab qhov sib piv ntawm qhov tsawg kawg nkaus 4.5: 1 , nrog tsawg heev.

Ib qho ntxiv muaj nuj nqi peb suav nrog hauv Bootstrap yog cov xim sib txawv, color-contrast. Nws siv WCAG 2.0 algorithm rau xam qhov sib piv qhov pib raws li tus txheeb ze luminance nyob rau hauv ib lub sRGBxim kom rov qab lub teeb ( #fff), tsaus nti ( #212529) lossis dub ( #000) sib piv xim raws li cov xim hauv qab tau teev tseg. Qhov no muaj nuj nqi tshwj xeeb tshaj yog pab tau rau mixins lossis loops uas koj tab tom tsim ntau chav kawm.

Piv txwv li, los tsim cov xim swatches los ntawm peb $theme-colorsdaim ntawv qhia:

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

Nws kuj tseem siv tau rau ib qho kev sib piv xav tau:

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

Koj tuaj yeem hais qhia lub hauv paus xim nrog peb daim ntawv qhia xim ua haujlwm:

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

Escape SVG

Peb siv cov escape-svghaujlwm kom khiav tawm <, >thiab #cov cim rau SVG cov duab tom qab. Thaum siv cov escape-svghaujlwm, cov ntaub ntawv URIs yuav tsum tau hais.

Ntxiv thiab rho tawm haujlwm

Peb siv cov haujlwm addthiab subtractua haujlwm los qhwv CSS calcmuaj nuj nqi. Lub hom phiaj tseem ceeb ntawm cov haujlwm no yog kom tsis txhob ua yuam kev thaum tus nqi "unitless" 0tau dhau mus rau hauv ib qho calckev qhia. Cov lus zoo li calc(10px - 0)yuav rov qab ua qhov yuam kev hauv txhua qhov browsers, txawm tias ua lej raug.

Piv txwv qhov twg calc siv tau:

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

Piv txwv qhov twg calc tsis raug:

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

Mixins

Peb scss/mixins/phau ntawv teev npe muaj ib tuj ntawm cov mixins uas lub zog ntawm Bootstrap thiab tuaj yeem siv thoob plaws koj tus kheej qhov project.

Xim schemes

Ib qho shorthand mixin rau cov prefers-color-schemelus nug xov xwm yog muaj nrog kev txhawb nqa rau light, dark, thiab kev cai xim schemes.

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