ពណ៌

ពណ៌ប្រធានបទ

យើងប្រើសំណុំរងនៃពណ៌ទាំងអស់ដើម្បីបង្កើតក្ដារលាយពណ៌តូចជាងសម្រាប់បង្កើតពណ៌ចម្រុះ ក៏មានជាអថេរ Sass និងផែនទី Sass នៅក្នុង scss/_variables.scssឯកសាររបស់ Bootstrap ។

ពណ៌ទាំងអស់នេះមានជាផែនទី Sass, $theme-colors.

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

សូមពិនិត្យមើល ផែនទី Sass និងឯកសាររង្វិលជុំរបស់យើង សម្រាប់របៀបកែប្រែពណ៌ទាំងនេះ។

ពណ៌ទាំងអស់។

ពណ៌ Bootstrap ទាំងអស់មានជាអថេរ Sass និងផែនទី Sass នៅក្នុង scss/_variables.scssឯកសារ។ ដើម្បីជៀសវាងការបង្កើនទំហំឯកសារ យើងមិនបង្កើតថ្នាក់ពណ៌អត្ថបទ ឬផ្ទៃខាងក្រោយសម្រាប់អថេរនីមួយៗទាំងនេះទេ។ ជំនួសមកវិញ យើងជ្រើសរើសសំណុំរងនៃពណ៌ទាំងនេះសម្រាប់ ក្ដារលាយពណ៌ ។

ត្រូវប្រាកដថាតាមដានសមាមាត្រកម្រិតពណ៌នៅពេលអ្នកប្ដូរពណ៌តាមបំណង។ ដូចដែលបានបង្ហាញខាងក្រោម យើងបានបន្ថែមសមាមាត្រកម្រិតពណ៌ចំនួនបីចំពោះពណ៌ចម្បងនីមួយៗ មួយសម្រាប់ពណ៌បច្ចុប្បន្នរបស់នាឡិកា មួយសម្រាប់ប្រឆាំងនឹងពណ៌ស និងមួយទៀតសម្រាប់ពណ៌ខ្មៅ។

កំណត់ចំណាំនៅលើ Sass

Sass មិនអាចបង្កើតអថេរតាមកម្មវិធីបានទេ ដូច្នេះយើងបានបង្កើតអថេរសម្រាប់រាល់ពណ៌ និងដាក់ស្រមោលដោយខ្លួនឯង។ យើងបញ្ជាក់តម្លៃចំណុចកណ្តាល (ឧ. ) ហើយប្រើមុខងារពណ៌ផ្ទាល់ខ្លួនដើម្បី tint (lighten) ឬ shade ( darken) ពណ៌របស់យើងតាមរយៈ មុខងារពណ៌ $blue-500របស់ Sass ។mix()

ការប្រើប្រាស់ mix()គឺមិនដូចគ្នាទេ lighten()ហើយ darken()- អតីតលាយពណ៌ដែលបានបញ្ជាក់ជាមួយពណ៌ស ឬខ្មៅ ខណៈពេលដែលពណ៌ក្រោយកែសំរួលតែតម្លៃពន្លឺនៃពណ៌នីមួយៗប៉ុណ្ណោះ។ លទ្ធផល​គឺ​ជា​ឈុត​ពណ៌​ដែល​មាន​លក្ខណៈ​ពេញលេញ​ជាង​នេះ ដូច​ដែល ​បាន​បង្ហាញ​ក្នុង​ការបង្ហាញ CodePen នេះ ។

មុខងារ របស់យើង tint-color()និង shade-color()ប្រើប្រាស់ mix()ជាមួយ $theme-color-intervalអថេររបស់យើង ដែលបញ្ជាក់តម្លៃភាគរយជាជំហានៗសម្រាប់ពណ៌ចម្រុះនីមួយៗដែលយើងផលិត។ សូមមើល scss/_functions.scssនិង scss/_variables.scssឯកសារសម្រាប់កូដប្រភពពេញលេញ។

ផែនទីពណ៌ Sass

ឯកសារ Sass ប្រភពរបស់ Bootstrap រួមមានផែនទីចំនួនបីដើម្បីជួយអ្នកបានយ៉ាងរហ័ស និងងាយស្រូលលើបញ្ជីពណ៌ និងតម្លៃគោលដប់ប្រាំមួយ។

• $colorsរាយ 500ពណ៌មូលដ្ឋានដែលមាន () របស់យើងទាំងអស់។
• $theme-colorsរាយពណ៌ស្បែកដែលមានឈ្មោះតាមន័យធៀបទាំងអស់ (បង្ហាញខាងក្រោម)
• $graysរាយពណ៌ និងស្រមោលពណ៌ប្រផេះទាំងអស់។

នៅខាងក្នុង scss/_variables.scssអ្នកនឹងឃើញអថេរពណ៌របស់ Bootstrap និងផែនទី Sass ។ នេះជាឧទាហរណ៍នៃ $colorsផែនទី Sass៖

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

បន្ថែម លុប ឬកែប្រែតម្លៃនៅក្នុងផែនទី ដើម្បីធ្វើបច្ចុប្បន្នភាពពីរបៀបដែលពួកវាត្រូវបានប្រើប្រាស់នៅក្នុងសមាសធាតុជាច្រើនទៀត។ ជាអកុសលនៅពេលនេះ មិនមែន គ្រប់ សមាសធាតុទាំងអស់ប្រើប្រាស់ផែនទី Sass នេះទេ។ ការធ្វើបច្ចុប្បន្នភាពនាពេលអនាគតនឹងខិតខំកែលម្អលើបញ្ហានេះ។ រហូតមកដល់ពេលនោះ គ្រោងនឹងប្រើប្រាស់ ${color}អថេរ និងផែនទី Sass នេះ។

ឧទាហរណ៍

នេះជារបៀបដែលអ្នកអាចប្រើវានៅក្នុង Sass របស់អ្នក៖

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

ថ្នាក់ឧបករណ៍ប្រើប្រាស់ ពណ៌ និង ផ្ទៃខាងក្រោយ ក៏មានសម្រាប់កំណត់ colorនិង background-colorប្រើប្រាស់ 500តម្លៃពណ៌ផងដែរ។

ការបង្កើតឧបករណ៍ប្រើប្រាស់

Bootstrap មិនរួមបញ្ចូល colorនិង background-colorឧបករណ៍ប្រើប្រាស់សម្រាប់រាល់អថេរពណ៌ទាំងអស់ ប៉ុន្តែអ្នកអាចបង្កើតវាដោយខ្លួនឯងជាមួយនឹង Utility API និងផែនទី Sass ដែលបានបន្ថែមរបស់យើងដែលបានបន្ថែមនៅក្នុង v5.1.0 ។

1. ដើម្បីចាប់ផ្តើម សូមប្រាកដថាអ្នកបាននាំចូលមុខងារ អថេរ ល្បាយ និងឧបករណ៍ប្រើប្រាស់របស់យើង។
2. ប្រើ map-merge-multiple()មុខងាររបស់យើងដើម្បីបញ្ចូលផែនទី Sass ជាច្រើនបញ្ចូលគ្នាយ៉ាងរហ័សនៅក្នុងផែនទីថ្មីមួយ។
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}ឧបករណ៍ប្រើប្រាស់ថ្មីសម្រាប់គ្រប់ពណ៌ និងកម្រិត។ អ្នកក៏អាចធ្វើដូចគ្នាសម្រាប់ឧបករណ៍ប្រើប្រាស់ និងទ្រព្យសម្បត្តិផ្សេងទៀតផងដែរ។