სას
გამოიყენეთ ჩვენი წყარო 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
. თქვენ ასევე შეგიძლიათ დაიწყოთ Bootstrap-ის ნაწილების დამატება // Optional
განყოფილების ქვეშ, საჭიროებისამებრ. ჩვენ გირჩევთ გამოიყენოთ სრული იმპორტის სტეკი ჩვენი bootstrap.scss
ფაილიდან, როგორც საწყისი წერტილი.
ცვლადი ნაგულისხმევი
ყველა Sass ცვლადი Bootstrap-ში შეიცავს !default
დროშას, რომელიც საშუალებას გაძლევთ გადალახოთ ცვლადის ნაგულისხმევი მნიშვნელობა თქვენს Sass-ში Bootstrap-ის წყაროს კოდის შეცვლის გარეშე. დააკოპირეთ და ჩასვით ცვლადები საჭიროებისამებრ, შეცვალეთ მათი მნიშვნელობები და წაშალეთ !default
დროშა. თუ ცვლადი უკვე მინიჭებულია, მაშინ ის ხელახლა არ იქნება მინიჭებული Bootstrap-ში ნაგულისხმევი მნიშვნელობებით.
თქვენ ნახავთ Bootstrap-ის ცვლადების სრულ ჩამონათვალს scss/_variables.scss
. ზოგიერთი ცვლადი დაყენებულია null
, ეს ცვლადები არ გამოიტანს თვისებას, თუ ისინი არ გადაიჭრება თქვენს კონფიგურაციაში.
ცვლადის გადაფარვა უნდა მოხდეს ჩვენი ფუნქციების იმპორტის შემდეგ, მაგრამ დანარჩენ იმპორტამდე.
აი მაგალითი, რომელიც ცვლის background-color
და color
for- <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`
}
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
}
}