Սաս
Օգտագործեք մեր աղբյուր 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";
// 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
: // Optional
Անհրաժեշտության դեպքում կարող եք նաև սկսել Bootstrap-ի մասեր ավելացնել բաժնի տակ : Մենք առաջարկում ենք օգտագործել մեր ֆայլի ներմուծման ամբողջական փաթեթը՝ bootstrap.scss
որպես ելակետ:
Փոփոխական լռելյայն
Bootstrap-ի յուրաքանչյուր Sass փոփոխական ներառում է !default
դրոշակ, որը թույլ է տալիս փոխել փոփոխականի լռելյայն արժեքը ձեր սեփական Sass-ում՝ առանց Bootstrap-ի սկզբնական կոդը փոփոխելու: Անհրաժեշտության դեպքում պատճենեք և տեղադրեք փոփոխականները, փոփոխեք դրանց արժեքները և հեռացրեք !default
դրոշակը: Եթե փոփոխականն արդեն նշանակված է, ապա այն նորից չի վերագրվի Bootstrap-ի լռելյայն արժեքներով:
Դուք կգտնեք Bootstrap-ի փոփոխականների ամբողջական ցանկը scss/_variables.scss
: Որոշ փոփոխականներ դրված են null
, այս փոփոխականները չեն թողարկում հատկությունը, եթե դրանք չեղարկվեն ձեր կազմաձևում:
Փոփոխական անտեսումները պետք է կատարվեն մեր գործառույթների ներմուծումից հետո, բայց մինչ մնացած ներմուծումները:
Ահա մի օրինակ, որը փոխում է background-color
և color
-ը <body>
npm-ի միջոցով Bootstrap-ը ներմուծելիս և կազմելիս.
// 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-ի ցանկացած փոփոխականի համար, ներառյալ ստորև ներկայացված գլոբալ տարբերակները:
Քարտեզներ և օղակներ
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;
}
Դուք կարող եք բացել կամ մգացնել գույները Bootstrap-ի tint-color()
և shade-color()
գործառույթների միջոցով: Այս գործառույթները կխառնեն գույները սևի կամ սպիտակի հետ, ի տարբերություն Sass-ի բնօրինակի lighten()
և 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
Մենք օգտագործում ենք ֆունկցիան SVG ֆոնային պատկերների համար , և նիշերից escape-svg
խուսափելու համար: Ֆունկցիան օգտագործելիս տվյալների URI-ները պետք է մեջբերվեն:<
>
#
escape-svg
Ավելացնել և հանել ֆունկցիաներ
Մենք օգտագործում ենք add
և subtract
ֆունկցիաները CSS ֆունկցիան փաթաթելու համար 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);
}
Միքսիններ
Մեր scss/mixins/
գրացուցակը ունի բազմաթիվ միքսներ, որոնք ապահովում են Bootstrap-ի մասերը և կարող են օգտագործվել նաև ձեր սեփական նախագծում:
Գունային սխեմաներ
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
}
}