Тақырыптық жүктеу жолы

Тақырыптарды және құрамдас бөліктерді оңай өзгерту үшін жаһандық стиль таңдаулары үшін жаңа кірістірілген Sass айнымалыларымен Bootstrap 4-ті теңшеңіз.

Кіріспе

Bootstrap 3-те тақырып негізінен LESS ішіндегі айнымалыларды қайта анықтаумен, реттелетін CSS және distфайлдарымызға енгізілген бөлек тақырыптық стильдер кестесімен негізделді. Біраз күш жұмсап, негізгі файлдарға қол тигізбестен Bootstrap 3 көрінісін толығымен қайта жасауға болады. Bootstrap 4 таныс, бірақ сәл өзгеше тәсілді ұсынады.

Енді тақырыпты Sass айнымалылары, Sass карталары және реттелетін CSS орындайды. Арнайы тақырыптық стильдер кестесі жоқ; оның орнына градиенттер, көлеңкелер және т.б. қосу үшін кірістірілген тақырыпты қосуға болады.

Сасс

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.scssBootstrap бастапқы 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";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Бұл орнату орнында сіз өзіңіздің Sass айнымалылары мен карталарының кез келгенін өзгертуді бастай аласыз custom.scss. // OptionalҚажет болса, бөлімнің астына Bootstrap бөліктерін қосуды бастауға болады . Бізден толық импорттық стек пайдалануды ұсынамызbootstrap.scssБастапқы нүкте ретінде

Айнымалы әдепкі мәндер

Bootstrap ішіндегі әрбір Sass айнымалысы !defaultBootstrap бастапқы кодын өзгертпестен жеке Sass жүйесінде айнымалының әдепкі мәнін қайта анықтауға мүмкіндік беретін жалаушаны қамтиды. Қажет болса, айнымалы мәндерді көшіріп, қойыңыз, олардың мәндерін өзгертіңіз және өшіріңіз!default жалаушаны жойыңыз. Айнымалы мән әлдеқашан тағайындалған болса, ол Bootstrap бағдарламасындағы әдепкі мәндер арқылы қайта тағайындалмайды.

Bootstrap айнымалыларының толық тізімін мына жерден табасыз scss/_variables.scss. Кейбір айнымалылар үшін орнатылғанnull , бұл айнымалылар конфигурацияңызда қайта анықталмағанша сипатты шығармайды.

Айнымалыларды қайта анықтау функцияларымыз, айнымалыларымыз және араластырғыштар импортталғаннан кейін, бірақ импорттың қалған бөлігінен бұрын келуі керек.

Мұнда npm арқылы Bootstrap импорттау және құрастыру кезінде background-colorжәне colorүшін өзгертетін мысал келтірілген :<body>

@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";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Төмендегі ғаламдық опцияларды қоса, Bootstrap ішіндегі кез келген айнымалы үшін қажетінше қайталаңыз.

Карталар мен циклдар

Bootstrap 4 бірнеше Sass карталарын, сәйкес CSS отбасыларын құруды жеңілдететін негізгі мән жұптарын қамтиды. Біз Sass карталарын түстеріміз, тордың тоқтау нүктелері және т.б. үшін пайдаланамыз. Sass айнымалылары сияқты, барлық Sass карталары !defaultжалаушаны қамтиды және оларды қайта анықтауға және кеңейтуге болады.

Кейбір Sass карталары әдепкі бойынша бос карталарға біріктірілген. Бұл берілген Sass картасын оңай кеңейтуге мүмкіндік беру үшін жасалады, бірақ картадан элементтерді жоюды біршама қиындатады.

Картаны өзгерту

Картамыздағы бар түсті өзгерту үшін $theme-colorsтеңшелетін Sass файлыңызға келесіні қосыңыз:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Картаға қосу

Жаңа түс $theme-colorsқосу үшін жаңа кілт пен мәнді қосыңыз:

$theme-colors: (
  "custom-color": #900
);

Картадан жою

Түстерді жою үшін $theme-colorsнемесе кез келген басқа картаны пайдаланыңыз map-remove. Оны біздің талаптарымыз бен опцияларымыздың арасына енгізу керек екенін ескеріңіз:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Қажетті кілттер

