Замина
Маъноро тавассути background-colorградиентҳо интиқол диҳед ва ороишро илова кунед.
Ранги замина
Монанди синфҳои ранги матнии контекстӣ, заминаи элементро ба ҳама гуна синфи контекстӣ таъин кунед. Утилитҳои замина насб карда намешавандcolor , аз ин рӯ дар баъзе мавридҳо шумо мехоҳед аз .text-* утилитаҳои ранг истифода баред .
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Градиенти замина
Бо илова кардани .bg-gradientсинф, градиенти хатӣ ҳамчун тасвири замина ба замина илова карда мешавад. Ин градиент бо сафеди нимшаффоф оғоз меёбад, ки то поён пажмурда мешавад.
Оё ба шумо дар CSS фармоишии худ градиент лозим аст? Танҳо илова кунед background-image: var(--bs-gradient);.
Сасс
Илова ба функсияҳои зерини Sass, дар бораи хосиятҳои фармоишии CSS (тағйирёбандаҳои CSS) барои рангҳо ва ғайра хонед.
Тағйирёбандаҳо
Аксари background-colorутилитҳо бо рангҳои мавзӯии мо тавлид мешаванд, ки аз тағирёбандаҳои палитраи рангҳои умумии мо дубора таъин шудаанд.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));
Рангҳои хокистарранг низ дастрасанд, аммо барои тавлиди ҳама гуна утилитаҳо танҳо зермаҷмӯа истифода мешаванд.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Харита
Пас аз он рангҳои мавзӯъ ба харитаи Sass ҷойгир карда мешаванд, то мо метавонем онҳоро аз болои онҳо гардиш карда, утилитаҳои худ, тағирдиҳандаҳои ҷузъҳо ва ғайраро тавлид кунем.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Рангҳои хокистарранг инчунин ҳамчун харитаи Sass дастрасанд. Ин харита барои тавлиди ягон утилитаҳо истифода намешавад.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
Миксинҳо
Барои тавлиди утилитаҳои пасзаминаи мо ягон миксин истифода намешавад , аммо мо барои дигар ҳолатҳое, ки шумо мехоҳед градиентҳои худро эҷод кунед, чанд миксҳои иловагӣ дорем.
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient);
}
}
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
}
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
API Utilities
Утилитҳои замина дар API утилитаҳои мо дар scss/_utilities.scss. Омӯзед, ки чӣ тавр истифода бурдани API-и коммуналӣ.
"background-color": (
property: background-color,
class: bg,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),