Theming Bootstrap
დააკონფიგურირეთ Bootstrap 4 ჩვენი ახალი ჩაშენებული Sass ცვლადებით გლობალური სტილის პრეფერენციებისთვის, თემებისა და კომპონენტების მარტივი ცვლილებებისთვის.
შესავალი
Bootstrap 3-ში თემის შექმნა ძირითადად განპირობებული იყო LESS-ის, მორგებული CSS-ით და ცალკე თემის სტილის ფურცლით, რომელიც ჩვენ შევიტანეთ ჩვენს distფაილებში. გარკვეული ძალისხმევით, შეიძლება Bootstrap 3-ის იერსახის მთლიანად გადაკეთება ძირითადი ფაილების შეხების გარეშე. Bootstrap 4 გთავაზობთ ნაცნობ, მაგრამ ოდნავ განსხვავებულ მიდგომას.
ახლა თემის შექმნა ხორციელდება Sass ცვლადებით, Sass რუქებით და მორგებული CSS-ით. აღარ არის გამოყოფილი თემის სტილის ცხრილი; ამის ნაცვლად, შეგიძლიათ ჩართოთ ჩაშენებული თემა გრადიენტების, ჩრდილების და სხვათა დასამატებლად.
სას
გამოიყენეთ ჩვენი წყარო Sass ფაილები, რომ ისარგებლოთ ცვლადებით, რუქებით, მიქსინებით და სხვა. ჩვენს ნაგებობაში ჩვენ გავზარდეთ Sass დამრგვალების სიზუსტე 6-მდე (ნაგულისხმევად ეს არის 5), რათა თავიდან ავიცილოთ პრობლემები ბრაუზერის დამრგვალებასთან დაკავშირებით.
ფაილის სტრუქტურა
შეძლებისდაგვარად, მოერიდეთ 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
@import "../node_modules/bootstrap/scss/bootstrap";// Custom.scss
// Option B: Include parts of Bootstrap
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";ამ დაყენებით, შეგიძლიათ დაიწყოთ Sass-ის ნებისმიერი ცვლადისა და რუკის შეცვლა თქვენს custom.scss. თქვენ ასევე შეგიძლიათ დაიწყოთ Bootstrap-ის ნაწილების დამატება // Optionalგანყოფილების ქვეშ, საჭიროებისამებრ. ჩვენ გირჩევთ გამოიყენოთ სრული იმპორტის სტეკი ჩვენი bootstrap.scssფაილიდან, როგორც საწყისი წერტილი.
ცვლადი ნაგულისხმევი
ყველა Sass ცვლადი Bootstrap 4-ში შეიცავს !defaultდროშას, რომელიც საშუალებას გაძლევთ გადალახოთ ცვლადის ნაგულისხმევი მნიშვნელობა თქვენს Sass-ში Bootstrap-ის წყაროს კოდის შეცვლის გარეშე. დააკოპირეთ და ჩასვით ცვლადები საჭიროებისამებრ, შეცვალეთ მათი მნიშვნელობები და წაშალეთ !defaultდროშა. თუ ცვლადი უკვე მინიჭებულია, მაშინ ის ხელახლა არ იქნება მინიჭებული Bootstrap-ში ნაგულისხმევი მნიშვნელობებით.
თქვენ ნახავთ Bootstrap-ის ცვლადების სრულ ჩამონათვალს scss/_variables.scss. ზოგიერთი ცვლადი დაყენებულია null, ეს ცვლადები არ გამოიტანს თვისებას, თუ ისინი არ გადაიჭრება თქვენს კონფიგურაციაში.
ცვლადის უგულებელყოფა იმავე Sass ფაილში შეიძლება მოხდეს ნაგულისხმევი ცვლადების წინ ან შემდეგ. თუმცა, Sass ფაილების გადაფარვისას, თქვენი გადაფარვები უნდა მოხდეს Bootstrap-ის Sass ფაილების იმპორტამდე.
აი მაგალითი, რომელიც ცვლის background-colorდა colorfor- <body>ს npm-ის საშუალებით Bootstrap-ის იმპორტისა და შედგენისას:
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";გაიმეორეთ საჭიროებისამებრ Bootstrap-ში ნებისმიერი ცვლადისთვის, ქვემოთ მოყვანილი გლობალური ვარიანტების ჩათვლით.
რუკები და მარყუჟები
Bootstrap 4 მოიცავს Sass რუქებს, საკვანძო მნიშვნელობის წყვილებს, რომლებიც აადვილებს დაკავშირებული CSS-ის ოჯახების გენერირებას. ჩვენ ვიყენებთ Sass რუკებს ჩვენი ფერებისთვის, ბადის წყვეტისთვის და სხვა. ისევე, როგორც Sass ცვლადები, Sass-ის ყველა რუკა შეიცავს !defaultდროშას და შეიძლება გადალახოს და გაფართოვდეს.
ზოგიერთი ჩვენი Sass რუკა ნაგულისხმევად გაერთიანებულია ცარიელ რუკებად. ეს კეთდება იმისათვის, რომ უზრუნველყოს მოცემული Sass რუქის მარტივი გაფართოება, მაგრამ ეს ხდება რუქიდან ელემენტების ამოღების ხარჯზე.
რუკის შეცვლა
ჩვენს რუკაზე არსებული ფერის შესაცვლელად $theme-colors, დაამატეთ შემდეგი თქვენს მორგებულ Sass ფაილს:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);რუკაზე დამატება
ახალი ფერის $theme-colorsდასამატებლად, დაამატეთ ახალი გასაღები და მნიშვნელობა:
$theme-colors: (
"custom-color": #900
);რუკიდან ამოღება
ფერების ამოსაღებად $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";
...საჭირო გასაღებები
Bootstrap ვარაუდობს გარკვეული სპეციფიკური კლავიშების არსებობას Sass-ის რუქებში, რადგან ჩვენ თვითონ ვიყენებდით და ვაგრძელებთ მათ. თანდართული რუკების მორგებისას შეიძლება შეგექმნათ შეცდომები, როდესაც გამოიყენება Sass რუკის კონკრეტული გასაღები.
მაგალითად, ჩვენ ვიყენებთ primary, success, და dangerკლავიშებს $theme-colorsბმულებისთვის, ღილაკებისთვის და ფორმის მდგომარეობებისთვის. ამ გასაღებების მნიშვნელობების ჩანაცვლებამ არ უნდა გამოიწვიოს პრობლემები, მაგრამ მათმა ამოღებამ შეიძლება გამოიწვიოს Sass-ის კომპილაციის პრობლემები. ამ შემთხვევებში, თქვენ უნდა შეცვალოთ Sass კოდი, რომელიც იყენებს ამ მნიშვნელობებს.
ფუნქციები
Bootstrap იყენებს Sass-ის რამდენიმე ფუნქციას, მაგრამ მხოლოდ ქვეჯგუფი გამოიყენება ზოგადი თემებისთვის. ჩვენ შევიტანეთ სამი ფუნქცია ფერადი რუქებიდან მნიშვნელობების მისაღებად:
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}ეს საშუალებას გაძლევთ აირჩიოთ ერთი ფერი Sass რუკიდან, ისევე, როგორც თქვენ იყენებდით ფერის ცვლადს v3-დან.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}ჩვენ ასევე გვაქვს კიდევ ერთი ფუნქცია რუქიდან ფერის კონკრეტული დონის$theme-colors მისაღებად . ნეგატიური დონის მნიშვნელობები გაანათებს ფერს, ხოლო უფრო მაღალი დონეები ჩამუქდება.
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}პრაქტიკაში, თქვენ დაუძახებდით ფუნქციას და გადასცემდით ორ პარამეტრს: ფერის სახელს $theme-colors(მაგ., პირველადი ან საშიშროება) და რიცხვითი დონე.
.custom-element {
color: theme-color-level(primary, -10);
}დამატებითი ფუნქციები შეიძლება დაემატოს მომავალში ან თქვენი საკუთარი Sass, რათა შექმნათ დონის ფუნქციები დამატებითი Sass რუკებისთვის, ან თუნდაც ზოგადი, თუ გსურთ იყოთ უფრო ვრცელი.
ფერის კონტრასტი
დამატებითი ფუნქცია, რომელსაც ჩვენ ჩავთვლით Bootstrap-ში, არის ფერის კონტრასტის ფუნქცია, color-yiq. ის იყენებს YIQ ფერთა სივრცეს , რათა ავტომატურად დააბრუნოს ღია ( #fff) ან მუქი ( #111) კონტრასტული ფერი მითითებულ საბაზისო ფერზე დაყრდნობით. ეს ფუნქცია განსაკუთრებით სასარგებლოა მიქსებისთვის ან მარყუჟებისთვის, სადაც თქვენ ქმნით მრავალ კლასს.
მაგალითად, ჩვენი რუქიდან ფერადი ნიმუშების შესაქმნელად $theme-colors:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}ის ასევე შეიძლება გამოყენებულ იქნას კონტრასტის ერთჯერადი საჭიროებისთვის:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}თქვენ ასევე შეგიძლიათ მიუთითოთ ძირითადი ფერი ჩვენი ფერადი რუქის ფუნქციებით:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}Escape SVG
ჩვენ ვიყენებთ ფუნქციას SVG ფონური სურათებისთვის და სიმბოლოების escape-svgგასაქცევად . ამ სიმბოლოების გაქცევა საჭიროა IE-ში ფონის სურათების სათანადოდ გადასაცემად.<>#
ფუნქციების დამატება და გამოკლება
ჩვენ ვიყენებთ 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);
}Sass პარამეტრები
შეცვალეთ Bootstrap 4 ჩვენი ჩაშენებული ცვლადების ფაილით და მარტივად გადართეთ გლობალური CSS პრეფერენციები ახალი $enable-*Sass ცვლადებით. ცვლადის მნიშვნელობის უგულებელყოფა და npm run testსაჭიროების შემთხვევაში ხელახლა კომპილაცია.
თქვენ შეგიძლიათ იპოვოთ და დააკონფიგურიროთ ეს ცვლადები ძირითადი გლობალური პარამეტრებისთვის Bootstrap-ის scss/_variables.scssფაილში.
| ცვლადი | ღირებულებები | აღწერა |
|---|---|---|
$spacer |
1rem(ნაგულისხმევი), ან ნებისმიერი მნიშვნელობა > 0 |
განსაზღვრავს ნაგულისხმევი spacer მნიშვნელობა ჩვენი spacer უტილიტების პროგრამულად გენერირებისთვის . |
$enable-rounded |
true(ნაგულისხმევი) ანfalse |
რთავს წინასწარ განსაზღვრულ border-radiusსტილებს სხვადასხვა კომპონენტზე. |
$enable-shadows |
trueან false(ნაგულისხმევი) |
რთავს წინასწარ განსაზღვრულ box-shadowსტილებს სხვადასხვა კომპონენტზე. |
$enable-gradients |
trueან false(ნაგულისხმევი) |
რთავს წინასწარ განსაზღვრულ გრადიენტებს background-imageსტილის მეშვეობით სხვადასხვა კომპონენტზე. |
$enable-transitions |
true(ნაგულისხმევი) ანfalse |
რთავს წინასწარ განსაზღვრულ transitions-ებს სხვადასხვა კომპონენტზე. |
$enable-prefers-reduced-motion-media-query |
true(ნაგულისხმევი) ანfalse |
ჩართავს prefers-reduced-motionმედია მოთხოვნას , რომელიც თრგუნავს გარკვეულ ანიმაციებს/გადასვლებს მომხმარებლის ბრაუზერის/ოპერაციული სისტემის პრეფერენციებზე დაყრდნობით. |
$enable-hover-media-query |
trueან false(ნაგულისხმევი) |
მოძველებულია |
$enable-grid-classes |
true(ნაგულისხმევი) ანfalse |
ჩართავს CSS კლასების გენერირებას ბადის სისტემისთვის (მაგ., .container, .row, .col-md-1და ა.შ.). |
$enable-caret |
true(ნაგულისხმევი) ანfalse |
ჩართავს ფსევდო ელემენტის კარეტს .dropdown-toggle. |
$enable-pointer-cursor-for-buttons |
true(ნაგულისხმევი) ანfalse |
დაამატეთ „ხელის“ კურსორი ღილაკების ელემენტებს, რომლებიც არ არის გამორთული. |
$enable-print-styles |
true(ნაგულისხმევი) ანfalse |
ჩართავს სტილებს ბეჭდვის ოპტიმიზაციისთვის. |
$enable-responsive-font-sizes |
trueან false(ნაგულისხმევი) |
ჩართავს საპასუხო შრიფტის ზომებს . |
$enable-validation-icons |
true(ნაგულისხმევი) ანfalse |
რთავს background-imageხატულებს ტექსტურ შეყვანებში და ზოგიერთ მორგებულ ფორმებს ვალიდაციის მდგომარეობებისთვის. |
$enable-deprecation-messages |
trueან false(ნაგულისხმევი) |
დააყენეთ trueგაფრთხილებების ჩვენება ნებისმიერი მოძველებული მიქსებისა და ფუნქციების გამოყენებისას, რომელთა ამოღებაც იგეგმება v5. |
ფერი
Bootstrap-ის მრავალი კომპონენტი და უტილიტა აგებულია ფერების სერიის მეშვეობით, რომლებიც განსაზღვრულია Sass რუკაზე. ეს რუკა შეიძლება შემოიფარგლოს Sass-ში, რათა სწრაფად შექმნას წესების სერია.
ყველა ფერი
ყველა ფერი ხელმისაწვდომია Bootstrap 4-ში, ხელმისაწვდომია როგორც Sass ცვლადები და Sass რუკა scss/_variables.scssფაილში. ეს გაფართოვდება მომდევნო მცირე გამოშვებებში, რათა დაემატოს დამატებითი ჩრდილები, ისევე როგორც ნაცრისფერი ფერის პალიტრა , რომელიც ჩვენ უკვე გვაქვს.
აი, როგორ შეგიძლიათ გამოიყენოთ ისინი თქვენს Sass-ში:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }ფერების სასარგებლო კლასები ასევე ხელმისაწვდომია დასაყენებლად colorდა background-color.
სამომავლოდ, ჩვენ მიზნად მივაწოდებთ Sass-ის რუქებს და ცვლადებს თითოეული ფერის ჩრდილებისთვის, როგორც ეს გავაკეთეთ ქვემოთ მოყვანილი ნაცრისფერი ფერებით.
თემის ფერები
ჩვენ ვიყენებთ ყველა ფერის ქვეჯგუფს, რათა შევქმნათ უფრო პატარა ფერის პალიტრა ფერთა სქემების გენერირებისთვის, ასევე ხელმისაწვდომია როგორც Sass ცვლადები და Sass რუკა Bootstrap-ის scss/_variables.scssფაილში.
ნაცრისფერი
ნაცრისფერი ცვლადების ვრცელი ნაკრები და Sass რუკა scss/_variables.scssთქვენს პროექტში რუხი ფერის თანმიმდევრული ჩრდილებისთვის. გაითვალისწინეთ, რომ ეს არის "მაგარი ნაცრისფერი", რომელიც მიდრეკილია დახვეწილი ლურჯი ტონისკენ, ვიდრე ნეიტრალური ნაცრისფერი.
შიგნით scss/_variables.scss, თქვენ იპოვით Bootstrap-ის ფერის ცვლადებს და Sass რუკას. აი $colorsSass რუკის მაგალითი:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;დაამატეთ, წაშალეთ ან შეცვალეთ მნიშვნელობები რუკაში, რათა განაახლოთ მათი გამოყენება ბევრ სხვა კომპონენტში. სამწუხაროდ, ამ დროისთვის, ყველა კომპონენტი არ იყენებს ამ Sass რუკას. მომავალი განახლებები შეეცდება გააუმჯობესოს ეს. მანამდე, დაგეგმეთ ${color}ცვლადების და ამ Sass რუკის გამოყენება.
კომპონენტები
Bootstrap-ის მრავალი კომპონენტი და უტილიტა აგებულია @eachმარყუჟებით, რომლებიც იმეორებენ Sass რუკაზე. ეს განსაკუთრებით სასარგებლოა ჩვენი მიერ კომპონენტის ვარიანტების გენერირებისთვის $theme-colorsდა თითოეული წყვეტის წერტილისთვის საპასუხო ვარიანტების შესაქმნელად. ამ Sass-ის რუკების მორგებისას და ხელახლა შედგენისას თქვენ ავტომატურად დაინახავთ თქვენს ცვლილებებს, რომლებიც აისახება ამ მარყუჟებში.
მოდიფიკატორები
Bootstrap-ის ბევრი კომპონენტი აგებულია ბაზის-მოდიფიკატორის კლასის მიდგომით. ეს ნიშნავს, რომ სტილის უმეტესი ნაწილი შეიცავს საბაზისო კლასს (მაგ., .btn), ხოლო სტილის ვარიაციები შემოიფარგლება მოდიფიკატორის კლასებით (მაგ., .btn-danger). მოდიფიკატორის ეს კლასები აგებულია რუქიდან $theme-colors, რათა მორგებული იყოს ჩვენი მოდიფიკატორის კლასების ნომერი და სახელი.
აქ მოცემულია ორი მაგალითი იმისა, თუ როგორ ვატრიალებთ $theme-colorsრუკაზე, რათა შევქმნათ მოდიფიკატორები .alertკომპონენტზე და ყველა ჩვენს .bg-*ფონურ პროგრამაზე.
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}საპასუხო
ეს Sass მარყუჟები არ შემოიფარგლება მხოლოდ ფერადი რუქებით. თქვენ ასევე შეგიძლიათ შექმნათ თქვენი კომპონენტების ან კომუნალური პროგრამების საპასუხო ვარიაციები. მაგალითად, ავიღოთ ჩვენი საპასუხო ტექსტის გასწორების უტილიტები, სადაც ჩვენ ვურევთ Sass რუქის @eachმარყუჟს მედია მოთხოვნის ჩათვლით.$grid-breakpoints
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}თუ თქვენ უნდა შეცვალოთ თქვენი $grid-breakpoints, თქვენი ცვლილებები გავრცელდება ყველა მარყუჟზე, რომელიც მეორდება ამ რუკაზე.
CSS ცვლადები
Bootstrap 4 მოიცავს დაახლოებით ორ ათეულ CSS პერსონალურ თვისებას (ცვლადი) მის შედგენილ CSS-ში. ეს უზრუნველყოფს მარტივ წვდომას ჩვეულებრივ გამოყენებულ მნიშვნელობებზე, როგორიცაა ჩვენი თემის ფერები, წყვეტების წერტილები და ძირითადი შრიფტების დასტა თქვენი ბრაუზერის ინსპექტორში, კოდის სავარჯიშოში ან ზოგადი პროტოტიპის შექმნისას.
ხელმისაწვდომი ცვლადები
აქ არის ცვლადები, რომლებიც ჩვენ ჩავრთავთ (გაითვალისწინეთ, რომ :rootაუცილებელია). ისინი განთავსებულია ჩვენს _root.scssფაილში.
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}მაგალითები
CSS ცვლადები გვთავაზობენ მსგავს მოქნილობას Sass-ის ცვლადებთან მიმართებაში, მაგრამ ბრაუზერში გადაცემამდე კომპილაციის საჭიროების გარეშე. მაგალითად, აქ ჩვენ ვაბრუნებთ ჩვენი გვერდის შრიფტს და ბმულის სტილებს CSS ცვლადებით.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}წყვეტის წერტილის ცვლადები
მიუხედავად იმისა, რომ ჩვენ თავდაპირველად ჩავრთეთ წყვეტის წერტილები ჩვენს CSS ცვლადებში (მაგ., --breakpoint-md), ისინი არ არის მხარდაჭერილი მედია მოთხოვნებში , მაგრამ მათი გამოყენება მაინც შესაძლებელია მედიის მოთხოვნების წესების ფარგლებში . ეს წყვეტის წერტილის ცვლადები რჩება შედგენილ CSS-ში უკანა თავსებადობისთვის, რადგან მათი გამოყენება შესაძლებელია JavaScript-ით. შეიტყვეთ მეტი სპეციფიკაში .
აქ არის მაგალითი იმისა, რაც არ არის მხარდაჭერილი:
@media (min-width: var(--breakpoint-sm)) {
...
}და აქ არის მაგალითი იმისა, თუ რა არის მხარდაჭერილი:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}