Bootstrap Sass карталарында кейбір арнайы кілттердің болуын болжайды, өйткені біз оларды өзіміз қолданып, кеңейтеміз. Қосылған карталарды теңшеген кезде, белгілі бір Sass картасының кілті пайдаланылған кезде қателерге тап болуыңыз мүмкін.

Мысалы, сілтемелер, түймелер және пішін күйлері үшін primary, success, және dangerпернелерін пайдаланамыз. $theme-colorsБұл кілттердің мәндерін ауыстыру ешқандай мәселе тудырмауы керек, бірақ оларды жою Sass компиляция мәселелерін тудыруы мүмкін. Бұл жағдайларда сол мәндерді пайдаланатын Sass кодын өзгерту қажет болады.

Функциялар

Bootstrap бірнеше Sass функцияларын пайдаланады, бірақ жалпы тақырыпқа тек ішкі жиын ғана қолданылады. Түс карталарынан мәндерді алу үшін біз үш функцияны қостық:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Бұл v3-тен түс айнымалысын қалай пайдаланатын сияқты Sass картасынан бір түсті таңдауға мүмкіндік береді.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Сондай-ақ бізде картадан белгілі бір түс деңгейін алуға арналған тағы бір функция бар. $theme-colorsТеріс деңгей мәндері түсті ағартады, ал жоғары деңгейлер күңгірттенеді.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Іс жүзінде сіз функцияны шақырып, екі параметрді бересіз: түс атауы $theme-colors(мысалы, негізгі немесе қауіпті) және сандық деңгей.

.custom-element {
  color: theme-color-level(primary, -10);
}

Қосымша Sass карталары үшін деңгей функцияларын жасау үшін болашақта қосымша функцияларды немесе жеке Sass қосуға болады, немесе егер сіз егжей-тегжейлі болғыңыз келсе, тіпті жалпы.

Түс контрасты

Bootstrap жүйесіне қосатын қосымша функция - бұл түс контрасты функциясы color-yiq. Ол көрсетілген негізгі түске негізделген ашық ( ) немесе күңгірт ( ) контраст түсті автоматты түрде қайтару үшін YIQ түс кеңістігін пайдаланады. Бұл функция әсіресе бірнеше сыныпты жасайтын миксиндер немесе циклдар үшін пайдалы.#fff#111

Мысалы, біздің $theme-colorsкартадан түс үлгілерін жасау үшін:

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

Оны бір реттік контраст қажеттіліктері үшін де пайдалануға болады:

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

Сондай-ақ, негізгі түсті біздің түсті карта функцияларымызбен көрсетуге болады:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Escape SVG

Біз SVG фондық кескіндер үшін , және таңбаларынан escape-svgқұтылу үшін функцияны қолданамыз. Фондық кескіндерді IE жүйесінде дұрыс көрсету үшін бұл таңбалардан құтылу керек. Функцияны пайдаланған кезде деректер 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);
}

Sass опциялары

Bootstrap 4 қолданбасын кірістірілген теңшелетін айнымалылар файлымен теңшеңіз және жаңа $enable-*Sass айнымалыларымен жаһандық CSS теңшелімдерін оңай ауыстырыңыз. Айнымалының мәнін қайта анықтап, онымен қайта құрастырыңызnpm run test , қажетінше онымен қайта құрастырыңыз.

scss/_variables.scssBootstrap файлындағы негізгі жаһандық опциялар үшін осы айнымалы мәндерді табуға және теңшеуге болады .

Түс

Bootstrap түрлі компоненттері мен утилиталарының көпшілігі Sass картасында анықталған түстер қатары арқылы жасалған. Бұл картаны бірнеше ережелер жиынын жылдам жасау үшін Sass жүйесінде айналдыруға болады.

Барлық түстер

Bootstrap 4 нұсқасында қол жетімді барлық түстер Sass айнымалылары және scss/_variables.scssфайлдағы Sass картасы ретінде қол жетімді. Бұл біз қосқан сұр реңк палитрасы сияқты қосымша реңктерді қосу үшін кейінгі шағын шығарылымдарда кеңейтіледі .

Оларды Sass-те қалай пайдалануға болады:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Түс утилитасының сыныптарыcolor да орнату үшін қол жетімдіbackground-color .

Тақырып түстері

Түс схемаларын жасау үшін кішірек түстер палитрасын жасау үшін барлық түстердің жиынын қолданамыз, сонымен қатар Bootstrap scss/_variables.scssфайлында Sass айнымалылары және Sass картасы ретінде қолжетімді.

