Source

Theming Bootstrap

ប្ដូរ Bootstrap 4 តាមបំណងជាមួយនឹងអថេរ Sass ដែលភ្ជាប់មកជាមួយថ្មីរបស់យើងសម្រាប់ចំណូលចិត្តរចនាប័ទ្មសកលសម្រាប់ការផ្លាស់ប្តូររូបរាង និងសមាសធាតុងាយស្រួល។

សេចក្តីផ្តើម

នៅក្នុង Bootstrap 3 រូបរាងត្រូវបានជំរុញយ៉ាងច្រើនដោយការបដិសេធអថេរនៅក្នុង LESS, CSS ផ្ទាល់ខ្លួន និងសន្លឹករចនាប័ទ្មស្បែកដាច់ដោយឡែកដែលយើងបានរួមបញ្ចូលនៅក្នុង distឯកសាររបស់យើង។ ជាមួយនឹងការខិតខំប្រឹងប្រែងខ្លះ មនុស្សម្នាក់អាចរចនារូបរាងឡើងវិញទាំងស្រុងរបស់ Bootstrap 3 ដោយមិនចាំបាច់ប៉ះឯកសារស្នូល។ Bootstrap 4 ផ្តល់នូវវិធីសាស្រ្តដែលធ្លាប់ស្គាល់ ប៉ុន្តែខុសគ្នាបន្តិចបន្តួច។

ឥឡូវនេះ ការរៀបចំត្រូវបានសម្រេចដោយ Sass variables ផែនទី Sass និង CSS ផ្ទាល់ខ្លួន។ មិនមានសន្លឹករចនាប័ទ្មរចនាប័ទ្មពិសេសទៀតទេ; ជំនួសមកវិញ អ្នកអាចបើករូបរាងដែលភ្ជាប់មកជាមួយដើម្បីបន្ថែមពណ៌ជម្រាល ស្រមោល និងច្រើនទៀត។

សាស

ប្រើប្រាស់ឯកសារ Sass ប្រភពរបស់យើងដើម្បីទាញយកអត្ថប្រយោជន៍ពីអថេរ ផែនទី ល្បាយ និងច្រើនទៀត។

រចនាសម្ព័ន្ធឯកសារ

នៅពេលណាដែលអាចធ្វើទៅបាន ជៀសវាងការកែប្រែឯកសារស្នូលរបស់ Bootstrap ។ សម្រាប់ Sass មានន័យថាបង្កើតសន្លឹករចនាប័ទ្មផ្ទាល់ខ្លួនរបស់អ្នកដែលនាំចូល Bootstrap ដូច្នេះអ្នកអាចកែប្រែ និងពង្រីកវាបាន។ សន្មតថាអ្នកកំពុងប្រើកម្មវិធីគ្រប់គ្រងកញ្ចប់ដូចជា npm អ្នកនឹងមានរចនាសម្ព័ន្ធឯកសារដែលមើលទៅដូចនេះ៖

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

ប្រសិនបើអ្នកបានទាញយកឯកសារប្រភពរបស់យើង ហើយមិនប្រើកម្មវិធីគ្រប់គ្រងកញ្ចប់ អ្នកនឹងចង់រៀបចំអ្វីមួយដែលស្រដៀងនឹងរចនាសម្ព័ន្ធនោះដោយដៃ ដោយរក្សាឯកសារប្រភពរបស់ Bootstrap ដាច់ដោយឡែកពីខ្លួនអ្នក។

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

ការនាំចូល

នៅក្នុងរបស់ custom.scssអ្នក អ្នកនឹងនាំចូលឯកសារ Sass ប្រភពរបស់ Bootstrap ។ អ្នកមានជម្រើសពីរ៖ រួមបញ្ចូល Bootstrap ទាំងអស់ ឬជ្រើសរើសផ្នែកដែលអ្នកត្រូវការ។ យើងលើកទឹកចិត្តអ្នកចុងក្រោយ ទោះបីជាត្រូវដឹងថាមានតម្រូវការ និងភាពអាស្រ័យមួយចំនួននៅទូទាំងសមាសធាតុរបស់យើង។ អ្នកក៏នឹងត្រូវបញ្ចូល JavaScript មួយចំនួនសម្រាប់កម្មវិធីជំនួយរបស់យើង។

