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.
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 setup 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";
@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
Chu setup chu a awm tawh chuan i custom.scss
. // Optional
A tul angin section hnuaiah Bootstrap parts te pawh i dah tan thei bawk . Kan bootstrap.scss
file 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 !default
flag 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, !default
flag 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 set 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-color
and color
for the tihdanglamtu 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/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 a variable eng pawh atan a tul angin repeat leh la, a hnuaia global option te pawh telh bawk ang che.
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 tam tak atan Sass maps kan hmang thin. Sass variable ang bawkin Sass map zawng zawngah hian !default
flag 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-colors
hi standalone variable anga tarlan vek a ni. Kan $theme-colors
map-a color awmsa siam danglam tur chuan i custom Sass file-ah a hnuaia mi hi dah la:
$primary: #0074d9;
$danger: #ff4136;
$theme-colors
A 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-colors
map 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
. Kan mamawh leh duhthlan tur inkarah i dah tel tur a ni tih hre reng ang che:
// 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
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 danger
key from te kan hmang thin. $theme-colors
Heng 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
WCAG 2.0 accessibility standards for color contrast zawm tur chuan , ziaktute chuan contrast ratio 4.5:1 aia tlem lo an pe tur a ni a, a tlem berah a awm lo.
Bootstrap-a kan dah belh tur chu color contrast function, color-contrast
. Colorspace -a relative luminance hmanga contrast thresholds chhut nan WCAG 2.0 algorithm hmangin base color tarlan atanga light ( ), dark ( ) emaw black ( ) 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-colors
map 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-svg
escape 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 add
leh 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.subtract
calc
0
calc
calc(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-scheme
support a awm bawk.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
}
}