in English

Сэдэвчилсэн ачаалагч

Bootstrap 4-ийг манай шинэ суурилагдсан Sass хувьсагчаар тохируулж, загварчлал болон бүрэлдэхүүн хэсгүүдийг хялбархан өөрчлөх боломжтой.

Оршил

Bootstrap 3 дээр загварчлалыг голчлон LESS дахь хувьсагчийг дарж бичих, өөрчлөн тохируулсан CSS болон бидний distфайлууддаа оруулсан тусдаа загварын загварын хүснэгтээр удирддаг. Зарим хүчин чармайлтаар Bootstrap 3-ын үндсэн файлуудад хүрэлгүйгээр харагдах байдлыг бүрэн өөрчлөх боломжтой. Bootstrap 4 нь танил боловч арай өөр аргыг санал болгодог.

Одоо загварчлалыг Sass хувьсагч, Sass газрын зураг, захиалгат CSS ашиглан хийж байна. Тусгай зориулалтын загварын хуудас байхгүй; Үүний оронд та градиент, сүүдэр болон бусад зүйлийг нэмэхийн тулд суурилуулсан загварыг идэвхжүүлж болно.

Сасс

Өөрийн хөрөнгийн дамжуулах хоолойг ашиглан 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/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";

Энэ тохиргоог хийснээр та өөрийн custom.scss. Та шаардлагатай бол Bootstrap-ийн хэсгүүдийг тухайн хэсгийн доор нэмж эхэлж болно // Optional. Манай bootstrap.scssфайлын бүрэн импортын стекийг эхлэх цэг болгон ашиглахыг бид санал болгож байна.

Хувьсагчийн өгөгдмөл

Bootstrap дахь Sass хувьсагч бүр нь !defaultBootstrap-ийн эх кодыг өөрчлөхгүйгээр өөрийн Sass дээрх хувьсагчийн өгөгдмөл утгыг дарах боломжийг олгодог туг агуулдаг. Шаардлагатай бол хувьсагчдыг хуулж, буулгаж, утгыг нь өөрчилж, !defaultтугийг устгана уу. Хэрэв хувьсагч аль хэдийн томилогдсон бол Bootstrap дээрх өгөгдмөл утгуудаар дахин хуваарилагдахгүй.

Та Bootstrap-ийн хувьсагчийн бүрэн жагсаалтыг эндээс олох болно scss/_variables.scss. Зарим хувьсагчдыг -аар тохируулсан бөгөөд nullэдгээр хувьсагч нь таны тохиргоонд дарагдаагүй л бол өмчийг гаргахгүй.

Хувьсагчийг дарж бичих нь бидний функц, хувьсагч, холимогийг импортолсоны дараа, харин бусад импортын өмнө ирэх ёстой.

npm-ээр дамжуулан Bootstrap-г импортлох, эмхэтгэх үед background-colorболон color-г өөрчилдөг жишээ энд байна :<body>

@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 дээрх аливаа хувьсагчдад шаардлагатай бол давт.

Манай эхлүүлэх төслийн тусламжтайгаар npm-ээр Bootstrap-ийг эхлүүлээрэй! twbs /bootstrap-npm-starter загварын агуулах руу орж өөрийн npm төсөл дээрээ Bootstrap-г хэрхэн бүтээх, өөрчлөх талаар харна уу. Sass хөрвүүлэгч, Autoprefixer, Stylelint, PurgeCSS болон Bootstrap Icons багтана.

Газрын зураг ба гогцоо

Bootstrap 4 нь CSS-ийн гэр бүлүүдийг үүсгэхэд хялбар болгодог цөөн тооны Sass газрын зураг, гол утгын хосуудыг агуулдаг. Бид өнгө, сүлжээний таслах цэг болон бусад зүйлд 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);
}

Эдгээр нь v3-ийн өнгөт хувьсагчийг хэрхэн ашигладагтай адил Sass газрын зургаас нэг өнгө сонгох боломжийг танд олгоно.