// Custom.scss
// Option A: Include all of Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

ជាមួយនឹងការរៀបចំនោះ អ្នកអាចចាប់ផ្តើមកែប្រែអថេរ និងផែនទី Sass ណាមួយនៅក្នុងរបស់អ្នក custom.scss។ អ្នកក៏អាចចាប់ផ្តើមបន្ថែមផ្នែកនៃ Bootstrap នៅក្រោម // Optionalផ្នែកតាមតម្រូវការ។ យើងស្នើឱ្យប្រើជង់នាំចូលពេញលេញពី bootstrap.scssឯកសាររបស់យើងជាចំណុចចាប់ផ្តើមរបស់អ្នក។

លំនាំដើមអថេរ

រាល់អថេរ Sass ក្នុង Bootstrap 4 រួមមាន !defaultទង់ដែលអនុញ្ញាតឱ្យអ្នកបដិសេធតម្លៃលំនាំដើមរបស់អថេរនៅក្នុង Sass របស់អ្នកដោយមិនចាំបាច់កែប្រែកូដប្រភពរបស់ Bootstrap ។ ចម្លង និងបិទភ្ជាប់អថេរតាមតម្រូវការ កែប្រែតម្លៃរបស់វា និងដក !defaultទង់ចេញ។ ប្រសិនបើអថេរត្រូវបានចាត់ចែងរួចហើយ នោះវានឹងមិនត្រូវបានចាត់ចែងឡើងវិញដោយតម្លៃលំនាំដើមនៅក្នុង Bootstrap ទេ។

ការបដិសេធអថេរនៅក្នុងឯកសារ Sass ដូចគ្នាអាចមកមុន ឬក្រោយអថេរលំនាំដើម។ ទោះជាយ៉ាងណាក៏ដោយ នៅពេលបដិសេធលើឯកសារ Sass ការបដិសេធរបស់អ្នកត្រូវតែមកមុនពេលអ្នកនាំចូលឯកសារ Sass របស់ Bootstrap ។

នេះជាឧទាហរណ៍ដែលផ្លាស់ប្តូរ background-colorនិង colorសម្រាប់ <body>ពេលនាំចូល និងចងក្រង Bootstrap តាមរយៈ npm៖

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

ធ្វើម្តងទៀតតាមការចាំបាច់សម្រាប់អថេរណាមួយនៅក្នុង Bootstrap រួមទាំងជម្រើសសកលខាងក្រោម។

ផែនទីនិងរង្វិលជុំ

Bootstrap 4 រួមបញ្ចូលផែនទី Sass មួយក្តាប់តូច ដែលជាគូតម្លៃសំខាន់ៗ ដែលធ្វើឱ្យវាកាន់តែងាយស្រួលក្នុងការបង្កើតក្រុមគ្រួសារនៃ CSS ដែលពាក់ព័ន្ធ។ យើងប្រើផែនទី Sass សម្រាប់ពណ៌របស់យើង ចំណុចបំបែកក្រឡា និងច្រើនទៀត។ ដូចគ្នានឹងអថេរ Sass ដែរ ផែនទី Sass ទាំងអស់រួមបញ្ចូល !defaultទង់ជាតិ ហើយអាចត្រូវបានបដិសេធ និងពង្រីក។

