Sass

مەنبە Sass ھۆججىتىدىن پايدىلىنىپ ، ئۆزگەرگۈچى مىقدار ، خەرىتە ، ئارىلاشما ۋە ئىقتىدارلاردىن پايدىلىنىپ ، تېخىمۇ تېز قۇرۇپ ، تۈرىڭىزنى خاسلاشتۇرالايسىز.

بۇ بەتتە

مەنبە Sass ھۆججىتىدىن پايدىلىنىپ ئۆزگەرگۈچى مىقدار ، خەرىتە ، ئارىلاشما ۋە باشقىلاردىن پايدىلىنىڭ.

ھۆججەت قۇرۇلمىسى

مۇمكىنقەدەر Bootstrap نىڭ يادرولۇق ھۆججەتلىرىنى ئۆزگەرتىشتىن ساقلىنىڭ. Sass ئۈچۈن ، بۇ Bootstrap نى ئىمپورت قىلىدىغان ئۇسلۇب جەدۋىلىنى قۇرۇشنى كۆرسىتىدۇ ، شۇڭا ئۇنى ئۆزگەرتەلەيسىز ۋە كېڭەيتەلەيسىز. ئەگەر سىز npm غا ئوخشاش بوغچا باشقۇرغۇچىنى ئىشلىتىۋاتىسىز دەپ پەرەز قىلسىڭىز ، تۆۋەندىكى ھۆججەت قۇرۇلمىسى بولىدۇ:

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

ئەگەر مەنبە ھۆججىتىمىزنى چۈشۈرۈپ ، ئورالما باشقۇرغۇچىنى ئىشلەتمىسىڭىز ، Bootstrap نىڭ ئەسلى ھۆججىتىنى ئۆزىڭىزدىن ساقلاپ ، بۇ قۇرۇلمىغا ئوخشاش نەرسىنى قولدا قۇرماقچى بولىسىز.

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

ئەكىرىش

ئۆزىڭىزدە custom.scssBootstrap نىڭ مەنبە Sass ھۆججىتىنى ئەكىرىسىز. سىزنىڭ ئىككى خىل تاللىشىڭىز بار: Bootstrap نىڭ ھەممىسىنى ئۆز ئىچىگە ئالىدۇ ياكى لازىملىق زاپچاسلارنى تاللاڭ. بىز كېيىنكىلەرنى ئىلھاملاندۇرىمىز ، گەرچە زاپچاسلىرىمىزدا بەزى تەلەپ ۋە بېقىنىشلارنىڭ بارلىقىنى بىلىمىز. قىستۇرمىلىرىمىزغا يەنە بىر قىسىم JavaScript نى قوشۇشىڭىز كېرەك.

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

بۇ تەڭشەكنى جايىدا قىلسىڭىز ، Sass ئۆزگەرگۈچى مىقدار ۋە خەرىتىلەرنى خالىغانچە ئۆزگەرتەلەيسىز custom.scss. ئېھتىياجغا ئاساسەن بۆلەكنىڭ ئاستىغا Bootstrap نىڭ زاپچاسلىرىنى قوشۇشقا باشلىيالايسىز // Optional. ھۆججىتىمىزدىن تولۇق ئەكىرىش ساندۇقىنى bootstrap.scssباشلىنىش نۇقتىسى قىلىپ ئىشلىتىشنى تەۋسىيە قىلىمىز.

ئۆزگەرگۈچى مىقدار

Bootstrap دىكى ھەر بىر Sass ئۆزگەرگۈچى مىقدار !defaultبايراقنى ئۆز ئىچىگە ئالىدۇ. ئېھتىياجغا ئاساسەن ئۆزگەرگۈچى مىقدارنى كۆچۈرۈپ چاپلاڭ ، ئۇلارنىڭ قىممىتىنى ئۆزگەرتىڭ ۋە !defaultبايراقنى ئېلىڭ. ئەگەر ئۆزگەرگۈچى مىقدار ئاللىبۇرۇن بېكىتىلگەن بولسا ، ئۇ Bootstrap دىكى سۈكۈتتىكى قىممەت بىلەن قايتا تەقسىملەنمەيدۇ.

