Sass

Tezroq qurish va loyihangizni sozlashda yordam berish uchun o‘zgaruvchilar, xaritalar, miksinlar va funksiyalardan foydalanish uchun manba Sass fayllarimizdan foydalaning.

Ushbu sahifada

O'zgaruvchilar, xaritalar, miksinlar va boshqalardan foydalanish uchun manba Sass fayllarimizdan foydalaning.

Fayl tuzilishi

Iloji bo'lsa, Bootstrap-ning asosiy fayllarini o'zgartirmang. Sass uchun bu Bootstrap-ni import qiladigan o'z uslublar jadvalingizni yaratishni anglatadi, shunda siz uni o'zgartirishingiz va kengaytirishingiz mumkin. Agar siz npm kabi paket menejeridan foydalanayotgan bo'lsangiz, sizda shunday ko'rinadigan fayl tuzilmasi bo'ladi:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Agar siz bizning manba fayllarimizni yuklab olgan bo'lsangiz va paket menejeridan foydalanmasangiz, Bootstrap-ning manba fayllarini o'zingizdan ajratib qo'ygan holda, o'sha tuzilishga o'xshash narsani qo'lda yaratishni xohlaysiz.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Import qilinmoqda

Sizning custom.scss, siz Bootstrap-ning manba Sass fayllarini import qilasiz. Sizda ikkita variant bor: barcha Bootstrap-ni qo'shing yoki kerakli qismlarni tanlang. Biz ikkinchisini rag'batlantiramiz, ammo bizning komponentlarimizda ba'zi talablar va bog'liqliklar mavjudligini biling. Shuningdek, plaginlarimiz uchun JavaScript-ni qo'shishingiz kerak bo'ladi.

// 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

Ushbu o'rnatish joyida siz Sass o'zgaruvchilari va xaritalaringizdan istalganini o'zgartirishni boshlashingiz mumkin custom.scss. // OptionalBundan tashqari , kerak bo'lganda bo'lim ostida Bootstrap qismlarini qo'shishni boshlashingiz mumkin . bootstrap.scssBoshlanish nuqtasi sifatida faylimizdagi to'liq import stekidan foydalanishni tavsiya qilamiz .

O'zgaruvchan standart

Bootstrap'dagi har bir Sass o'zgaruvchisi !defaultBootstrap manba kodini o'zgartirmasdan o'z Sass'ingizda o'zgaruvchining standart qiymatini bekor qilish imkonini beruvchi bayroqni o'z ichiga oladi. Agar kerak bo'lsa, o'zgaruvchilardan nusxa ko'chiring va joylashtiring, ularning qiymatlarini o'zgartiring va !defaultbayroqni olib tashlang. Agar o'zgaruvchi allaqachon tayinlangan bo'lsa, u Bootstrap'dagi standart qiymatlar bo'yicha qayta tayinlanmaydi.

Bootstrap o'zgaruvchilarining to'liq ro'yxatini bo'limda topasiz scss/_variables.scss. Ba'zi o'zgaruvchilar ga o'rnatilgan null, bu o'zgaruvchilar konfiguratsiyangizda bekor qilinmaguncha xususiyatni chiqarmaydi.

O'zgaruvchilarni bekor qilish funksiyalarimiz import qilingandan keyin, ammo qolgan importlardan oldin kelishi kerak.

Bootstrap-ni npm orqali import qilish va kompilyatsiya qilishda va background-colorni coloro'zgartiradigan misol :<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-dagi har qanday o'zgaruvchi, jumladan quyidagi global parametrlar uchun kerak bo'lganda takrorlang.

Boshlang'ich loyihamiz bilan npm orqali Bootstrap-ni ishga tushiring! O'zingizning npm loyihangizda Bootstrap-ni qanday yaratish va sozlashni ko'rish uchun twbs/bootstrap-npm-starter shablonlari omboriga o'ting. Sass kompilyatori, Autoprefixer, Stylelint, PurgeCSS va Bootstrap piktogrammalarini o'z ichiga oladi.

Xaritalar va tsikllar

Bootstrap bir nechta Sass xaritalarini, tegishli CSS oilalarini yaratishni osonlashtiradigan asosiy qiymat juftlarini o'z ichiga oladi. Biz Sass xaritalaridan ranglarimiz, to'rning uzilish nuqtalari va boshqalar uchun foydalanamiz. Xuddi Sass o'zgaruvchilari kabi, barcha Sass xaritalari !defaultbayroqni o'z ichiga oladi va ularni bekor qilish va kengaytirish mumkin.

Ba'zi Sass xaritalarimiz sukut bo'yicha bo'sh xaritalarga birlashtirilgan. Bu ma'lum bir Sass xaritasini oson kengaytirish uchun amalga oshiriladi, lekin xaritadan elementlarni olib tashlashni biroz qiyinlashtiradi.

Xaritani o'zgartirish

Xaritadagi barcha o'zgaruvchilar $theme-colorsmustaqil o'zgaruvchilar sifatida aniqlanadi. Xaritamizdagi mavjud rangni o'zgartirish uchun $theme-colorsSass faylingizga quyidagilarni qo'shing:

