Sass a ni

Kan source Sass files te hmang la, variable, map, mixins, leh function te hmang tangkai la, i project siam chak zawk leh i duh angin i siam thei ang.

He page ah hian

Kan source Sass file te hmang la, variable, map, mixin leh thil dang tam tak hmang tangkai rawh.

File siam dan tur

A theih phawt chuan Bootstrap-a core files te chu siam danglam loh tur. Sass tan chuan Bootstrap import thei tur stylesheet siam la, chutiang chuan i siam danglam thei ang a, i extend thei ang. npm ang package manager i hmang ni ta se, hetiang hian file structure i nei ang:

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

Kan source files i download tawh a, package manager i hmang lo a nih chuan, chu structure ang chi chu manual-in i siam duh ang a, Bootstrap-a source files chu i source files aiin a hranpaa dah ang che.

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

Import a ni

I custom.scss, ah chuan Bootstrap source Sass files te chu i import ang. Thil pahnih i nei a: Bootstrap zawng zawng telh vek la, a nih loh leh i mamawh parts thlang rawh. Kan component hrang hrangah hian thil mamawh leh innghahna engemaw zat a awm tih hre reng mah ila, a hnuhnung zawk hi kan fuih a ni. Tin, kan plugins te tan JavaScript thenkhat i dah tel a ngai bawk ang.

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

Chu setup chu a awm tawh chuan i custom.scss. // OptionalA tul angin section hnuaiah Bootstrap parts te pawh i dah tan thei bawk . Kan bootstrap.scssfile atanga import stack kimchang chu i tanna atan hmang turin kan rawt a che.

Variable a awm thei

Bootstrap a Sass variable zawng zawngah hian !defaultflag a awm a, chu chuan Bootstrap source code siam danglam ngai lovin i Sass-a variable default value chu override theihna a siamsak a ni. Variable te chu a tul angin copy leh paste la, an value te chu siam danglam la, !defaultflag chu paih chhuak rawh. Variable pakhat chu assigned a nih tawh chuan Bootstrap-a default value-te hmangin a re-assign leh dawn lo.

Bootstrap-a variable list kimchang chu scss/_variables.scss. Variable thenkhat chu , ah dah a ni a null, heng variable te hian i configuration ah override a nih loh chuan property chu an output lo.

Variable override te hi kan function te import hnuah a lo thleng tur a ni a, mahse import dang zawng zawng hmain a lo thleng tur a ni.

Hetah hian npm hmanga Bootstrap import leh compile laiin background-colorand colorfor the a thlak danglam thin entirnan kan rawn tarlang e :<body>

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

Bootstrap a variable eng pawh atan a tul angin repeat leh la, a hnuaia global option te pawh telh bawk ang che.

Kan starter project hmang hian npm hmangin Bootstrap hmangin tan la rawh! I npm project-a Bootstrap siam leh siam dan tur en turin twbs/bootstrap-npm-starter template repository ah kal rawh. Sass compiler, Autoprefixer, Stylelint, PurgeCSS, leh Bootstrap Icons te a awm bawk.

Map leh loop te

Bootstrap hian Sass map tlemte a keng tel a, key value pairs hmangin CSS inzawm chhungkaw siam awlsam zawk a ni. Kan rawng hrang hrang, grid breakpoint leh thil dang dang atan Sass map kan hmang thin. Sass variable ang bawkin Sass map zawng zawngah hian !defaultflag a awm vek a, overridden leh extend theih a ni.

Kan Sass map thenkhat chu default in empty ah an inzawm khawm thin. Hei hi Sass map pek tawh chu awlsam taka tihzauh theihna tura tih a ni a, mahse map atanga thil lakchhuah chu tlem a harsa zawka siamna tur senso a ni.

Map siam danglam rawh

Map chhunga variable zawng zawng $theme-colorshi standalone variable anga tarlan vek a ni. Kan $theme-colorsmap-a color awmsa siam danglam tur chuan i custom Sass file-ah a hnuaia mi hi dah la:

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

