Сасс

Манай 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

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

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

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

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

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

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

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

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

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

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

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

Бид 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);
}

Холимог

Манай 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
  }
}