ពណ៌

ពណ៌ប្រធានបទ

យើងប្រើសំណុំរងនៃពណ៌ទាំងអស់ដើម្បីបង្កើតក្ដារលាយពណ៌តូចជាងសម្រាប់បង្កើតពណ៌ចម្រុះ ក៏មានជាអថេរ 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 (ស្រាល) ឬដាក់ស្រមោល (ងងឹត) ពណ៌របស់យើងតាមរយៈ មុខងារពណ៌ $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,
  "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តម្លៃពណ៌ផងដែរ។