سىز Bootstrap نىڭ ئۆزگەرگۈچى مىقدارلىرىنىڭ تولۇق تىزىملىكىنى تاپالايسىز scss/_variables.scss. بەزى ئۆزگەرگۈچى مىقدارلار تەڭشەلدى null، بۇ ئۆزگەرگۈچى مىقدارلار سىزنىڭ سەپلىمىسىڭىزدە ئېشىپ كەتمىسە خاسلىقنى چىقارمايدۇ.

ئۆزگەرگۈچى مىقدارلار بىزنىڭ فۇنكسىيەمىز ئىمپورت قىلىنغاندىن كېيىن ، ئەمما باشقا ئىمپورتتىن بۇرۇن كېلىشى كېرەك.

بۇ يەردە npm ئارقىلىق Bootstrap نى ئىمپورت قىلغاندا ۋە تۈزگەندە background-colorۋە ئۆزگەرتىدىغان بىر مىسال بار color:<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 دىكى ھەر قانداق ئۆزگەرگۈچى مىقدارغا ئېھتىياجلىق بولغاندا تەكرارلاڭ.

باشلاش تۈرىمىز بىلەن npm ئارقىلىق Bootstrap بىلەن باشلاڭ! Twbs / bootstrap-npm-starter قېلىپ ئامبىرىغا بېرىپ ، ئۆزىڭىزنىڭ npm تۈرىدە Bootstrap نى قانداق قۇرۇش ۋە خاسلاشتۇرۇشنى كۆرۈڭ. Sass تۈزگۈچى ، Autoprefixer ، Stylelint ، PurgeCSS ۋە Bootstrap سىنبەلگىسىنى ئۆز ئىچىگە ئالىدۇ.

خەرىتە ۋە ئايلانما

Bootstrap بىر قانچە Sass خەرىتىسىنى ئۆز ئىچىگە ئالىدۇ ، مۇناسىۋەتلىك CSS ئائىلىلىرىنى بارلىققا كەلتۈرۈشكە قۇلايلىق بولغان ئاچقۇچلۇق قىممەت جۈپلىرى. بىز Sass خەرىتىسىنى رەڭلىرىمىز ، كاتەكچە بۆلەكلىرىمىز ۋە باشقىلار ئۈچۈن ئىشلىتىمىز. Sass ئۆزگەرگۈچى مىقدارغا ئوخشاش ، بارلىق Sass خەرىتىلىرى !defaultبايراقنى ئۆز ئىچىگە ئالىدۇ ، ئۇنى بېسىپ ئۆتۈپ ئۇزارتقىلى بولىدۇ.

بەزى Sass خەرىتىلىرىمىز سۈكۈتتىكى ھالەتتە قۇرۇق خەرىتىلەرگە بىرلەشتۈرۈلدى. بۇ بېرىلگەن Sass خەرىتىسىنى ئاسان كېڭەيتىش ئۈچۈن ئېلىپ بېرىلىدۇ ، ئەمما خەرىتىدىكى نەرسىلەرنى چىقىرىۋېتىش سەل قىيىنغا توختايدۇ.

خەرىتىنى ئۆزگەرتىش

خەرىتىدىكى بارلىق ئۆزگەرگۈچى مىقدارلار $theme-colorsمۇستەقىل ئۆزگەرگۈچى مىقدار دەپ ئېنىقلىما بېرىلگەن. خەرىتىمىزدە بار بولغان رەڭنى ئۆزگەرتىش ئۈچۈن $theme-colorsتۆۋەندىكى Sass ھۆججىتىڭىزگە تۆۋەندىكىنى قوشۇڭ:

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

