Sass

Долбооруңузду тезирээк курууга жана ыңгайлаштырууга жардам берүү үчүн өзгөрмөлөрдөн, карталардан, аралашмалардан жана функциялардан пайдалануу үчүн булак 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

Ошол орнотуу менен, сиз Sass өзгөрмөлөрүнүн жана карталарыңыздын каалаганын өзгөртө баштасаңыз болот custom.scss. // OptionalОшондой эле зарыл болгон бөлүмдүн астына Bootstrap бөлүктөрүн кошо баштасаңыз болот . bootstrap.scssБаштапкы чекит катары биздин файлдан толук импорттук стекти колдонууну сунуштайбыз .

Variable демейки

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 шаблон репозиторийине баш багыңыз жана Bootstrapти өзүңүздүн npm долбооруңузда кантип курууну жана ыңгайлаштырууну көрүү. Sass компилятору, Autoprefixer, Stylelint, PurgeCSS жана 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
);

Картага кошуу

Өзүңүздүн ыңгайлаштырылган баалуулуктарыңыз менен жаңы Sass картасын түзүп, аны баштапкы карта менен бириктирүү менен жаңы түстөрдү $theme-colorsже башка картага кошуңуз. Бул учурда, биз жаңы $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;
}

tint-color()Bootstrap жана shade-color()функциялары менен түстөрдү ачык же күңүрт кыла аласыз . 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`
}

Escape SVG

SVG фон сүрөттөрү үчүн , жана символдорунан escape-svgкачуу үчүн функцияны колдонобуз . Функцияны колдонууда маалыматтардын URI'лери цитаталанышы керек.<>#escape-svg

Кошуу жана кемитүү функциялары

Биз addжана subtractфункцияларын CSS 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колдоо менен жеткиликтүү .lightdark

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