ផែនទី Sass មួយចំនួនរបស់យើងត្រូវបានបញ្ចូលទៅក្នុងទទេតាមលំនាំដើម។ នេះត្រូវបានធ្វើដើម្បីអនុញ្ញាតឱ្យងាយស្រួលក្នុងការពង្រីកផែនទី Sass ដែលបានផ្តល់ឱ្យ ប៉ុន្តែមកជាមួយតម្លៃនៃការធ្វើឱ្យ ការដក ធាតុចេញពីផែនទីពិបាកជាងបន្តិច។

កែប្រែផែនទី

ដើម្បីកែប្រែពណ៌ដែលមានស្រាប់នៅក្នុង $theme-colorsផែនទីរបស់យើង សូមបន្ថែមខាងក្រោមទៅឯកសារ Sass ផ្ទាល់ខ្លួនរបស់អ្នក៖

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

បន្ថែមទៅផែនទី

ដើម្បីបន្ថែមពណ៌ថ្មីទៅ $theme-colorsបន្ថែមសោថ្មី និងតម្លៃ៖

$theme-colors: (
  "custom-color": #900
);

យកចេញពីផែនទី

ដើម្បីលុបពណ៌ចេញពី $theme-colorsឬផែនទីផ្សេងទៀត សូមប្រើ map-remove៖

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

សោដែលត្រូវការ

Bootstrap សន្មត់ថាវត្តមាននៃសោជាក់លាក់មួយចំនួននៅក្នុង Sass maps ដូចដែលយើងបានប្រើ និងពង្រីកវាដោយខ្លួនឯង។ នៅពេលអ្នកប្ដូរផែនទីដែលបានរួមបញ្ចូលតាមបំណង អ្នកអាចជួបប្រទះនឹងបញ្ហាដែលគន្លឹះនៃផែនទី Sass ជាក់លាក់មួយកំពុងត្រូវបានប្រើប្រាស់។

ឧទាហរណ៍ យើងប្រើ គ្រាប់ចុច , និងពី primaryសម្រាប់ successតំណ ប៊ូតុង និងស្ថានភាពទម្រង់។ ការជំនួសតម្លៃនៃសោទាំងនេះមិនគួរបង្ហាញបញ្ហានោះទេ ប៉ុន្តែការដកវាចេញអាចបណ្តាលឱ្យមានបញ្ហាក្នុងការចងក្រង Sass ។ នៅក្នុងករណីទាំងនេះ អ្នកនឹងត្រូវកែប្រែកូដ Sass ដែលប្រើតម្លៃទាំងនោះ។danger$theme-colors

មុខងារ

Bootstrap ប្រើប្រាស់មុខងារ Sass ជាច្រើន ប៉ុន្តែមានតែសំណុំរងប៉ុណ្ណោះដែលអាចអនុវត្តបានចំពោះមុខងារទូទៅ។ យើងបានរួមបញ្ចូលមុខងារបីសម្រាប់ការទទួលបានតម្លៃពីផែនទីពណ៌៖

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

ទាំងនេះអនុញ្ញាតឱ្យអ្នកជ្រើសរើសពណ៌មួយពីផែនទី Sass ដូចរបៀបដែលអ្នកនឹងប្រើអថេរពណ៌ពី v3 ។

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

យើងក៏មានមុខងារមួយទៀតសម្រាប់ការទទួលបាន កម្រិត ពណ៌ជាក់លាក់មួយពី $theme-colorsផែនទី។ តម្លៃកម្រិតអវិជ្ជមាននឹងធ្វើឱ្យពណ៌ស្រាល ខណៈកម្រិតខ្ពស់នឹងងងឹត។

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

នៅក្នុងការអនុវត្ត អ្នកនឹងហៅមុខងារ និងឆ្លងកាត់ក្នុងប៉ារ៉ាម៉ែត្រពីរ៖ ឈ្មោះពណ៌ពី $theme-colors(ឧ. បឋម ឬគ្រោះថ្នាក់) និងកម្រិតលេខ។

.custom-element {
  color: theme-color-level(primary, -10);
}

