Սաս

Օգտագործեք մեր աղբյուր 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";

// 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: // 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/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-ի ցանկացած փոփոխականի համար, ներառյալ ստորև ներկայացված գլոբալ տարբերակները:

Սկսեք Bootstrap-ով npm-ի միջոցով մեր մեկնարկային նախագծով: Գնացեք twbs/bootstrap-npm-starter ձևանմուշների պահոց՝ տեսնելու, թե ինչպես կառուցել և հարմարեցնել Bootstrap-ը ձեր սեփական npm նախագծում: Ներառում է 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: Ուշադիր եղեք, որ դուք պետք է մտցնեք $theme-colorsմեր պահանջների միջև դրա սահմանումից անմիջապես հետո variablesև դրա օգտագործումից առաջ maps՝

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

Դուք կարող եք բացել կամ մգացնել գույները 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) կոնտրաստային պահանջներին համապատասխանելու համար հեղինակները պետք է ապահովեն տեքստի գույնի նվազագույն հակադրություն 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

Մենք օգտագործում ենք ֆունկցիան 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
  }
}