நிறம்

தீம் வண்ணங்கள்

scss/_variables.scssபூட்ஸ்டார்ப்பின் கோப்பில் சாஸ் மாறிகள் மற்றும் சாஸ் வரைபடமாகவும் கிடைக்கும் வண்ணத் திட்டங்களை உருவாக்குவதற்கு சிறிய வண்ணத் தட்டுகளை உருவாக்க அனைத்து வண்ணங்களின் துணைக்குழுவைப் பயன்படுத்துகிறோம் .

இந்த வண்ணங்கள் அனைத்தும் சாஸ் வரைபடமாக கிடைக்கின்றன, $theme-colors.

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

இந்த வண்ணங்களை எவ்வாறு மாற்றுவது என்பது குறித்து எங்களின் சாஸ் வரைபடங்கள் மற்றும் லூப்ஸ் டாக்ஸைப் பார்க்கவும் .

அனைத்து வண்ணங்கள்

அனைத்து பூட்ஸ்டார்ப் வண்ணங்களும் சாஸ் மாறிகள் மற்றும் சாஸ் வரைபடமாக scss/_variables.scssகோப்பில் கிடைக்கும். அதிகரித்த கோப்பு அளவுகளைத் தவிர்க்க, இந்த மாறிகள் ஒவ்வொன்றிற்கும் நாங்கள் உரை அல்லது பின்னணி வண்ண வகுப்புகளை உருவாக்க மாட்டோம். அதற்கு பதிலாக, தீம் தட்டுக்கு இந்த வண்ணங்களின் துணைக்குழுவைத் தேர்வு செய்கிறோம் .

வண்ணங்களைத் தனிப்பயனாக்கும்போது, ​​மாறுபாடு விகிதங்களைக் கண்காணிக்க மறக்காதீர்கள். கீழே காட்டப்பட்டுள்ளபடி, ஒவ்வொரு முக்கிய வண்ணங்களுக்கும் மூன்று மாறுபட்ட விகிதங்களைச் சேர்த்துள்ளோம்-ஒன்று ஸ்வாட்சின் தற்போதைய வண்ணங்களுக்கு, ஒன்று வெள்ளைக்கு எதிராக மற்றும் ஒன்று கருப்புக்கு எதிரானது.

சாஸ் பற்றிய குறிப்புகள்

சாஸ் நிரல் ரீதியாக மாறிகளை உருவாக்க முடியாது, எனவே ஒவ்வொரு சாயலுக்கும் மாறிகளை கைமுறையாக உருவாக்கி நம்மை நாமே நிழலாடுகிறோம். நாங்கள் நடுப்புள்ளி மதிப்பைக் குறிப்பிடுகிறோம் (எ.கா., $blue-500) மற்றும் சாஸின் வண்ணச் செயல்பாட்டின் மூலம் எங்கள் வண்ணங்களை சாயமிட (ஒளிரூட்ட) அல்லது நிழலாக்க (கருமையாக்க) தனிப்பயன் வண்ண செயல்பாடுகளைப் பயன்படுத்துகிறோம் mix().

பயன்படுத்துதல் mix()என்பது ஒரே மாதிரியானதல்ல lighten()மற்றும் darken()—முந்தையது குறிப்பிட்ட நிறத்தை வெள்ளை அல்லது கருப்புடன் கலக்கிறது, பிந்தையது ஒவ்வொரு நிறத்தின் லேசான மதிப்பை மட்டுமே சரிசெய்கிறது. இதன் விளைவாக , இந்த CodePen டெமோவில் காட்டப்பட்டுள்ள வண்ணங்களின் முழுமையான தொகுப்பு ஆகும் .

எங்களின் tint-color()மற்றும் shade-color()செயல்பாடுகள் mix()எங்களின் மாறியுடன் இணைந்து பயன்படுத்துகின்றன $theme-color-interval, இது நாம் உருவாக்கும் ஒவ்வொரு கலப்பு நிறத்திற்கும் ஒரு படி சதவீத மதிப்பைக் குறிப்பிடுகிறது. முழு மூலக் குறியீட்டிற்கான scss/_functions.scssமற்றும் கோப்புகளைப் பார்க்கவும் .scss/_variables.scss