មុខងារបន្ថែមអាចត្រូវបានបន្ថែមនៅពេលអនាគត ឬ Sass ផ្ទាល់ខ្លួនរបស់អ្នក ដើម្បីបង្កើតមុខងារកម្រិតសម្រាប់ផែនទី Sass បន្ថែម ឬសូម្បីតែមុខងារទូទៅមួយ ប្រសិនបើអ្នកចង់និយាយច្រើន

កម្រិតពណ៌

មុខងារបន្ថែមមួយដែលយើងបញ្ចូលក្នុង Bootstrap គឺមុខងារកម្រិតពណ៌ color-yiq។ វាប្រើប្រាស់ ចន្លោះពណ៌ YIQ ដើម្បីត្រឡប់ពណ៌ពន្លឺ ( #fff) ឬងងឹត ( #111) ដោយស្វ័យប្រវត្តិ ដោយផ្អែកលើពណ៌មូលដ្ឋានដែលបានបញ្ជាក់។ មុខងារនេះមានប្រយោជន៍ជាពិសេសសម្រាប់ mixins ឬ loops ដែលអ្នកកំពុងបង្កើត class ច្រើន។

ឧទាហរណ៍ ដើម្បីបង្កើតការគូសពណ៌ពី $theme-colorsផែនទីរបស់យើង៖

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

វាក៏អាចត្រូវបានប្រើសម្រាប់តម្រូវការកម្រិតពណ៌តែមួយ៖

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

អ្នកក៏អាចបញ្ជាក់ពណ៌មូលដ្ឋានជាមួយនឹងមុខងារផែនទីពណ៌របស់យើងផងដែរ៖

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

ជម្រើស Sass

ប្ដូរ Bootstrap 4 តាមបំណងជាមួយនឹងឯកសារអថេរផ្ទាល់ខ្លួនដែលភ្ជាប់មកជាមួយរបស់យើង ហើយបិទបើកចំណូលចិត្ត CSS សកលយ៉ាងងាយស្រួលជាមួយនឹង $enable-*អថេរ Sass ថ្មី។ បដិសេធតម្លៃអថេរ និងចងក្រងឡើងវិញ npm run testតាមតម្រូវការ។

អ្នកអាចស្វែងរក និងប្ដូរអថេរទាំងនេះតាមបំណងសម្រាប់ជម្រើសសកលសំខាន់ៗនៅក្នុង _variables.scssឯកសាររបស់យើង។

អថេរ	តម្លៃ	ការពិពណ៌នា
`$spacer`	`1rem`(លំនាំដើម) ឬតម្លៃណាមួយ > 0	បញ្ជាក់តម្លៃ spacer លំនាំដើមដើម្បីបង្កើតកម្មវិធី spacer utilities របស់យើង ។
`$enable-rounded`	`true`(លំនាំដើម) ឬ`false`	បើក `border-radius`រចនាប័ទ្មដែលបានកំណត់ជាមុនលើសមាសធាតុផ្សេងៗ។
`$enable-shadows`	`true`ឬ `false`(លំនាំដើម)	បើក `box-shadow`រចនាប័ទ្មដែលបានកំណត់ជាមុនលើសមាសធាតុផ្សេងៗ។
`$enable-gradients`	`true`ឬ `false`(លំនាំដើម)	បើកដំណើរការជម្រាលដែលបានកំណត់ជាមុនតាមរយៈ `background-image`រចនាប័ទ្មលើសមាសធាតុផ្សេងៗ។
`$enable-transitions`	`true`(លំនាំដើម) ឬ`false`	បើកដំណើរការ `transition`s ដែលបានកំណត់ជាមុនលើសមាសធាតុផ្សេងៗ។
`$enable-hover-media-query`	`true`ឬ `false`(លំនាំដើម)	បដិសេធ
`$enable-grid-classes`	`true`(លំនាំដើម) ឬ`false`	បើកដំណើរការបង្កើតថ្នាក់ CSS សម្រាប់ប្រព័ន្ធក្រឡាចត្រង្គ (ឧ. , `.container`, `.row`, `.col-md-1`ល។ )។
`$enable-caret`	`true`(លំនាំដើម) ឬ`false`	បើកដំណើរការ pseudo element caret នៅលើ `.dropdown-toggle`.
`$enable-print-styles`	`true`(លំនាំដើម) ឬ`false`	បើករចនាប័ទ្មសម្រាប់ការធ្វើឱ្យប្រសើរការបោះពុម្ព។

ពណ៌

សមាសធាតុ និងឧបករណ៍ប្រើប្រាស់ជាច្រើនរបស់ Bootstrap ត្រូវបានបង្កើតឡើងតាមរយៈស៊េរីនៃពណ៌ដែលបានកំណត់នៅក្នុងផែនទី Sass ។ ផែនទីនេះអាចត្រូវបានត្រួតពិនិត្យនៅក្នុង Sass ដើម្បីបង្កើតសំណុំក្បួនមួយយ៉ាងឆាប់រហ័ស។

ពណ៌ទាំងអស់។

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

ខៀវ

Indigo

ពណ៌ស្វាយ

ផ្កាឈូក

ក្រហម

ពណ៌ទឹកក្រូច

លឿង

បៃតង

ទឹកប្រៃ

ខៀវ

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

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

ថ្នាក់ឧបករណ៍ប្រើប្រាស់ពណ៌ ក៏មានសម្រាប់ការកំណត់ colorនិង background-color.

នៅពេលអនាគត យើងនឹងមានបំណងផ្តល់នូវផែនទី Sass និងអថេរសម្រាប់ស្រមោលនៃពណ៌នីមួយៗ ដូចដែលយើងបានធ្វើជាមួយនឹងពណ៌ប្រផេះខាងក្រោម។

ពណ៌ប្រធានបទ

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

បឋមសិក្សា

អនុវិទ្យាល័យ

ជោគជ័យ

គ្រោះថ្នាក់

ការព្រមាន

ព័ត៌មាន

ពន្លឺ

ងងឹត

ប្រផេះ

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

១០០

២០០

៣០០

៤០០

៥០០

៦០០

៧០០

៨០០

៩០០

នៅខាងក្នុង _variables.scssអ្នកនឹងឃើញអថេរពណ៌ និងផែនទី 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
) !default;

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

