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";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
Ошол орнотуу менен, сиз Sass өзгөрмөлөрүнүн жана карталарыңыздын каалаганын өзгөртө баштасаңыз болот custom.scss
. // Optional
Ошондой эле зарыл болгон бөлүмдүн астына Bootstrap бөлүктөрүн кошо баштасаңыз болот . bootstrap.scss
Баштапкы чекит катары биздин файлдан толук импорттук стекти колдонууну сунуштайбыз .
Variable демейки
Bootstrap ичиндеги ар бир Sass өзгөрмөлөрү !default
Bootstrap'тын баштапкы кодун өзгөртпөстөн, өз 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/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 бир нече 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
. Аны биздин талаптар менен варианттардын ортосуна киргизишиңиз керек экенин унутпаңыз:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// 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()
Бул функциялар түстөрдү кара же ак менен аралаштырышат , Sassтын жергиликтүү 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 2.0 түстүү контрасттын жеткиликтүүлүк стандарттарына жооп берүү үчүн , авторлор эң аз бөтөнчөлөрдү эске албаганда, кеминде 4,5:1 контраст катышын камсыз кылышы керек .
Bootstrap программасына биз киргизген кошумча функция бул түс контраст функциясы, color-contrast
. Ал WCAG 2.0 алгоритмин түс мейкиндигиндеги салыштырмалуу жарыкка негизделген контрасттын босогосун эсептөө үчүн , көрсөтүлгөн негизги түскө негизделген ачык ( ), кара ( ) же кара ( ) контраст түсүн 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);
}
Mixins
Биздин 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
}
}