$theme-colorsA hnuah chuan Bootstrap map -ah heng variable te hi set a ni ang :

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

Map ah hian add rawh

, emaw map dang emaw ah hian color thar dah la $theme-colors, i custom value te nen Sass map thar siam la, original map nen merging rawh. Chutiang a nih chuan $custom-colorsmap thar kan siam ang a, $theme-colors.

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

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

Map atang hian paih chhuak rawh

$theme-colors, emaw map dang emaw aṭanga rawng paih tûr chuan map-remove. $theme-colorsKan mamawh zingah a hrilhfiah hnu lawkah variablesleh a hman hma lawk in insert tur a ni tih hre reng ang che 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

Key mamawh a ni

Bootstrap hian Sass maps chhunga key bik thenkhat awm chu kan hman ang khan a pawm a, hengte hi keimahni ngeiin kan tizau a ni. Map telh te i customize lai hian Sass map key bik hmanna hmunah error i tawk thei ang.

Entirnan, link, button leh form state atan primary, success, leh dangerkey from te kan hmang thin. $theme-colorsHeng key te value thlak hian harsatna a thlen tur a ni lo a, mahse paih chhuah hian Sass compilation chungchangah harsatna a thlen thei a ni. Heng instance-ah hian chutiang value hmangtu Sass code chu i siam danglam a ngai ang.

Hnathawh dan tur

A rawng hrang hrang

Sass maps kan neihte bulah hian theme colors te pawh standalone variable atan pawh hman theih a ni a, $primary.

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

tint-color()Bootstrap’s leh shade-color()function hmangin rawng i ti eng emaw, i dum emaw thei bawk. Heng function te hian Sass’ native lighten()leh darken()function te ang lo takin a lightness chu fixed amount in a thlak danglam ang a, chu chuan duhthusam effect a thlen lo fo thin.

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

Practice-ah chuan function chu i call ang a, color leh weight parameters i pass ang.

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

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

Color hrang hrang a awm

Web Content Accessibility Guidelines (WCAG) contrast mamawh phuhruk nan chuan ziaktute chuan text color contrast tlem berah 4.5:1 leh non-text color contrast tlem berah 3:1 an pe tur a ni a, a tlem berah chuan a tlem hle.

Chumi pui turin color-contrastBootstrap ah hian function kan dah tel bawk. Color space - a relative luminance hmanga contrast threshold chhiar nan WCAG contrast ratio algorithm hmangin base color tarlan atanga light ( ), dark ( ) emaw black ( ) emaw contrast color chu automatic-in a rawn pe kir leh thei a ni. He function hi mixin emaw loop emaw class tam tak i siamna hmunah a tangkai hle.sRGB#fff#212529#000

Entirnan, kan $theme-colorsmap atanga color swatch siam tur chuan:

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

One-off contrast mamawhna atan pawh hman theih a ni:

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

Kan color map function hmangin base color pawh i tarlang thei bawk:

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

SVG atanga tlanchhuak rawh

Function hi , leh SVG background images atan character te escape-svgescape nan kan hmang thin . Function hman hunah data URI te chu quote a ngai a ni.<>#escape-svg

Add leh Subtract function te pawh a awm bawk

CSS function wrap nan addleh function kan hmang thin . Heng function te hian an thil tum ber chu expression pakhata “unitless” value an pass hian tihsual a awm loh nan a ni. Expressions like hian browser zawng zawngah error a rawn pe chhuak vek ang a, mathematically dik tak ni mahse.subtractcalc0calccalc(10px - 0)

Calc a dikna hmun entirnan:

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

Calc a dik lohna hmun entirnan:

$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 te a awm

Kan scss/mixins/directory hian Bootstrap parts power pe thei mixin ton khat a nei a, i project pumpuiah pawh i hmang thei bawk.

Color scheme hrang hrang te

Media query atan shorthand mixin a awm a , , , leh custom color scheme te prefers-color-schemesupport a awm bawk.lightdark

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