សមាសធាតុ

សមាសធាតុ និងឧបករណ៍ប្រើប្រាស់ជាច្រើនរបស់ Bootstrap ត្រូវបានបង្កើតឡើងជាមួយនឹង @eachរង្វិលជុំដែលធ្វើម្តងទៀតនៅលើផែនទី Sass ។ វាមានប្រយោជន៍ជាពិសេសសម្រាប់ការបង្កើតបំរែបំរួលនៃសមាសធាតុដោយយើង $theme-colorsនិងបង្កើតវ៉ារ្យ៉ង់ឆ្លើយតបសម្រាប់ចំណុចឈប់នីមួយៗ។ នៅពេលអ្នកប្ដូរផែនទី Sass ទាំងនេះតាមបំណង ហើយចងក្រងឡើងវិញ អ្នកនឹងឃើញការផ្លាស់ប្តូររបស់អ្នកដោយស្វ័យប្រវត្តិដែលឆ្លុះបញ្ចាំងនៅក្នុងរង្វិលជុំទាំងនេះ។

អ្នកកែប្រែ

សមាសធាតុជាច្រើនរបស់ Bootstrap ត្រូវបានបង្កើតឡើងជាមួយនឹងវិធីសាស្រ្តថ្នាក់មូលដ្ឋាន-កែប្រែ។ នេះមានន័យថាភាគច្រើននៃរចនាប័ទ្មត្រូវបានផ្ទុកទៅថ្នាក់មូលដ្ឋាន (ឧ, .btn) ខណៈដែលការប្រែប្រួលរចនាប័ទ្មត្រូវបានបង្ខាំងនៅក្នុងថ្នាក់កែប្រែ (ឧ, .btn-danger)។ ថ្នាក់កែប្រែទាំងនេះត្រូវបានបង្កើតឡើងពី $theme-colorsផែនទី ដើម្បីធ្វើការកំណត់លេខ និងឈ្មោះនៃថ្នាក់កែប្រែរបស់យើង។

