សាស

ប្រើប្រាស់ឯកសារ Sass ប្រភពរបស់យើង ដើម្បីទាញយកអត្ថប្រយោជន៍ពីអថេរ ផែនទី ល្បាយ និងមុខងារ ដើម្បីជួយអ្នកបង្កើតបានលឿនជាងមុន និងកំណត់គម្រោងរបស់អ្នកតាមបំណង។

នៅលើទំព័រនេះ។

ប្រើប្រាស់ឯកសារ 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

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

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

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

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

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

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

អ្នកនឹងឃើញបញ្ជីពេញលេញនៃអថេររបស់ Bootstrap នៅក្នុង scss/_variables.scss. អថេរមួយចំនួនត្រូវបានកំណត់ទៅ nullអថេរទាំងនេះមិនបញ្ចេញទ្រព្យសម្បត្តិទេ លុះត្រាតែពួកវាត្រូវបានបដិសេធក្នុងការកំណត់របស់អ្នក។

ការបដិសេធអថេរត្រូវតែកើតឡើងបន្ទាប់ពីមុខងាររបស់យើងត្រូវបាននាំចូល ប៉ុន្តែមុនពេលការនាំចូលដែលនៅសល់។

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

// Required
@import "../node_modules/bootstrap/scss/functions";

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

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

ចាប់ផ្តើមជាមួយ Bootstrap តាមរយៈ npm ជាមួយគម្រោងចាប់ផ្តើមរបស់យើង! ទៅកាន់កន្លែង ផ្ទុកពុម្ពគំរូ tws/bootstrap-npm-starter ដើម្បីមើលពីរបៀបបង្កើត និងកំណត់ Bootstrap តាមបំណងនៅក្នុងគម្រោង npm ផ្ទាល់ខ្លួនរបស់អ្នក។ រួមបញ្ចូល Sass compiler, Autoprefixer, Stylelint, PurgeCSS និង Bootstrap Icons ។

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

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

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

កែប្រែផែនទី

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

$primary: #0074d9;
$danger: #ff4136;

នៅពេលក្រោយ អថេរទាំងនេះត្រូវបានកំណត់នៅក្នុង $theme-colorsផែនទីរបស់ Bootstrap៖

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

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

បន្ថែមពណ៌ថ្មីទៅ $theme-colorsឬផែនទីផ្សេងទៀត ដោយបង្កើតផែនទី Sass ថ្មីជាមួយនឹងតម្លៃផ្ទាល់ខ្លួនរបស់អ្នក ហើយបញ្ចូលវាជាមួយផែនទីដើម។ ក្នុងករណីនេះ យើងនឹងបង្កើត $custom-colorsផែនទីថ្មីមួយ ហើយបញ្ចូលវាជាមួយ $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

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

ដើម្បីលុបពណ៌ចេញពី $theme-colorsឬផែនទីផ្សេងទៀត សូមប្រើ map-remove. សូមដឹងថា អ្នកត្រូវបញ្ចូល $theme-colorsរវាងតម្រូវការរបស់យើង បន្ទាប់ពីនិយមន័យរបស់វានៅក្នុង variablesនិងមុនការប្រើប្រាស់វានៅក្នុង maps៖

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

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

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

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

មុខងារ

ពណ៌

នៅជាប់នឹង ផែនទី Sass ដែល យើងមាន ពណ៌ស្បែកក៏អាចប្រើជាអថេរឯកត្តជនបានដែរ ដូចជា $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

អ្នកអាចធ្វើឱ្យពណ៌ភ្លឺ ឬងងឹតដោយប្រើ Bootstrap tint-color()និង shade-color()មុខងារ។ មុខងារទាំងនេះនឹងលាយពណ៌ជាមួយពណ៌ខ្មៅ ឬស មិនដូចមុខងារដើមរបស់ Sass lighten()និង darken()មុខងារដែលនឹងផ្លាស់ប្តូរពន្លឺដោយចំនួនថេរ ដែលជារឿយៗមិននាំទៅរកឥទ្ធិពលដែលចង់បាន។

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

នៅក្នុងការអនុវត្ត អ្នកនឹងហៅមុខងារ និងឆ្លងកាត់ប៉ារ៉ាម៉ែត្រពណ៌ និងទម្ងន់។

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

កម្រិតពណ៌

ដើម្បីបំពេញតាម តម្រូវការកម្រិតពណ៌នៃ ខ្លឹមសារគេហទំព័រ (WCAG) អ្នកនិពន្ធ ត្រូវតែ ផ្តល់កម្រិត ពណ៌អត្ថបទអប្បបរមានៃ 4.5:1 និងកម្រិត ពណ៌មិនអត្ថបទអប្បបរមានៃ 3:1 ដោយមានករណីលើកលែងតិចតួចបំផុត។

ដើម្បីជួយក្នុងរឿងនេះ យើងបានបញ្ចូល color-contrastមុខងារនៅក្នុង Bootstrap ។ វាប្រើ ក្បួនដោះស្រាយសមាមាត្រកម្រិតពណ៌របស់ WCAG សម្រាប់ការគណនាកម្រិតកម្រិតពណ៌ដោយផ្អែកលើ ពន្លឺដែលទាក់ទងគ្នា ក្នុង sRGBចន្លោះពណ៌ ដើម្បីត្រឡប់ពន្លឺ ( #fff), ងងឹត ( #212529) ឬខ្មៅ ( #000) ពណ៌ផ្ទុយដោយផ្អែកលើពណ៌មូលដ្ឋានដែលបានបញ្ជាក់។ មុខងារនេះមានប្រយោជន៍ជាពិសេសសម្រាប់ mixins ឬ loops ដែលអ្នកកំពុងបង្កើត class ច្រើន។

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

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

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

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

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

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

រត់គេចពី SVG

យើងប្រើ escape-svgមុខងារដើម្បីគេចចេញពី <, >និង #តួអក្សរសម្រាប់រូបភាពផ្ទៃខាងក្រោយ SVG ។ នៅពេលប្រើ escape-svgមុខងារ ទិន្នន័យ URIs ត្រូវតែត្រូវបានដកស្រង់។

មុខងារបន្ថែមនិងដក

យើងប្រើ មុខងារ addនិង subtractមុខងារដើម្បីរុំមុខងារ CSS calc។ គោលបំណងចម្បងនៃមុខងារទាំងនេះគឺដើម្បីជៀសវាងកំហុសនៅពេលដែល 0តម្លៃ "unitless" ត្រូវបានបញ្ជូនទៅក្នុង calcកន្សោមមួយ។ កន្សោមដូច calc(10px - 0)នឹងបង្ហាញកំហុសនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតទាំងអស់ ទោះបីជាត្រូវតាមគណិតវិទ្យាក៏ដោយ។

ឧទាហរណ៍ដែល calc មានសុពលភាព៖

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

ឧទាហរណ៍ដែល calc មិនត្រឹមត្រូវ៖

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

ល្បាយ

ថត របស់យើង scss/mixins/មាន mixins ជាច្រើនដែលផ្តល់ថាមពលដល់ផ្នែកនៃ Bootstrap ហើយក៏អាចប្រើនៅលើគម្រោងផ្ទាល់ខ្លួនរបស់អ្នកផងដែរ។

គ្រោងការណ៍ពណ៌

ការលាយបញ្ចូលគ្នាខ្លីៗសម្រាប់ prefers-color-schemeសំណួរមេឌៀគឺអាចរកបានជាមួយនឹងការគាំទ្រសម្រាប់ light, darkនិងពណ៌ចម្រុះផ្ទាល់ខ្លួន។

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}