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";
@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

بۇ تەڭشەكنى جايىدا قىلسىڭىز ، 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/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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
);

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

$theme-colorsئۆزىڭىزنىڭ خاس قىممىتى بىلەن يېڭى Sass خەرىتىسىنى قۇرۇش ۋە ئۇنى ئەسلى خەرىتە بىلەن بىرلەشتۈرۈش ئارقىلىق يېڭى رەڭ ياكى باشقا خەرىتە قوشۇڭ . بۇ خىل ئەھۋالدا بىز يېڭى $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. چوقۇم بىزنىڭ تەلىپىمىز ۋە تاللىشىمىز ئارىسىغا قىستۇرۇشىڭىز كېرەك.

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

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

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 2.0 زىيارەت قىلىش ئۆلچىمىگە يېتىش ئۈچۈن ، ئاپتورلار كەم دېگەندە 4.5: 1 سېلىشتۇرما نىسبىتىنى تەمىنلىشى كېرەك ، بۇنىڭ سىرتىدا.

بىز Bootstrap غا قوشقان قوشۇمچە ئىقتىدار بولسا رەڭ سېلىشتۇرما ئىقتىدارى ، color-contrast. ئۇ WCAG 2.0 ئالگورىزىمدىن پايدىلىنىپ ، رەڭ بوشلۇقىدىكى نىسپىي يورۇقلۇققا ئاساسەن سېلىشتۇرما بوسۇغىسىنى ھېسابلاپ ، بەلگىلەنگەن ئاساسىي رەڭگە ئاساسەن نۇر ( ) ، قېنىق ( ) ياكى قارا ( ) سېلىشتۇرما رەڭنى 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
  }
}