នេះគឺជាឧទាហរណ៍ពីរនៃរបៀបដែលយើងរង្វិលជុំលើ $theme-colorsផែនទីដើម្បីបង្កើតកម្មវិធីកែប្រែទៅ .alertសមាសភាគ និង .bg-*ឧបករណ៍ប្រើប្រាស់ផ្ទៃខាងក្រោយទាំងអស់របស់យើង។

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

ឆ្លើយតប

រង្វិលជុំ Sass ទាំងនេះមិនត្រូវបានកំណត់ចំពោះផែនទីពណ៌ទេ។ អ្នកក៏អាចបង្កើតការប្រែប្រួលឆ្លើយតបនៃសមាសធាតុ ឬឧបករណ៍ប្រើប្រាស់របស់អ្នកផងដែរ។ យកឧទាហរណ៍ឧបករណ៍តម្រឹមអត្ថបទដែលឆ្លើយតបរបស់យើងដែលយើងលាយ @eachរង្វិលជុំសម្រាប់ $grid-breakpointsផែនទី Sass ជាមួយនឹងសំណួរប្រព័ន្ធផ្សព្វផ្សាយរួមបញ្ចូល។

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

ប្រសិនបើអ្នកត្រូវការកែប្រែរបស់ $grid-breakpointsអ្នក ការផ្លាស់ប្តូររបស់អ្នកនឹងអនុវត្តចំពោះរង្វិលជុំទាំងអស់ដែលធ្វើម្តងទៀតនៅលើផែនទីនោះ។

អថេរ CSS

Bootstrap 4 រួមបញ្ចូលនូវ លក្ខណៈសម្បត្តិផ្ទាល់ខ្លួន CSS (អថេរ) ប្រហែលពីរ នៅក្នុង CSS ដែលបានចងក្រង។ ទាំងនេះផ្តល់ភាពងាយស្រួលដល់តម្លៃដែលប្រើជាទូទៅដូចជាពណ៌ស្បែក ចំណុចបំបែក និងជង់ពុម្ពអក្សរចម្បងរបស់យើង នៅពេលធ្វើការនៅក្នុង Inspector នៃកម្មវិធីរុករករបស់អ្នក ប្រអប់ខ្សាច់កូដ ឬគំរូទូទៅ។

អថេរដែលមាន

នេះគឺជាអថេរដែលយើងរួមបញ្ចូល (ចំណាំថា :rootត្រូវបានទាមទារ)។ ពួកវាមានទីតាំងនៅក្នុង _root.scssឯកសាររបស់យើង។

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ឧទាហរណ៍

អថេរ CSS ផ្តល់ភាពបត់បែនស្រដៀងគ្នាទៅនឹងអថេររបស់ Sass ប៉ុន្តែដោយមិនចាំបាច់មានការចងក្រងមុនពេលបម្រើដល់កម្មវិធីរុករក។ ជាឧទាហរណ៍ នៅទីនេះយើងកំពុងកំណត់រចនាប័ទ្មពុម្ពអក្សររបស់ទំព័ររបស់យើងឡើងវិញ និងរចនាប័ទ្មតំណជាមួយនឹងអថេរ CSS ។

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

អ្នកក៏អាចប្រើអថេរ breakpoint របស់យើងនៅក្នុងសំណួរប្រព័ន្ធផ្សព្វផ្សាយរបស់អ្នកផងដែរ៖

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}