.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`
}

SVG-ээс зугтах

Бид SVG дэвсгэр зургийн , болон тэмдэгтүүдээс escape-svgзайлсхийх функцийг ашигладаг. IE дээр дэвсгэр зургийг зөв гаргахын тулд эдгээр тэмдэгтүүдээс зугтах шаардлагатай. Функцийг ашиглахдаа өгөгдлийн URI-г иш татсан байх ёстой.<>#escape-svg

Нэмэх, хасах функцууд

Бид CSS функцийг боохдоо addболон функцуудыг ашигладаг . Эдгээр функцүүдийн гол зорилго нь илэрхийлэлд "нэгжгүй" утгыг шилжүүлэхэд алдаа гарахаас зайлсхийх явдал юм. Ийм илэрхийлэл нь математикийн хувьд зөв байсан ч бүх хөтөч дээр алдаа гаргана.subtractcalc0calccalc(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 хэрэгслүүдийг программчлан үүсгэхийн тулд анхдагч зайны утгыг зааж өгдөг .
$enable-rounded true(анхдагч) эсвэлfalse border-radiusТөрөл бүрийн бүрэлдэхүүн хэсгүүдэд урьдчилан тодорхойлсон хэв маягийг идэвхжүүлдэг .
$enable-shadows trueэсвэл false(өгөгдмөл) box-shadowТөрөл бүрийн бүрэлдэхүүн хэсгүүдэд урьдчилан тодорхойлсон гоёл чимэглэлийн хэв маягийг идэвхжүүлдэг . box-shadowФокус төлөвт ашиглахад нөлөөлөхгүй .
$enable-gradients trueэсвэл false(өгөгдмөл) background-imageТөрөл бүрийн бүрэлдэхүүн хэсгүүдийн хэв маягаар дамжуулан урьдчилан тодорхойлсон градиентийг идэвхжүүлдэг .
$enable-transitions true(анхдагч) эсвэлfalse transitionТөрөл бүрийн бүрэлдэхүүн хэсгүүд дээр урьдчилан тодорхойлсон s-г идэвхжүүлнэ .
$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 false-д устгахаар төлөвлөж буй хуучирсан холимог болон функцуудыг ашиглах үед анхааруулгыг нуухаар ​​тохируулна уу v5.

Өнгө

Bootstrap-ийн олон янзын бүрэлдэхүүн хэсгүүд болон хэрэгслүүд нь Sass газрын зурагт тодорхойлогдсон өнгөний цуваагаар бүтээгдсэн байдаг. Хэд хэдэн дүрмийн багцыг хурдан үүсгэхийн тулд энэ газрын зургийг Сасс руу эргүүлж болно.

Бүх өнгө

Bootstrap 4 дээр байгаа бүх өнгийг Sass хувьсагч болон scss/_variables.scssфайл дахь Sass газрын зураг хэлбэрээр авах боломжтой. Үүнийг бидний оруулсан саарал өнгийн палитр шиг нэмэлт сүүдэр нэмэхийн тулд дараагийн жижиг хувилбаруудад өргөжүүлэх болно.

$цэнхэр #007bff
$индиго #6610f2
$ нил ягаан #6f42c1
$ягаан #e83e8c
$ улаан #dc3545
$ улбар шар #fd7e14
$ шар #ffc107
$ногоон #28a745
$ цайвар #20c997
$цян #17a2b8

Та эдгээрийг Sass дээрээ хэрхэн ашиглаж болохыг эндээс үзнэ үү:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Өнгөний хэрэглээний ангиуд нь мөн тохиргоо colorболон background-color.

Цаашид бид доорх саарал өнгийн өнгөнүүдийг хийсэн шиг өнгө бүрийн сүүдэрт зориулсан Sass газрын зураг болон хувьсагчдыг өгөхийг зорьж байна.

Сэдвийн өнгө

Бид өнгөний схемийг үүсгэхийн тулд жижиг өнгөт палитр үүсгэхийн тулд бүх өнгөний дэд багцыг ашигладаг бөгөөд үүнийг Sass хувьсагч болон Bootstrap scss/_variables.scssфайл дахь Sass газрын зураг хэлбэрээр ашиглах боломжтой.

$үндсэн #007bff
$хоёрдогч #6c757d
$ амжилт #28a745
$ аюул #dc3545
$ Анхааруулга #ffc107
$ мэдээлэл #17a2b8
$ гэрэл #f8f9fa
$харанхуй #343a40

Саарал

Саарал хэмжигдэхүүний өргөн багц ба Sass газрын зураг нь scss/_variables.scssтаны төсөлд тогтвортой саарал өнгийг харуулдаг. Эдгээр нь төвийг сахисан саарал биш харин нарийн хөх өнгөтэй байдаг "сэрүүн саарал" гэдгийг анхаарна уу.

$ саарал-100 #f8f9fa
саарал-200 доллар #e9ecef
саарал-300 доллар #dee2e6
саарал-400 доллар #ced4da
саарал-500 доллар #adb5bd
саарал-600 доллар #6c757d
саарал-700 доллар #495057
саарал-800 доллар #343a40
саарал-900 доллар #212529

Дотор scss/_variables.scssнь та Bootstrap-ийн өнгөт хувьсагч болон Sass газрын зургийг олох болно. $colorsСасс газрын зургийн жишээ энд байна :

$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;

Газрын зураг дээрх утгуудыг нэмэх, хасах эсвэл өөр олон бүрэлдэхүүн хэсгүүдэд хэрхэн ашиглаж байгааг шинэчлэх. Харамсалтай нь энэ үед бүх бүрэлдэхүүн хэсэг нь энэ Сасс газрын зургийг ашигладаггүй. Ирээдүйн шинэчлэлтүүд үүнийг сайжруулахыг хичээх болно. Тэр болтол ${color}хувьсагч болон энэхүү Сасс газрын зургийг ашиглахаар төлөвлөж байгаарай.

Бүрэлдэхүүн хэсгүүд

Bootstrap-ийн ихэнх бүрэлдэхүүн хэсгүүд болон хэрэгслүүд нь @eachSass газрын зураг дээр давтагддаг гогцоонуудаар бүтээгдсэн. Энэ нь ялангуяа манай бүрэлдэхүүн хэсгийн $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 газрын зургийн @eachгогцоог $grid-breakpointsмедиа асуулгатай хольсон манай responsive text зэрэглэлийн хэрэгслүүдийг авч үзье.

@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 хувийн шинж чанарыг (хувьсагч) агуулдаг . Эдгээр нь таны хөтчийн Inspector, кодын хамгаалагдсан хязгаарлагдмал орчинд эсвэл ерөнхий загварчлал дээр ажиллах үед манай загварын өнгө, таслах цэг, үндсэн фонтын стек зэрэг түгээмэл хэрэглэгддэг утгуудад хялбар хандах боломжийг олгодог.

Боломжтой хувьсагч

Энд бидний оруулсан хувьсагчууд байна ( :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", "Liberation 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) таслах цэгүүдийг оруулсан хэдий ч эдгээр нь медиа асуулгад дэмжигддэггүй , гэхдээ тэдгээрийг медиа асуулгад дүрмийн багц дотор ашиглах боломжтой хэвээр байна . Эдгээр таслах цэгийн хувьсагчууд нь JavaScript-ээр ашиглах боломжтой тул буцаах нийцтэй байх үүднээс эмхэтгэсэн CSS-д үлддэг. Тодорхойлолтоос илүү ихийг мэдэж аваарай .

Дэмжигдээгүй зүйлийн жишээ энд байна :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Дэмжигдсэн зүйлийн жишээ энд байна :

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}