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.scss
Bootstrap نىڭ مەنبە 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. 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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
تۆۋەندىكى يەر شارى تاللاشلىرىنى ئۆز ئىچىگە ئالغان 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
. چوقۇم بىزنىڭ تەلىپىمىز ۋە تاللىشىمىز ئارىسىغا قىستۇرۇشىڭىز كېرەك.
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// 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 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
ۋە ئىقتىدارلارنى ئىشلىتىمىز . بۇ ئىقتىدارلارنىڭ ئاساسلىق مەقسىتى «بىرلىكسىز» قىممەت ئىپادىلەشكە ئۆتكەندە خاتالىقلاردىن ساقلىنىش. بۇنىڭغا ئوخشاش ئىپادىلەر ماتېماتىكىلىق توغرا بولسىمۇ ، بارلىق توركۆرگۈچلەردە خاتالىق قايتۇرىدۇ.subtract
calc
0
calc
calc(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
قوللاشقا بولىدۇ .light
dark
@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
}
}