$primary: #0074d9;
$danger: #ff4136;

Keyinchalik, bu o'zgaruvchilar Bootstrap $theme-colorsxaritasida o'rnatiladi:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Xaritaga qo'shish

$theme-colorsShaxsiy qiymatlaringiz bilan yangi Sass xaritasini yaratish va uni asl xarita bilan birlashtirish orqali ga yoki boshqa har qanday xaritaga yangi ranglar qo'shing . Bunday holda, biz yangi $custom-colorsxarita yaratamiz va uni bilan birlashtiramiz $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Xaritadan olib tashlash

$theme-colorsdan yoki boshqa xaritadan ranglarni olib tashlash uchun dan foydalaning map-remove. Shuni yodda tutingki, siz $theme-colorsbizning talablarimiz orasiga uning ta'rifidan keyin variablesva uni ishlatishdan oldin kiritishingiz kerak 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

Kerakli kalitlar

Bootstrap Sass xaritalarida ba'zi o'ziga xos kalitlar mavjudligini taxmin qiladi, chunki biz ularni o'zimiz ishlatgan va kengaytirganmiz. Qo'shilgan xaritalarni moslashtirganingizda, ma'lum bir Sass xaritasining kalitidan foydalanilganda xatolarga duch kelishingiz mumkin.

Masalan, havolalar, tugmalar va shakl holatlari uchun primary, success, va dangertugmalaridan foydalanamiz. $theme-colorsUshbu kalitlarning qiymatlarini almashtirish hech qanday muammo tug'dirmasligi kerak, ammo ularni olib tashlash Sass kompilyatsiyasi bilan bog'liq muammolarga olib kelishi mumkin. Bunday hollarda siz ushbu qiymatlardan foydalanadigan Sass kodini o'zgartirishingiz kerak bo'ladi.

Funksiyalar

Ranglar

Bizda mavjud bo'lgan Sass xaritalari yonida mavzu ranglari mustaqil o'zgaruvchilar sifatida ham ishlatilishi mumkin, masalan $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

tint-color()Bootstrap va shade-color()funksiyalar yordamida ranglarni ochish yoki qoraytirish mumkin . Bu funksiyalar ranglarni qora yoki oq bilan aralashtirib yuboradi, Sassning mahalliy funksiyalaridan farqli o'laroq lighten(), darken()yorug'likni belgilangan miqdorda o'zgartiradi, bu ko'pincha kerakli effektga olib kelmaydi.

// 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));
}

Amalda siz funktsiyani chaqirasiz va rang va vazn parametrlarini kiritasiz.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Rang kontrasti

Veb-kontentga kirish bo'yicha qo'llanmalar (WCAG) kontrasti talablariga javob berish uchun mualliflar minimal matn rangi kontrastini 4,5:1 va matn bo'lmagan ranglarning minimal kontrastini 3:1 , juda kam istisnolardan tashqari, taqdim etishlari kerak .

Bunga yordam berish uchun biz color-contrastfunktsiyani Bootstrap-ga kiritdik. Belgilangan asosiy rang asosida ochiq ( ), quyuq ( ) yoki qora ( ) kontrast rangini avtomatik ravishda qaytarish uchun rang maydonidagi nisbiy yorqinlikka asoslangan kontrast chegaralarini hisoblash uchun WCAG kontrast nisbati algoritmidan foydalanadi. Bu funksiya, ayniqsa, bir nechta sinflarni yaratayotgan miksinlar yoki looplar uchun foydalidir.sRGB#fff#212529#000

Masalan, xaritamizdan rang namunalarini yaratish uchun $theme-colors:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Bundan tashqari, bir martalik kontrast ehtiyojlari uchun ham foydalanish mumkin:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Rangli xarita funksiyalarimiz yordamida asosiy rangni ham belgilashingiz mumkin:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

SVGdan qochish

Biz SVG fon tasvirlari uchun , va belgilardan escape-svgqochish funksiyasidan foydalanamiz. Funktsiyadan foydalanganda ma'lumotlar URI'lari kotirovka qilinishi kerak.<>#escape-svg

Qo'shish va ayirish funktsiyalari

Biz CSS funktsiyasini o'rash uchun addva funksiyalaridan foydalanamiz . Ushbu funktsiyalarning asosiy maqsadi ifodaga "birliksiz" qiymat berilganda xatolarga yo'l qo'ymaslikdir . Kabi iboralar matematik jihatdan to'g'ri bo'lishiga qaramay, barcha brauzerlarda xatolikni qaytaradi.subtractcalc0calccalc(10px - 0)

Hisob to'g'ri bo'lgan misol:

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

Hisob noto'g'ri bo'lgan misol:

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

Aralashmalar

Bizning scss/mixins/katalogimizda Bootstrap qismlarini quvvatlaydigan va o'z loyihangizda ham foydalanish mumkin bo'lgan tonna miksinlar mavjud.

Rang sxemalari

prefers-color-schemeMedia so'rovi uchun stenografiya aralashmasi light, darkva moslashtirilgan rang sxemalarini qo'llab-quvvatlash bilan mavjud.

@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
  }
}