كېيىنچە ، بۇ ئۆزگەرگۈچى مىقدارلار Bootstrap نىڭ $theme-colorsخەرىتىسىگە قويۇلغان:

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

خەرىتىگە قوشۇڭ

ئۆزىڭىزنىڭ خاس قىممىتى بىلەن يېڭى Sass خەرىتىسىنى قۇرۇپ ، ئۇنى ئەسلى خەرىتە بىلەن بىرلەشتۈرۈش ئارقىلىق يېڭى رەڭلەرنى $theme-colorsياكى باشقا خەرىتە قوشۇڭ. بۇ خىل ئەھۋالدا بىز يېڭى $custom-colorsخەرىتە قۇرىمىز ۋە ئۇنى بىرلەشتۈرىمىز $theme-colors.

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

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

خەرىتىدىن چىقىرىۋېتىڭ

$theme-colorsياكى باشقا خەرىتىدىن رەڭلەرنى ئۆچۈرۈش ئۈچۈن ئىشلىتىڭ map-remove. شۇنىڭغا دىققەت قىلىڭكى ، ئېنىقلىما بەرگەندىن كېيىن ۋە ئىشلىتىشتىن بۇرۇنلا $theme-colorsبىزنىڭ تەلىپىمىزگە قىستۇرۇشىڭىز كېرەك :variablesmaps

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

لازىملىق كۇنۇپكىلار

Bootstrap بىز ئىشلەتكەن ۋە ئۆزىمىزنى كېڭەيتكەندە Sass خەرىتىسى ئىچىدە بەزى ئالاھىدە كۇنۇپكىلارنىڭ بارلىقىنى پەرەز قىلىدۇ. سىز كىرگۈزۈلگەن خەرىتىنى ئىختىيارىي قىلسىڭىز ، مەلۇم بىر Sass خەرىتىسىنىڭ ئاچقۇچى ئىشلىتىلىۋاتقان خاتالىقلارغا يولۇقۇشىڭىز مۇمكىن.

مەسىلەن ، بىز primary، successۋە dangerكۇنۇپكىلارنى $theme-colorsئۇلىنىش ، كۇنۇپكا ۋە شەكىل ھالىتى ئۈچۈن ئىشلىتىمىز. بۇ كۇنۇپكىلارنىڭ قىممىتىنى ئالماشتۇرۇشتا مەسىلە كۆرۈلمەسلىكى كېرەك ، ئەمما ئۇلارنى ئېلىۋېتىش Sass تۈزۈش مەسىلىسىنى كەلتۈرۈپ چىقىرىشى مۇمكىن. بۇ خىل ئەھۋال ئاستىدا ، سىز بۇ قىممەتلەردىن پايدىلىنىدىغان Sass كودىنى ئۆزگەرتىشىڭىز كېرەك.

ئىقتىدارلىرى

رەڭلەر

بىزدە بار بولغان Sass خەرىتىسىنىڭ يېنىدا ئۇسلۇب رەڭلىرىنى مۇستەقىل ئۆزگەرگۈچى مىقدار سۈپىتىدە ئىشلىتىشكە بولىدۇ $primary.

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

tint-color()Bootstrap نىڭ ئىقتىدارى ۋە ئىقتىدارلىرى بىلەن رەڭلەرنى يەڭگىل ياكى قاراڭغۇ قىلالايسىز shade-color(). lighten()بۇ ئىقتىدارلار Sass نىڭ يەرلىك ۋە فۇنكىسىيەسىگە ئوخشىمايدىغان رەڭلەرنى قارا ياكى ئاق رەڭ بىلەن ئارىلاشتۇرىدۇ ، darken()بۇ نۇرنى مۇقىم مىقداردا ئۆزگەرتىدۇ ، بۇ ھەمىشە كۆڭۈلدىكىدەك ئۈنۈمگە ئېرىشەلمەيدۇ.

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

ئەمەلىيەتتە ، سىز بۇ ئىقتىدارنى چاقىرىپ ، رەڭ ۋە ئېغىرلىق پارامېتىرىدىن ئۆتىسىز.

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

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