வண்ண சாஸ் வரைபடங்கள்

பூட்ஸ்டார்ப்பின் மூல Sass கோப்புகளில் வண்ணங்களின் பட்டியல் மற்றும் அவற்றின் ஹெக்ஸ் மதிப்புகளை விரைவாகவும் எளிதாகவும் இணைக்க உதவும் மூன்று வரைபடங்கள் உள்ளன.

• $colorsநமக்கு கிடைக்கக்கூடிய அனைத்து அடிப்படை ( 500) வண்ணங்களையும் பட்டியலிடுகிறது
• $theme-colorsஅனைத்து சொற்பொருள் பெயரிடப்பட்ட தீம் வண்ணங்களையும் பட்டியலிடுகிறது (கீழே காட்டப்பட்டுள்ளது)
• $graysஅனைத்து சாயல்களையும் சாம்பல் நிற நிழல்களையும் பட்டியலிடுகிறது

க்குள் scss/_variables.scss, பூட்ஸ்டார்ப்பின் வண்ண மாறிகள் மற்றும் சாஸ் வரைபடத்தைக் காணலாம். $colorsசாஸ் வரைபடத்தின் எடுத்துக்காட்டு இங்கே :

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

பல கூறுகளில் அவை எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதைப் புதுப்பிக்க வரைபடத்தில் மதிப்புகளைச் சேர்க்கவும், அகற்றவும் அல்லது மாற்றவும். துரதிருஷ்டவசமாக இந்த நேரத்தில், ஒவ்வொரு கூறுகளும் இந்த சாஸ் வரைபடத்தைப் பயன்படுத்துவதில்லை. எதிர்கால புதுப்பிப்புகள் இதை மேம்படுத்த முயற்சிக்கும். அதுவரை, ${color}மாறிகள் மற்றும் இந்த சாஸ் வரைபடத்தைப் பயன்படுத்த திட்டமிடுங்கள்.

உதாரணமாக

உங்கள் சாஸில் இவற்றை எவ்வாறு பயன்படுத்தலாம் என்பது இங்கே:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

வண்ண மதிப்புகளை அமைப்பதற்கும் பயன்படுத்துவதற்கும் வண்ணம் மற்றும் பின்னணி பயன்பாட்டு வகுப்புகள் உள்ளன .colorbackground-color500

பயன்பாடுகளை உருவாக்குதல்

பூட்ஸ்டார்ப்பில் ஒவ்வொரு வண்ண மாறிக்கான பயன்பாடுகளும் இல்லை , ஆனால் எங்களின் பயன்பாட்டு APIcolor மற்றும் v5.1.0 இல் சேர்க்கப்பட்ட எங்கள் நீட்டிக்கப்பட்ட Sass வரைபடங்கள் background-colorமூலம் இவற்றை நீங்களே உருவாக்கலாம் .

1. தொடங்குவதற்கு, எங்களின் செயல்பாடுகள், மாறிகள், மிக்ஸின்கள் மற்றும் பயன்பாடுகளை நீங்கள் இறக்குமதி செய்துள்ளீர்கள் என்பதை உறுதிப்படுத்தவும்.
2. map-merge-multiple()புதிய வரைபடத்தில் பல சாஸ் வரைபடங்களை விரைவாக ஒன்றிணைக்க எங்கள் செயல்பாட்டைப் பயன்படுத்தவும் .
3. {color}-{level}வகுப்புப் பெயருடன் எந்தவொரு பயன்பாட்டையும் நீட்டிக்க இந்தப் புதிய ஒருங்கிணைந்த வரைபடத்தை ஒன்றிணைக்கவும் .

.text-purple-500மேலே உள்ள படிகளைப் பயன்படுத்தி உரை வண்ண பயன்பாடுகளை (எ.கா., ) உருவாக்கும் ஒரு எடுத்துக்காட்டு இங்கே .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

.text-{color}-{level}இது ஒவ்வொரு வண்ணம் மற்றும் நிலைக்கு புதிய பயன்பாடுகளை உருவாக்கும் . நீங்கள் வேறு எந்தப் பயன்பாடு மற்றும் சொத்துக்களுக்கும் இதையே செய்யலாம்.