სას

გამოიყენეთ ჩვენი წყარო 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. თქვენ ასევე შეგიძლიათ დაიწყოთ Bootstrap-ის ნაწილების დამატება // Optionalგანყოფილების ქვეშ, საჭიროებისამებრ. ჩვენ გირჩევთ გამოიყენოთ სრული იმპორტის სტეკი ჩვენი bootstrap.scssფაილიდან, როგორც საწყისი წერტილი.

ცვლადი ნაგულისხმევი

ყველა Sass ცვლადი Bootstrap-ში შეიცავს !defaultდროშას, რომელიც საშუალებას გაძლევთ გადალახოთ ცვლადის ნაგულისხმევი მნიშვნელობა თქვენს Sass-ში Bootstrap-ის წყაროს კოდის შეცვლის გარეშე. დააკოპირეთ და ჩასვით ცვლადები საჭიროებისამებრ, შეცვალეთ მათი მნიშვნელობები და წაშალეთ !defaultდროშა. თუ ცვლადი უკვე მინიჭებულია, მაშინ ის ხელახლა არ იქნება მინიჭებული Bootstrap-ში ნაგულისხმევი მნიშვნელობებით.

თქვენ ნახავთ Bootstrap-ის ცვლადების სრულ ჩამონათვალს scss/_variables.scss. ზოგიერთი ცვლადი დაყენებულია null, ეს ცვლადები არ გამოიტანს თვისებას, თუ ისინი არ გადაიჭრება თქვენს კონფიგურაციაში.

ცვლადის გადაფარვა უნდა მოხდეს ჩვენი ფუნქციების იმპორტის შემდეგ, მაგრამ დანარჩენ იმპორტამდე.

აი მაგალითი, რომელიც ცვლის background-colorდა colorfor- <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`
}

Escape SVG

ჩვენ ვიყენებთ ფუნქციას SVG ფონური სურათებისთვის და სიმბოლოების escape-svgგასაქცევად . ფუნქციის გამოყენებისას მონაცემთა URI უნდა იყოს ციტირებული.<>#escape-svg

ფუნქციების დამატება და გამოკლება

ჩვენ ვიყენებთ addდა subtractფუნქციებს CSS calcფუნქციის შესაფუთად. ამ ფუნქციების უპირველესი მიზანია შეცდომების თავიდან აცილება, როდესაც "unitless" 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
  }
}