رەڭ سېلىشتۇرمىسى

تور مەزمۇن زىيارەت قىلىش قوللانمىسى (WCAG) نىڭ سېلىشتۇرما تەلىپىگە ماسلىشىش ئۈچۈن ، ئاپتورلار ئەڭ تۆۋەن تېكىست رەڭ سېلىشتۇرمىسى 4.5: 1 ، ئەڭ تۆۋەن تېكىست بولمىغان رەڭ سېلىشتۇرمىسى 3: 1 بولۇشى كېرەك ، بۇنىڭ سىرتىدا.

color-contrastبۇنىڭغا ياردەم قىلىش ئۈچۈن ، بۇ ئىقتىدارنى Bootstrap غا كىرگۈزدۇق . ئۇ WCAG سېلىشتۇرما نىسبىتى ھېسابلاش ئۇسۇلى ئارقىلىق رەڭ بوشلۇقىدىكى نىسپىي يورۇقلۇققا ئاساسەن سېلىشتۇرما بوسۇغىسىنى ھېسابلاپ ، بەلگىلەنگەن ئاساسىي رەڭگە ئاساسەن نۇر ( ) ، قېنىق ( ) ياكى قارا ( ) سېلىشتۇرما رەڭنى sRGBئاپتوماتىك قايتۇرىدۇ . بۇ ئىقتىدار سىز كۆپ سىنىپ ھاسىل قىلىۋاتقان ئارىلاشما ياكى ئايلانما ھالقىلار ئۈچۈن ئالاھىدە پايدىلىق.#fff#212529#000

مەسىلەن ، $theme-colorsخەرىتىمىزدىن رەڭلىك رەسىم ھاسىل قىلىش:

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

ئۇنى بىر قېتىملىق سېلىشتۇرما ئېھتىياج ئۈچۈنمۇ ئىشلىتىشكە بولىدۇ:

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

بىزنىڭ رەڭ خەرىتە ئىقتىدارىمىز بىلەن ئاساسىي رەڭنى بەلگىلىيەلەيسىز:

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

SVG دىن قېچىش

بىز بۇ escape-svgئىقتىدارنى ئىشلىتىپ SVG تەگلىك رەسىملىرى ئۈچۈن <ئىشلىتىمىز . ئىقتىدارنى ئىشلەتكەندە ، URI سانلىق مەلۇماتلىرىنى نەقىل كەلتۈرۈش كېرەك.>#escape-svg

ئىقتىدار قوشۇش ۋە ئېلىش

بىز CSS ئىقتىدارىنى ئوراش ئۈچۈن addۋە ئىقتىدارلارنى ئىشلىتىمىز . بۇ ئىقتىدارلارنىڭ ئاساسلىق مەقسىتى «بىرلىكسىز» قىممەت ئىپادىلەشكە ئۆتكەندە خاتالىقلاردىن ساقلىنىش. بۇنىڭغا ئوخشاش ئىپادىلەر ماتېماتىكىلىق توغرا بولسىمۇ ، بارلىق توركۆرگۈچلەردە خاتالىق قايتۇرىدۇ.subtractcalc0calccalc(10px - 0)

ھېسابلاش ئىناۋەتلىك بولغان مىسال:

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

ھېسابلاش ئىناۋەتسىز بولغان مىسال:

$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

مۇندەرىجىسىمىزدە Bootstrap scss/mixins/نىڭ توك زاپچاسلىرى بار بولۇپ ، ئۇنى ئۆز تۈرىڭىزدە ئىشلىتىشكە بولىدۇ.

رەڭ لايىھەلىرى

مېدىيا سوئالىغا قىسقىچە ئارىلاشما ئارىلاشما ۋە ئىختىيارى رەڭ لايىھەلىرىنى prefers-color-schemeقوللاشقا بولىدۇ .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
  }
}