Сұр түсті

Сұр айнымалылардың кең жиынтығы және scss/_variables.scssжобаңыздағы сұр түстің тұрақты реңктері үшін Sass картасы. Бұл бейтарап сұр емес, нәзік көк реңкке бейім «салқын сұрлар» екенін ескеріңіз.

ішінде scss/_variables.scssBootstrap түсінің айнымалы мәндерін және Sass картасын табасыз. Мұнда $colorsSass картасының мысалы келтірілген:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Көптеген басқа құрамдастарда қолданылу жолын жаңарту үшін картаға мәндерді қосыңыз, жойыңыз немесе өзгертіңіз. Өкінішке орай, қазіргі уақытта әрбір компонент бұл Sass картасын пайдаланбайды. Болашақ жаңартулар мұны жақсартуға тырысады. Осы уақытқа дейін ${color}айнымалы мәндерді және осы Sass картасын пайдалануды жоспарлаңыз.

Құрамдас бөліктер

Көптеген Bootstrap компоненттері мен утилиталары @eachSass картасын қайталайтын циклдармен жасалған. Бұл әсіресе біздің құрамдас $theme-colorsнұсқаларды жасау және әрбір тоқтау нүктесі үшін жауап беретін нұсқаларды жасау үшін пайдалы. Осы Sass карталарын реттеп, қайта құрастырған кезде, осы циклдерде көрсетілген өзгерістерді автоматты түрде көресіз.

Модификаторлар

Bootstrap компоненттерінің көпшілігі базалық модификатор класының тәсілімен құрастырылған. Бұл сәндеудің негізгі бөлігі негізгі сыныпқа (мысалы, .btn) кіретінін білдіреді, ал стиль нұсқалары модификатор кластарымен шектеледі (мысалы, .btn-danger). Бұл модификатор кластары $theme-colorsбіздің модификатор класстарымыздың саны мен атауын теңшеу үшін картадан құрастырылған.

Мұнда компонентке және барлық фондық утилиталарға $theme-colorsмодификаторларды жасау үшін картаны айналдырудың екі мысалы берілген ..alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Жауапты

Бұл Sass циклдері түсті карталармен шектелмейді. Сондай-ақ құрамдастардың немесе утилиталардың жауап беретін нұсқаларын жасауға болады. Мысалы, жауап беретін мәтінді туралау утилиталарын алайық, мұнда біз Sass картасы үшін @eachциклды $grid-breakpointsмедиа сұраумен араластырамыз.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Егер сізге өзгерту қажет болса $grid-breakpoints, өзгертулер сол картада қайталанатын барлық циклдерге қолданылады.

CSS айнымалылары

Bootstrap 4 құрастырылған CSS-де шамамен екі ондаған CSS теңшелетін қасиеттерін (айнымалылар) қамтиды . Бұл шолғыштың инспекторында, код құм жәшігінде немесе жалпы прототипте жұмыс істегенде тақырып түстері, тоқтау нүктелері және негізгі қаріп стектері сияқты жиі қолданылатын мәндерге оңай қол жеткізуді қамтамасыз етеді.

Қолжетімді айнымалылар

Міне, біз қосатын айнымалы мәндер ( :rootқажет екенін ескеріңіз). Олар біздің файлымызда орналасқан _root.scss.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Мысалдар

CSS айнымалылары Sass айнымалыларына ұқсас икемділікті ұсынады, бірақ браузерге қызмет көрсету алдында компиляция қажет емес. Мысалы, мұнда біз CSS айнымалылары бар беттің қаріпі мен сілтеме мәнерлерін қалпына келтіреміз.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Үзіліс нүктесінің айнымалылары

Біз бастапқыда тоқтау нүктелерін CSS айнымалыларымызға қосқанымызбен (мысалы, --breakpoint-md), оларға мультимедиа сұрауларында қолдау көрсетілмейді , бірақ оларды әлі де медиа сұрауларындағы ережелер жиынында пайдалануға болады . Бұл тоқтау нүктесінің айнымалы мәндері JavaScript арқылы пайдалануға болатындықтан, кері үйлесімділік үшін құрастырылған CSS-де қалады. Толығырақ спецификациядан біліңіз .

Қолдамайтын нәрсенің мысалы :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Мұнда қолдау көрсетілетін нәрсенің мысалы келтірілген :

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}