Өнгө
colorЦөөн тооны өнгөт хэрэглээний ангиудын тусламжтайгаар утгыг дамжуулаарай . Хүрэх төлөвтэй холбоосыг загварчлах дэмжлэгийг мөн багтаасан болно.
Өнгө
Текстийг өнгөт хэрэглүүрээр будах. Хэрэв та холбоосыг өнгө болгохыг хүсвэл , болон төлөвтэй .link-*туслах ангиудыг ашиглаж болно.:hover:focus
.текст-анхдагч
.текст-хоёрдогч
.текст-амжилт
.текст-аюул
.текст анхааруулга
.текст-мэдээлэл
.текст гэрэл
.текст-харанхуй
.текст-бие
.текстийг хаасан
.текст-цагаан
.текст-хар-50
.текст-цагаан-50
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>Туслах технологид утгыг дамжуулах
Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .visually-hiddenангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.
Онцлог байдал
Заримдаа өөр сонгогчийн онцлогоос шалтгаалан контекст ангиудыг ашиглах боломжгүй байдаг. Зарим тохиолдолд өөрийн элементийн агуулгыг <div>хүссэн ангитай эсвэл илүү олон семантик элементээр боож өгөх нь хангалттай.
Сасс
Дараах Sass функцээс гадна өнгө болон бусад зүйлд зориулсан CSS-ийн захиалгат шинж чанаруудыг (CSS хувьсагч гэх мэт) уншина уу.
Хувьсагч
Ихэнх 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;
Саарал өнгийн өнгөнүүд бас байдаг, гэхдээ зөвхөн дэд хэсэг нь ямар ч хэрэгсэл үүсгэхэд ашиглагддаг.
$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
);
Utilities API
Өнгөний хэрэгслүүдийг манай хэрэгслүүдийн API-д зарласан scss/_utilities.scss. API хэрэгслүүдийг хэрхэн ашиглах талаар суралц.
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),