നിറങ്ങൾ

നിറങ്ങൾ

കളർ യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് വാചകം വർണ്ണമാക്കുക. നിങ്ങൾക്ക് ലിങ്കുകൾ വർണ്ണാഭമാക്കണമെങ്കിൽ, ഉള്ളതും സംസ്ഥാനങ്ങളുള്ളതുമായ ഹെൽപ്പർ .link-*ക്ലാസുകൾ നിങ്ങൾക്ക് ഉപയോഗിക്കാം.:hover:focus

<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>

അതാര്യത

v5.1.0 മുതൽ, CSS വേരിയബിളുകൾ ഉപയോഗിച്ച് സാസ് ഉപയോഗിച്ച് ടെക്സ്റ്റ് കളർ യൂട്ടിലിറ്റികൾ ജനറേറ്റുചെയ്യുന്നു. കംപൈലേഷനും ഡൈനാമിക് ആൽഫ സുതാര്യത മാറ്റങ്ങളും കൂടാതെ തത്സമയ വർണ്ണ മാറ്റങ്ങൾ ഇത് അനുവദിക്കുന്നു.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഞങ്ങളുടെ ഡിഫോൾട്ട് .text-primaryയൂട്ടിലിറ്റി പരിഗണിക്കുക.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

ആൽഫ സുതാര്യതയ്‌ക്കായി ഞങ്ങൾ --bs-primary(ന്റെ മൂല്യമുള്ള 13, 110, 253) CSS വേരിയബിളിന്റെ RGB പതിപ്പ് ഉപയോഗിക്കുകയും രണ്ടാമത്തെ CSS വേരിയബിൾ അറ്റാച്ചുചെയ്യുകയും ചെയ്യുന്നു, ( ഒരു പ്രാദേശിക CSS വേരിയബിളിന് നന്ദി, സ്ഥിര മൂല്യത്തോടെ). അതിനർത്ഥം നിങ്ങൾ ഇപ്പോൾ ഉപയോഗിക്കുന്ന ഏത് സമയത്തും, നിങ്ങളുടെ കമ്പ്യൂട്ട് ചെയ്ത മൂല്യം . ഓരോ ക്ലാസിലെയും ലോക്കൽ CSS വേരിയബിൾ അനന്തരാവകാശ പ്രശ്‌നങ്ങൾ ഒഴിവാക്കുന്നു, അതിനാൽ യൂട്ടിലിറ്റികളുടെ നെസ്റ്റഡ് സംഭവങ്ങൾക്ക് സ്വയമേവ പരിഷ്‌കരിച്ച ആൽഫ സുതാര്യത ഉണ്ടാകില്ല.--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).text-*

ഉദാഹരണം

ആ അതാര്യത മാറ്റാൻ, --bs-text-opacityഇഷ്‌ടാനുസൃത ശൈലികൾ അല്ലെങ്കിൽ ഇൻലൈൻ ശൈലികൾ വഴി അസാധുവാക്കുക.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

അല്ലെങ്കിൽ, ഏതെങ്കിലും .text-opacityയൂട്ടിലിറ്റികളിൽ നിന്ന് തിരഞ്ഞെടുക്കുക:

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

പ്രത്യേകത

മറ്റൊരു സെലക്ടറിന്റെ പ്രത്യേകത കാരണം ചിലപ്പോൾ സന്ദർഭോചിതമായ ക്ലാസുകൾ പ്രയോഗിക്കാൻ കഴിയില്ല. <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;

മാപ്പ്

തീം വർണ്ണങ്ങൾ പിന്നീട് ഒരു സാസ് മാപ്പിൽ ഇടുന്നു, അതിനാൽ ഞങ്ങളുടെ യൂട്ടിലിറ്റികൾ, ഘടക മോഡിഫയറുകൾ എന്നിവയും അതിലേറെയും സൃഷ്ടിക്കുന്നതിന് അവയ്ക്ക് മേൽ ലൂപ്പ് ചെയ്യാം.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

ഗ്രേസ്കെയിൽ നിറങ്ങൾ ഒരു സാസ് മാപ്പായി ലഭ്യമാണ്. യൂട്ടിലിറ്റികളൊന്നും സൃഷ്ടിക്കാൻ ഈ മാപ്പ് ഉപയോഗിക്കുന്നില്ല.

$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
);

ഒരു പ്രത്യേക സാസ് മാപ്പിൽ നിന്നാണ് RGB നിറങ്ങൾ സൃഷ്ടിക്കുന്നത്:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

കൂടാതെ യൂട്ടിലിറ്റികൾ API ഉപയോഗിക്കുന്ന സ്വന്തം മാപ്പ് ഉപയോഗിച്ച് വർണ്ണ അതാര്യതകൾ നിർമ്മിക്കുന്നു:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

യൂട്ടിലിറ്റീസ് API

കളർ യൂട്ടിലിറ്റികൾ ഞങ്ങളുടെ യൂട്ടിലിറ്റി API-ൽ പ്രഖ്യാപിച്ചിരിക്കുന്നു scss/_utilities.scss. യൂട്ടിലിറ്റീസ് API എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),