Source

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

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

Кіріспе

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

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

Сасс

Айнымалы мәндердің, карталардың, миксиндердің және т.б. мүмкіндіктерін пайдалану үшін бастапқы Sass файлдарын пайдаланыңыз. Браузерді дөңгелектеуге қатысты мәселелерді болдырмау үшін құрастыруымызда Sass дөңгелектеу дәлдігін 6-ға дейін арттырдық (әдепкі бойынша бұл 5).

Файл құрылымы

Мүмкіндігінше, 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

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

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

// Optional
@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 4 жүйесіндегі әрбір Sass айнымалысы !defaultBootstrap бастапқы кодын өзгертпестен жеке Sass ішіндегі айнымалының әдепкі мәнін қайта анықтауға мүмкіндік беретін жалаушаны қамтиды. Қажет болса, айнымалы мәндерді көшіріп, қойыңыз, олардың мәндерін өзгертіңіз және !defaultжалаушаны жойыңыз. Айнымалы мән әлдеқашан тағайындалған болса, ол Bootstrap бағдарламасындағы әдепкі мәндер арқылы қайта тағайындалмайды.

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

Бір Sass файлындағы айнымалыларды қайта анықтау әдепкі айнымалылардың алдында немесе кейін келуі мүмкін. Дегенмен, Sass файлдарын қайта анықтау кезінде Bootstrap Sass файлдарын импорттаудан бұрын қайта анықтаулар келуі керек.

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

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Төмендегі ғаламдық опцияларды қоса, 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 жүйесінде дұрыс көрсету үшін бұл таңбалардан құтылу керек.<>#

Қосу және азайту функциялары

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 файлындағы негізгі жаһандық опциялар үшін осы айнымалы мәндерді табуға және теңшеуге болады .

Айнымалы	Құндылықтар	Сипаттама
`$spacer`	`1rem`(әдепкі) немесе кез келген мән > 0	Біздің spacer утилиталарын бағдарламалық түрде жасау үшін әдепкі spacer мәнін көрсетеді .
`$enable-rounded`	`true`(әдепкі) немесе`false`	`border-radius`Әртүрлі құрамдас бөліктерде алдын ала анықталған мәнерлерді қосады .
`$enable-shadows`	`true`немесе `false`(әдепкі)	`box-shadow`Әртүрлі құрамдас бөліктерде алдын ала анықталған мәнерлерді қосады .
`$enable-gradients`	`true`немесе `false`(әдепкі)	`background-image`Түрлі құрамдас бөліктердегі мәнерлер арқылы алдын ала анықталған градиенттерді қосады .
`$enable-transitions`	`true`(әдепкі) немесе`false`	`transition`Әртүрлі құрамдастарда алдын ала анықталған s мүмкіндігін қосады .
`$enable-prefers-reduced-motion-media-query`	`true`(әдепкі) немесе`false`	Пайдаланушылардың шолғышына/амалдық жүйе қалауларына негізделген белгілі бір анимацияларды/өтулерді басатын `prefers-reduced-motion`медиа сұрауын қосады .
`$enable-hover-media-query`	`true`немесе `false`(әдепкі)	Ескірген
`$enable-grid-classes`	`true`(әдепкі) немесе`false`	Тор жүйесі үшін CSS сыныптарын құруды қосады (мысалы, `.container`, `.row`, `.col-md-1`, т.б.).
`$enable-caret`	`true`(әдепкі) немесе`false`	псевдоэлементтік каретканы қосады `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(әдепкі) немесе`false`	Өшірілмеген түйме элементтеріне «қол» курсорын қосыңыз.
`$enable-print-styles`	`true`(әдепкі) немесе`false`	Басып шығаруды оңтайландыру үшін мәнерлерді қосады.
`$enable-responsive-font-sizes`	`true`немесе `false`(әдепкі)	Жауапты қаріп өлшемдерін қосады .
`$enable-validation-icons`	`true`(әдепкі) немесе`false`	`background-image`Тексеру күйлері үшін мәтіндік енгізулердегі белгішелерді және кейбір реттелетін пішіндерді қосады .
`$enable-deprecation-messages`	`true`немесе `false`(әдепкі)	`true`ішінде жойылуы жоспарланған ескірген араластырғыштар мен функциялардың кез келгенін пайдалану кезінде ескертулерді көрсету үшін орнатыңыз `v5`.

Түс

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.

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

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

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

Негізгі

Екінші

Жетістік

Қауіп

Ескерту

Ақпарат

Жарық

Қараңғы

Сұр түсті

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

100

200

300

400

500

600

700

800

900

ішінде 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", 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);
  }
}