Сасс

Файлҳои сарчашмаи 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, шумо файлҳои манбаи Sass-и Bootstrap-ро ворид мекунед. Шумо ду интихоб доред: ҳамаи 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

Бо он насбкунӣ, шумо метавонед ба тағир додани ҳама гуна тағирёбандаҳо ва харитаҳои Sass дар custom.scss. Шумо инчунин метавонед ба илова кардани қисмҳои Bootstrap дар // Optionalқисмати зарурӣ оғоз кунед. Мо тавсия медиҳем, ки стеки пурраи воридотро аз bootstrap.scssфайли мо ҳамчун нуқтаи ибтидоии худ истифода барем.

Пешфарзҳои тағирёбанда

Ҳар як тағирёбандаи Sass дар Bootstrap дорои !defaultпарчамест, ки ба шумо имкон медиҳад, ки арзиши пешфарзи тағирёбандаро дар Sass-и худ бе тағир додани коди ибтидоии Bootstrap бекор кунед. Ҳангоми зарурат тағирёбандаҳоро нусхабардорӣ ва часбонед, арзишҳои онҳоро тағир диҳед ва !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, аз ҷумла имконоти глобалии дар зер зарур бударо такрор кунед.

Бо лоиҳаи ибтидоии мо бо Bootstrap тавассути npm оғоз кунед! Ба анбори қолаби twbs/bootstrap-npm-starter равед, то бубинед, ки чӣ гуна Bootstrap-ро дар лоиҳаи npm худ созед ва танзим кунед. Компилятори Sass, Autoprefixer, Stylelint, PurgeCSS ва Icons Bootstrap-ро дар бар мегирад.

Харитаҳо ва ҳалқаҳо

Bootstrap як қатор харитаҳои Sass, ҷуфтҳои арзишмандро дар бар мегирад, ки тавлиди оилаҳои CSS-и марбутро осонтар мекунанд. Мо харитаҳои Sass-ро барои рангҳои худ, нуқтаҳои шикастани шабака ва ғайра истифода мебарем. Мисли тағирёбандаҳои Sass, ҳама харитаҳои Sass !defaultпарчамро дар бар мегиранд ва онҳоро бекор кардан ва васеъ кардан мумкин аст.

Баъзе харитаҳои Sass мо ба таври нобаёнӣ ба харитаҳои холӣ муттаҳид карда мешаванд. Ин барои васеъ кардани осони харитаи додашудаи Sass анҷом дода мешавад, аммо ба арзиши хориҷ кардани ҷузъҳо аз харита каме мушкилтар мешавад.

Тағир додани харита

Ҳама тағирёбандаҳо дар $theme-colorsхарита ҳамчун тағирёбандаҳои мустақил муайян карда мешаванд. Барои тағир додани ранги мавҷуда дар $theme-colorsхаритаи мо, ба файли фармоишии Sass инҳоро илова кунед:

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

Баъдтар, ин тағирёбандаҳо дар $theme-colorsхаритаи Bootstrap муқаррар карда мешаванд:

$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

Мо ин escape-svgфунксияро барои фирор аз аломатҳои <, >ва #барои тасвирҳои заминаи SVG истифода мебарем. Ҳангоми истифодаи escape-svgфунксия, URI-ҳои маълумот бояд иқтибос оварда шаванд.

Функсияҳои Илова ва Тарҳ

Мо функсияҳои варо барои addпечонидани функсияи subtractCSS истифода мебарем calc. Мақсади асосии ин функсияҳо пешгирӣ кардани хатогиҳо ҳангоми интиқоли арзиши "бе воҳид" 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
  }
}